I have a list of items that should be saved if they are open also an ‘active’ item that is currently previewed. Everything disappears on reload.
const Projects = () => {
const [allProjectsOpen, setAllProjectsOpen] = useState(false);
const [reactProjectsOpen, setReactProjectsOpen] = useState(false);
const [angularProjectsOpen, setAngularProjectsOpen] = useState(false);
const [openItems, setOpenItems] = useState([]);
const [activeItem, setActiveItem] = useState(null);
const projectItemsRef = useRef([
{
name: '_photo_portfolio',
icon: <RiJavascriptFill className="w-6 h-6 text-custom-blue" />,
type: 'react',
component: PhotoPortfolio,
},
{
name: '_angul_it',
icon: <FaAngular className="w-6 h-6 text-custom-purple" />,
type: 'angular',
component: AngulIt,
},
{
name: '_unknown_project',
icon: <RiJavascriptFill className="w-6 h-6 text-custom-blue" />,
type: 'react',
component: UnknownProject,
},
]);
// Load state from localStorage
useEffect(() => {
const storedOpenItemNames = JSON.parse(localStorage.getItem('openItemNames')) || [];
const storedActiveItemName = localStorage.getItem('activeItemName');
const storedOpenItems = projectItemsRef.current.filter(item => storedOpenItemNames.includes(item.name));
setOpenItems(storedOpenItems);
setActiveItem(storedActiveItemName || null);
}, []);
// Save state to localStorage
useEffect(() => {
// Save state to localStorage when openItems or activeItem changes
const openItemNames = openItems.map(item => item.name);
localStorage.setItem('openItemNames', JSON.stringify(openItemNames));
localStorage.setItem('activeItemName', activeItem);
}, [openItems, activeItem]);
// Add item to openItems
const addItem = (item) => {
setOpenItems((prevItems) => {
// Prevent adding duplicates
if (prevItems.some(prevItem => prevItem.name === item.name)) {
return prevItems;
}
return [...prevItems, item]; // Add item to the openItems array
});
setActiveItem(item.name); // Set the newly added item as active
};
// Remove item from openItems
const removeItem = (itemName) => {
setOpenItems((prevItems) => prevItems.filter((prevItem) => prevItem.name !== itemName));
if (activeItem === itemName) {
setActiveItem(null); // Reset active item if it's removed
}
};
return (
<div>
<div>
<ItemList
items={openItems}
activeItem={activeItem}
setActiveItem={setActiveItem}
removeItem={removeItem} />
<div>
{ActiveComponent && <ActiveComponent />}
</div>
</div>
</div>
);
};
I’m trying to save this to local storage so on reload it would have the list and the active item open. I can see it saves the items and active item to local storage but on reload everything disappears.