allow search using title and tags

client/package.json

@@ -38,6 +38,7 @@
     "electron-is-dev": "^2.0.0",
     "file-saver": "^2.0.5",
     "firebase": "^10.4.0",
+    "fuse.js": "^7.0.0",
     "image-blob-reduce": "^4.1.0",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",

client/src/components/lib/Board.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { TopBar } from '@/components/lib/TopBar';
 import { BoardScroll } from './BoardScroll';
 import { Settings } from './Settings';
-import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import { Canvas, useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 
 /**
  * Define a react component that displays
@@ -13,10 +13,11 @@ import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 
 export const Board = () => {
   const { board } = useCanvasBoardStore(['board']);
+  const [searchCanvases, setSearchCanvases] = useState<Canvas[]>([]);
   return (
     <div className="flex flex-col w-5/6 h-full bg-[#FEFDFF]">
-      <TopBar />
-      {board === 'Folder' && <BoardScroll />}
+      <TopBar setSearchCanvases={setSearchCanvases} />
+      {board === 'Folder' && <BoardScroll searchCanvases={searchCanvases} />}
       {board == 'Settings' && <Settings />}
       {/** To be added template and setting page */}
     </div>

client/src/components/lib/BoardScroll.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { CalendarIcon } from '@radix-ui/react-icons';
-import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import { Canvas, useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 import { Thumbnail } from './Thumbnail';
 import { DeleteCanavasDialog } from './DeleteCanvasDialog';
 import axios from 'axios';
@@ -59,13 +59,18 @@ export const createStateWithRoughElement = (state: CanvasElementState) => {
  * @author Abdalla Abdelhadi
  */
 
-export const BoardScroll = () => {
+export const BoardScroll = ({
+  searchCanvases,
+}: {
+  searchCanvases: Canvas[];
+}) => {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [state, setState] = useState<CanvasElementState>();
   const [thumbnailUrl, setThumbnailUrl] = useState('');
-  const { canvases, boardMeta, setBoardMeta } = useCanvasBoardStore([
+  const { canvases, boardMeta, folder, setBoardMeta } = useCanvasBoardStore([
     'canvases',
     'boardMeta',
+    'folder',
     'setBoardMeta',
   ]);
   const { setCanvasElementState } = useCanvasElementStore([
@@ -79,11 +84,22 @@ export const BoardScroll = () => {
 
   const { toast } = useToast();
 
+  const sortedCavases = (
+    searchCanvases.length === 0 ? canvases : searchCanvases
+  )
+    .filter((board) => (folder === 'Recent' ? true : folder === board.folder))
+    .sort((a, b) => {
+      const dateA = new Date(a.updatedAt);
+      const dateB = new Date(b.updatedAt);
+
+      return dateB.getTime() - dateA.getTime();
+    });
+
   return (
     <div className="relative flex flex-col mx-2 h-full">
       <div className="w-full h-[250px] overflow-x-scroll scroll whitespace-nowrap scroll-smooth">
         {/* eslint-disable-next-line sonarjs/cognitive-complexity */}
-        {canvases.map((board) => (
+        {sortedCavases.map((board) => (
           <div
             key={board.id}
             className={

client/src/components/lib/TopBar.tsx

@@ -2,34 +2,49 @@ import React from 'react';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { PlusIcon } from '@radix-ui/react-icons';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import { Canvas, useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 import { IconDropDown } from './IconDropDown';
 import { useAppStore } from '@/stores/AppStore';
 import axios from 'axios';
 import { REST } from '@/constants';
 import { useAuthStore } from '@/stores/AuthStore';
+import Fuse from 'fuse.js';
 
 /**
  * Define a react component that the top bar of the main dashboard
  * @author Abdalla Abdelhadi
  */
 
-export const TopBar = () => {
-  const { board, folder, addCanvas, setBoardMeta } = useCanvasBoardStore([
-    'board',
-    'folder',
-    'addCanvas',
-    'setBoardMeta',
-  ]);
+export const TopBar = ({
+  setSearchCanvases,
+}: {
+  setSearchCanvases: (canvases: Canvas[]) => void;
+}) => {
+  const { canvases, board, folder, addCanvas, setBoardMeta } =
+    useCanvasBoardStore([
+      'canvases',
+      'board',
+      'folder',
+      'addCanvas',
+      'setBoardMeta',
+    ]);
   const { userID } = useAuthStore(['userID']);
   const { setMode } = useAppStore(['setMode']);
+  const fuseOptions = { keys: ['title', 'tags'] };
+
+  const fuse = new Fuse(canvases, fuseOptions);
 
   return (
     <div className="flex flex-col">
       <div className="flex flex-row ml-5 gap-5">
         <MagnifyingGlassIcon className="h-[25px] w-[25px] mt-2 inline-flex items-center justify-center" />
         <div className="flex h-[50px] flex-1">
           <input
+            onChange={(e) =>
+              setSearchCanvases(
+                fuse.search(e.target.value).map((target) => target.item),
+              )
+            }
             type="text"
             className="h-[25px] mt-2 basis-3/4"
             placeholder="Search Boards"

client/src/views/Dashboard.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { Sidebar } from '@/components/lib/Sidebar';
 import { Board } from '@/components/lib/Board';
+import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
 
-const folders = ['Recent', 'Math', 'Science', 'Stats'];
 export default function Dashboard() {
+  const { canvases } = useCanvasBoardStore(['canvases']);
+
+  const userFolders = [
+    ...new Set(['Recent', ...canvases.map((board) => board.folder)]),
+  ];
+
   return (
     <div className="flex flex-row h-screen overflow-hidden">
-      <Sidebar folders={folders} />
+      <Sidebar folders={userFolders} />
       <Board />
     </div>
   );