✨ feat: Made configuration persistent onReload (localStorage Atom)

Author: bytevictor

app/Components/ConfigMenu/DisableTabs.tsx

@@ -6,10 +6,10 @@ import { useState } from "react";
 export function DisableTabsOption() {
   const { config, updateConfig } = useConfig();
 
-  const disableTabs = config.disableTabs
+  const disableTabs = config.disableTabs;
 
   function toogleTabsFunctionality() {
-    updateConfig({ disableTabs: !disableTabs });
+    updateConfig({ ...config, disableTabs: !disableTabs });
   }
 
   return (

app/Components/TasksApp/_TaskApp.tsx

@@ -12,13 +12,13 @@ import { useConfig } from "@/app/_lib/contexts/ConfigContext";
 import clsx from "clsx";
 
 const initialTasks: Task[] = [
-  { id: "2", text: "Drink matcha", done: false, date: new Date() },
-  { id: "1", text: "Call grandma", done: false, date: new Date() },
+  { id: "2", text: "Drink matcha", done: false, date: new Date(99, 0) },
+  { id: "1", text: "Call grandma", done: false, date: new Date(99, 0) },
   {
     id: "0",
     text: "Contemplate the inevitable increase of entropy in the universe",
     done: true,
-    date: new Date(),
+    date: new Date(99, 0 ),
   },
 ];
 

app/_lib/contexts/ConfigContext.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 // ConfigContext.tsx
 import React, { createContext, useState, useContext, ReactNode } from "react";
 
@@ -21,12 +23,14 @@ const initialConfig: TasksConfig = {
   disableTabs: false,
 };
 
+const configAtom = atomWithStorage("config", initialConfig);
+
 export const ConfigContextProvider = ({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) => {
-  const [config, setConfig] = useState<TasksConfig>(initialConfig);
+  const [config, setConfig] = useAtom(configAtom);
 
   const updateConfig = (newConfig: TasksConfig) => {
     setConfig({ ...newConfig });