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]
rhofkens · Oct 13, 2024 · 748f1cb · 748f1cb
1 parent 6f516b4
commit 748f1cb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 45 deletions.
diff --git 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,14 +20,15 @@ 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();
   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();
 
   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
@@ -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'] });
         },
     });
-};
+};
+
+export const useTags = () => useQuery({
+    queryKey: ['tags'],
+    queryFn: () => fromSupabase(supabase.from('tags').select('*')),
+});
diff --git 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
 };