💥 feat!: Added configContext and completed tasks toogle

app/Components/ConfigMenu/CompletedTasksSwap.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useConfig } from "@/app/_lib/contexts/ConfigContext";
+
+export function CompletedTasksSwap() {
+  const { config, updateConfig } = useConfig();
+
+  const showCompletedTasks = config.showCompletedTasks;
+
+  function toggleShowCompletedTasks() {
+    updateConfig({ ...config, showCompletedTasks: !showCompletedTasks });
+  }
+
+  return (
+    <label className="swap swap-flip">
+      {/* this hidden checkbox controls the state */}
+      <input
+        type="checkbox"
+        checked={showCompletedTasks}
+        onChange={toggleShowCompletedTasks}
+      />
+
+      {/* eye icon */}
+
+      <svg
+        className="swap-on fill-current w-12 h-12"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+        <path
+          fillRule="evenodd"
+          d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+          clipRule="evenodd"
+        />
+      </svg>
+
+      {/* closed eye icon */}
+      <svg
+        className="swap-off fill-current w-12 h-12"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+
+  <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
+  <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
+  <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
+</svg>
+
+    </label>
+  );
+}

app/Components/ConfigMenu/ConfigMenu.tsx

@@ -27,6 +27,7 @@ export default function ConfigMenu() {
           <ul className="p-4 w-80 min-h-full bg-base-200 text-base-content">
             {/* Sidebar content here */}
             <ThemeMenu></ThemeMenu>
+
           </ul>
         </div>
       </div>

app/Components/ConfigMenu/Navbar.tsx

@@ -1,9 +1,12 @@
+import { CompletedTasksSwap } from "./CompletedTasksSwap";
 import ConfigMenu from "./ConfigMenu";
 
 export default function MainNavbar() {
   return (
     <div className="navbar bg-base-100">
-      <div className="navbar-start"></div>
+      <div className="navbar-start">
+        <CompletedTasksSwap />
+      </div>
       <div className="navbar-end">
         <ConfigMenu />
       </div>

app/Components/TasksApp/TaskList.tsx

@@ -1,7 +1,7 @@
+
+import { useConfig } from "@/app/_lib/contexts/ConfigContext";
 import DragIcon from "@/app/_lib/icons/DragIcon";
 import TrashIcon from "@/app/_lib/icons/TrashIcon";
-import { animations } from "@formkit/drag-and-drop";
-import { dragAndDrop, useDragAndDrop } from "@formkit/drag-and-drop/react";
 import clsx from "clsx";
 import { useRef, useState } from "react";
 
@@ -16,6 +16,8 @@ export default function TaskList({
   onChangeTask: any;
   onDeleteTask: any;
 }) {
+  const {config} = useConfig();
+
   const listRef = useRef(null);
 
   const [draggedOverTask, setDraggedOverTask] = useState<number | null>(null);
@@ -56,6 +58,8 @@ export default function TaskList({
             {
               "border-dashed border-primary": index == draggedOverTask,
               "border-base-100": index != draggedOverTask,
+              //dont display if it's done on config
+              "hidden": !config.showCompletedTasks && task.done,
             }
           )}
           key={task.id}
@@ -77,24 +81,24 @@ function Task({
   onChange: any;
   onDelete: any;
 }) {
-  const playSoundCheck = () => {
-    console.log("Playing sound");
+  const {config} = useConfig();
 
-    const audio = new Audio("./sounds/[Original] completedTaskSound.mp3");
+  const playSoundCheck = () => {
+    const audio = new Audio(config.checkAudio);
     audio.play();
   };
 
   const playSoundUncheck = () => {
     console.log("Playing sound");
 
-    const audio = new Audio("./sounds/CompletedTaskBassInverted.mpeg");
+    const audio = new Audio(config.uncheckAudio);
     audio.play();
   };
 
   const playSoundDelete = () => {
     console.log("Playing sound");
 
-    const audio = new Audio("./sounds/delete.mp3");
+    const audio = new Audio(config.deleteAudio);
     audio.play();
   };
 

app/_lib/contexts/ConfigContext.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+// ConfigContext.tsx
+import React, { createContext, useState, useContext, ReactNode } from "react";
+
+const ConfigContext = createContext<any | null>(null);
+
+export interface TasksConfig {
+  checkAudio: string;
+  uncheckAudio: string;
+  deleteAudio: string;
+  showCompletedTasks: boolean;
+}
+
+const initialConfig: TasksConfig = {
+  checkAudio: "./sounds/[Original] completedTaskSound.mp3",
+  uncheckAudio: "./sounds/CompletedTaskBassInverted.mpeg",
+  deleteAudio: "./sounds/delete.mp3",
+  showCompletedTasks: true,
+};
+
+export const ConfigContextProvider = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  const [config, setConfig] = useState<TasksConfig>(initialConfig);
+
+  const updateConfig = (newConfig: TasksConfig) => {
+    setConfig({ ...newConfig });
+  };
+
+  return (
+    <ConfigContext.Provider value={{ config, updateConfig }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+
+export const useConfig = () => {
+  return useContext(ConfigContext);
+};

app/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import MainNavbar from "./Components/ConfigMenu/Navbar";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -20,10 +19,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <MainNavbar />
-        {children}
-      </body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
-
+import { ConfigContextProvider } from "./_lib/contexts/ConfigContext";
+import MainNavbar from "./Components/ConfigMenu/Navbar";
 
 //Using this just to be able to use localStorage is probably against the Geneva convention
 //but if I spend any more hours trying to figure out how to use localStorage
@@ -8,11 +9,13 @@ const TaskAppNoSSR = dynamic(() => import("./Components/TasksApp/TaskApp"), {
   ssr: false,
 });
 
-
 export default function Home() {
   return (
-    <main className="flex min-h-full flex-col items-center lg:pt-0 lg:p-24 md:p-0 pt-0">
+    <ConfigContextProvider>
+      <MainNavbar />
+      <main className="flex min-h-full flex-col items-center lg:pt-0 lg:p-24 md:p-0 pt-0">
         <TaskAppNoSSR />
-    </main>
+      </main>
+    </ConfigContextProvider>
   );
 }