Reverted to edit b443dcca-9d05-42c8-aa58-14be44bbabb8: "Fix color cod…

…ing for Money tag Updated the color coding logic for notes associated with the Money tag to ensure proper visual representation. [skip gpt_engineer]"
rhofkens · Oct 12, 2024 · 47a306f · 47a306f
1 parent dec9c0b
commit 47a306f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { CircleUserRound, ChevronLeft, ChevronRight, Check, X, Plus } from 'lucide-react';
 import { useSupabaseAuth } from '../integrations/supabase';
 import { useNavigate } from 'react-router-dom';
-import { useNotes, useTags, useAddTag } from '../integrations/supabase';
+import { useNotes } from '../integrations/supabase';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,16 +21,14 @@ import { Button } from "@/components/ui/button";
 import { format } from 'date-fns';
 import AddTagModal from './AddTagModal';
 
-const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory }) => {
+const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNewCategory }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const { session, logout } = useSupabaseAuth();
   const navigate = useNavigate();
   const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
   const [isProfileDialogOpen, setIsProfileDialogOpen] = useState(false);
   const [isAddTagModalOpen, setIsAddTagModalOpen] = useState(false);
-  const { data: notes, isLoading: notesLoading } = useNotes();
-  const { data: tags, isLoading: tagsLoading } = useTags();
-  const addTag = useAddTag();
+  const { data: notes, isLoading } = useNotes();
 
   useEffect(() => {
     const handleResize = () => {
@@ -58,21 +56,17 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory })
   };
 
   const getCategoryCount = (categoryName) => {
-    if (notesLoading || !notes) return 0;
+    if (isLoading || !notes) return 0;
     return notes.filter(note => note.tag === categoryName).length;
   };
 
   const handleAddNewTag = (newTag) => {
-    addTag.mutate({ name: newTag.name, color: newTag.color });
+    addNewCategory(newTag);
     setIsAddTagModalOpen(false);
   };
 
-  if (tagsLoading) {
-    return <div>Loading tags...</div>;
-  }
-
   return (
-    <div className={`bg-gray-900 text-white p-6 flex flex-col h-screen transition-all duration-300 ease-in-out ${isCollapsed ? 'w-10 sm:w-20' : 'w-32 sm:w-64'}`}>
+    <div className={`bg-gray-900 text-white p-6 flex flex-col h-screen transition-all duration-300 ${isCollapsed ? 'w-10 sm:w-20' : 'w-32 sm:w-64'}`}>
       <div className="flex items-center mb-8 justify-between">
         {!isCollapsed && (
           <DropdownMenu>
@@ -98,7 +92,7 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory })
         </button>
       </div>
       <nav className="flex-grow">
-        {tags.map((category) => (
+        {categories.map((category) => (
           <div
             key={category.name}
             className="flex items-center mb-2 cursor-pointer hover:bg-gray-800 rounded-md p-2 transition-colors"
@@ -189,4 +183,4 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory })
   );
 };
 
-export default Sidebar;
+export default Sidebar;
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
@@ -3,7 +3,7 @@ import Sidebar from '../components/Sidebar';
 import Header from '../components/Header';
 import NotesGrid from '../components/NotesGrid';
 import CreateNoteModal from '../components/CreateNoteModal';
-import { useSupabaseAuth, useNotes, useTags } from '../integrations/supabase';
+import { useSupabaseAuth, useNotes } from '../integrations/supabase';
 
 const IndexContent = () => {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -12,7 +12,14 @@ const IndexContent = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const { session } = useSupabaseAuth();
   const { data: notes, isLoading: notesLoading } = useNotes();
-  const { data: tags, isLoading: tagsLoading } = useTags();
+  const [categories, setCategories] = useState([
+    { name: 'Videos', color: 'bg-purple-500' },
+    { name: 'Wishlist', color: 'bg-yellow-500' },
+    { name: 'Assignment', color: 'bg-blue-600' },
+    { name: 'Projects', color: 'bg-teal-500' },
+    { name: 'Work', color: 'bg-pink-500' },
+    { name: 'Study', color: 'bg-orange-500' },
+  ]);
 
   const handleAddNote = () => {
     setIsCreateModalOpen(true);
@@ -45,7 +52,11 @@ const IndexContent = () => {
     toggleFilter(tag);
   };
 
-  if (notesLoading || tagsLoading) {
+  const addNewCategory = (newCategory) => {
+    setCategories([...categories, newCategory]);
+  };
+
+  if (notesLoading) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }
 
@@ -55,7 +66,8 @@ const IndexContent = () => {
         activeFilters={activeFilters}
         toggleFilter={toggleFilter}
         clearFilters={clearFilters}
-        categories={tags}
+        categories={categories}
+        addNewCategory={addNewCategory}
       />
       <div className="flex-1 flex flex-col">
         <Header 
@@ -73,7 +85,7 @@ const IndexContent = () => {
         <CreateNoteModal
           isOpen={isCreateModalOpen}
           onClose={() => setIsCreateModalOpen(false)}
-          categories={tags}
+          categories={categories}
         />
       </div>
     </div>