From 748f1cb76885d5a400ab127604c7e2d98c662d4c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 13 Oct 2024 06:06:07 +0000
Subject: [PATCH] Load tags from database

Updated the sidebar to dynamically load tags and their corresponding colors from the database using the tags table. The tag and color attributes are now fetched and displayed in the sidebar.
[skip gpt_engineer]
---
 src/components/Sidebar.jsx                  | 51 +++++++++++----------
 src/integrations/supabase/hooks/useNotes.js | 26 +++--------
 src/integrations/supabase/index.js          |  5 +-
 3 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 01c5050..24d3d21 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CircleUserRound, ChevronLeft, ChevronRight, Check, X, Plus } from 'lucide-react';
-import { useSupabaseAuth, useNotes } from '../integrations/supabase';
+import { useSupabaseAuth, useNotes, useTags } from '../integrations/supabase';
 import { useNavigate } from 'react-router-dom';
 import {
   DropdownMenu,
@@ -20,7 +20,7 @@ import { Button } from "@/components/ui/button";
 import { format } from 'date-fns';
 import AddTagModal from './AddTagModal';
 
-const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNewCategory }) => {
+const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const { session, logout } = useSupabaseAuth();
   const navigate = useNavigate();
@@ -28,6 +28,7 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
   const [isProfileDialogOpen, setIsProfileDialogOpen] = useState(false);
   const [isAddTagModalOpen, setIsAddTagModalOpen] = useState(false);
   const { data: notes, isLoading: notesLoading } = useNotes();
+  const { data: tags, isLoading: tagsLoading } = useTags();
 
   useEffect(() => {
     const handleResize = () => {
@@ -91,27 +92,31 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
         </button>
       </div>
       <nav className="flex-grow">
-        {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"
-            onClick={() => toggleFilter(category.name)}
-          >
-            {activeFilters.includes(category.name) ? (
-              <Check className={`w-3 h-3 ${category.color} rounded-full mr-3`} />
-            ) : (
-              <div className={`w-2 h-2 rounded-full ${category.color} mr-3`}></div>
-            )}
-            {!isCollapsed && (
-              <>
-                <span className="flex-grow">{category.name}</span>
-                <span className={`${category.color} text-xs px-2 py-1 rounded-full min-w-[24px] flex items-center justify-center`}>
-                  {getCategoryCount(category.name).toString()}
-                </span>
-              </>
-            )}
-          </div>
-        ))}
+        {tagsLoading ? (
+          <div>Loading tags...</div>
+        ) : (
+          tags?.map((tag) => (
+            <div
+              key={tag.tag}
+              className="flex items-center mb-2 cursor-pointer hover:bg-gray-800 rounded-md p-2 transition-colors"
+              onClick={() => toggleFilter(tag.tag)}
+            >
+              {activeFilters.includes(tag.tag) ? (
+                <Check className={`w-3 h-3 ${tag.color} rounded-full mr-3`} />
+              ) : (
+                <div className={`w-2 h-2 rounded-full ${tag.color} mr-3`}></div>
+              )}
+              {!isCollapsed && (
+                <>
+                  <span className="flex-grow">{tag.tag}</span>
+                  <span className={`${tag.color} text-xs px-2 py-1 rounded-full min-w-[24px] flex items-center justify-center`}>
+                    {getCategoryCount(tag.tag).toString()}
+                  </span>
+                </>
+              )}
+            </div>
+          ))
+        )}
         {!isCollapsed && (
           <Button
             variant="ghost"
diff --git a/src/integrations/supabase/hooks/useNotes.js b/src/integrations/supabase/hooks/useNotes.js
index b88c6f2..3b0a4cd 100644
--- a/src/integrations/supabase/hooks/useNotes.js
+++ b/src/integrations/supabase/hooks/useNotes.js
@@ -7,25 +7,6 @@ const fromSupabase = async (query) => {
     return data;
 };
 
-/*
-### notes
-
-| name       | type                     | format | required |
-|------------|--------------------------|--------|----------|
-| id         | integer                  | bigint | true     |
-| created_at | timestamp with time zone | string | true     |
-| title      | text                     | string | false    |
-| content    | text                     | string | false    |
-| color      | text                     | string | false    |
-| tag        | text                     | string | false    |
-
-Note: 
-- 'id' is the Primary Key.
-- 'created_at' has a default value of now().
-- 'color' has a default value of 'pink'.
-- 'tag' has a default value of 'Work'.
-*/
-
 export const useNote = (id) => useQuery({
     queryKey: ['notes', id],
     queryFn: () => fromSupabase(supabase.from('notes').select('*').eq('id', id).single()),
@@ -64,4 +45,9 @@ export const useDeleteNote = () => {
             queryClient.invalidateQueries({ queryKey: ['notes'] });
         },
     });
-};
\ No newline at end of file
+};
+
+export const useTags = () => useQuery({
+    queryKey: ['tags'],
+    queryFn: () => fromSupabase(supabase.from('tags').select('*')),
+});
\ No newline at end of file
diff --git a/src/integrations/supabase/index.js b/src/integrations/supabase/index.js
index 29ae2f6..506a3a7 100644
--- a/src/integrations/supabase/index.js
+++ b/src/integrations/supabase/index.js
@@ -1,6 +1,6 @@
 import { supabase } from './supabase';
 import { SupabaseAuthProvider, useSupabaseAuth, SupabaseAuthUI } from './auth';
-import { useNote, useNotes, useAddNote, useUpdateNote, useDeleteNote } from './hooks/useNotes';
+import { useNote, useNotes, useAddNote, useUpdateNote, useDeleteNote, useTags } from './hooks/useNotes';
 
 export {
   supabase,
@@ -11,5 +11,6 @@ export {
   useNotes,
   useAddNote,
   useUpdateNote,
-  useDeleteNote
+  useDeleteNote,
+  useTags
 };
\ No newline at end of file