Merge pull request #63 from mysilio-co/search

Search
mysilio-co · Nov 5, 2021 · 0695b0e · 0695b0e
2 parents 5f76968 + 217cc35
commit 0695b0e
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 143 deletions.
diff --git a/components/Cards.jsx b/components/Cards.jsx
@@ -1,7 +1,5 @@
 import { asUrl } from "@inrupt/solid-client";
 import { useWebId } from "swrlit";
-import { useWorkspaceContext } from "../contexts/WorkspaceContext";
-import { useConcepts } from "../hooks/concepts";
 import { Loader } from './elements'
 import NoteCard from "./cards/NoteCard"
 import ImageCard from "./cards/ImageCard"
@@ -15,52 +13,53 @@ import {
   isBookmarkedFile,
 } from '../utils/rdf';
 
-export function CardsFromConcepts({ concepts, webId, workspaceSlug }) {
+export function CardsFromGarden({ garden, webId, workspaceSlug }) {
   return (
     <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
-      {concepts &&
-        concepts.map((concept) => {
-          if (isConcept(concept)) {
+      {garden &&
+        garden.map((thing) => {
+          if (isConcept(thing)) {
             return (
               <NoteCard
-                key={asUrl(concept)}
-                concept={concept}
+                key={asUrl(thing)}
+                concept={thing}
                 webId={webId}
                 workspaceSlug={workspaceSlug}
               />
             );
-          } else if (isBookmarkedImage(concept)) {
-              return <ImageCard key={asUrl(concept)} image={concept} />;
-          } else if (isBookmarkedFile(concept)) {
-              return <FileCard key={asUrl(concept)} file={concept} />;
-          } else if (isBookmarkedLink(concept))
-              return <LinkCard key={asUrl(concept)} link={concept} />;
+          } else if (isBookmarkedImage(thing)) {
+            return <ImageCard key={asUrl(thing)} image={thing} />;
+          } else if (isBookmarkedFile(thing)) {
+            return <FileCard key={asUrl(thing)} file={thing} />;
+          } else if (isBookmarkedLink(thing))
+            return <LinkCard key={asUrl(thing)} link={thing} />;
         })}
     </ul>
   );
 }
 
-export default function Cards({ }) {
-  const myWebId = useWebId()
-  const { slug: workspaceSlug, webId } = useWorkspaceContext()
-  const { concepts } = useConcepts(webId, workspaceSlug);
+export default function Cards({ workspaceSlug, webId, garden }) {
+  const myWebId = useWebId();
 
   return (
     <>
-      {concepts ? (concepts.length > 0 ? (
-        <CardsFromConcepts webId={webId} concepts={concepts} workspaceSlug={workspaceSlug} />
+      {garden ? (
+        garden.length > 0 ? (
+          <CardsFromGarden
+            webId={webId}
+            garden={garden}
+            workspaceSlug={workspaceSlug}
+          />
+        ) : (
+          <div>
+            <h2 className="text-2xl mb-2">
+              {myWebId === webId
+                ? 'You have nothing in your garden yet. Add something using the New button in the header above.'
+                : `This garden is empty.`}
+            </h2>
+          </div>
+        )
       ) : (
-        <div>
-          <h2 className="text-2xl mb-2">
-            {(myWebId === webId) ? (
-              "You have nothing in your garden yet. Add something using the New button in the header above."
-            ) : (
-              `This garden is empty.`
-            )}
-
-          </h2>
-        </div>
-      )) : (
         <Loader />
       )}
     </>

diff --git a/components/ConceptPage.jsx b/components/ConceptPage.jsx
@@ -2,7 +2,7 @@ import { useProfile, useMyProfile, useWebId } from "swrlit";
 
 import { urlSafeIdToConceptName } from "../utils/uris";
 import { useConceptAndNote } from '../hooks/app';
-import { useCombinedConceptIndexDataset } from '../hooks/concepts'
+import { useCombinedWorkspaceIndexDataset } from '../hooks/concepts'
 
 import NoteHeader from './NoteHeader';
 import ConceptEditor from './ConceptEditor';
@@ -14,7 +14,7 @@ export default function ConceptPage({ editorId = 'concept-page', webId, workspac
   const { concept, saveConcept, note, noteError, maybeSaveNoteBody, deleteConcept, saving, privacy } = useConceptAndNote(webId, workspaceSlug, conceptName)
   const { profile: authorProfile } = useProfile(webId);
   const { profile: currentUserProfile } = useMyProfile();
-  const { index } = useCombinedConceptIndexDataset(webId, workspaceSlug);
+  const { index } = useCombinedWorkspaceIndexDataset(webId, workspaceSlug);
   const myNote = (webId === myWebId)
   return (
     <div>

diff --git a/components/Dashboard.jsx b/components/Dashboard.jsx
@@ -1,18 +1,29 @@
+import { useState } from 'react'
 import { useWebId } from 'swrlit'
 import WebMonetization from '../components/WebMonetization'
 import HeaderWithData from '../components/HeaderWithData'
 import { WorkspaceProvider } from '../contexts/WorkspaceContext'
+import { useFilteredGarden } from '../hooks/concepts';
 import Cards from '../components/Cards';
 
 export default function Dashboard() {
-  const webId = useWebId()
+  const webId = useWebId();
+  const workspaceSlug = 'default';
+  const [search, setSearch] = useState('');
+  const { garden } = useFilteredGarden(webId, workspaceSlug, search);
+
   return (
     <>
       <WebMonetization webId={webId} />
-      <HeaderWithData type="dashboard" />
+      <HeaderWithData
+        type="dashboard"
+        onSearch={(s) => {
+          setSearch(s);
+        }}
+      />
       <div className="py-6 px-18">
-        <WorkspaceProvider webId={webId} slug="default">
-          <Cards webId={webId} />
+        <WorkspaceProvider webId={webId} slug={workspaceSlug}>
+          <Cards webId={webId} garden={garden} workspaceSlug={workspaceSlug} />
         </WorkspaceProvider>
       </div>
     </>

diff --git a/components/Header.jsx b/components/Header.jsx
@@ -40,7 +40,14 @@ function ActiveModal({ title, open, onClose, conceptNames }) {
   }
 }
 
-export default function Header({ profile, loggedIn, logout, conceptNames, type }) {
+export default function Header({
+  profile,
+  loggedIn,
+  logout,
+  conceptNames,
+  type,
+  onSearch,
+}) {
   const avatarImgSrc = profile && getUrl(profile, FOAF.img);
   const [activeModal, setActiveModal] = useState(undefined);
   const bg = (type == 'dashboard') ? 'bg-header-gradient' : 'bg-my-green';
@@ -64,6 +71,10 @@ export default function Header({ profile, loggedIn, logout, conceptNames, type }
             placeholder="Search"
             icon={<SearchIcon className="ipt-header-search-icon" />}
             inputClassName="ipt-header-search"
+            onChange={(e) => {
+              e.preventDefault();
+              onSearch(e.target.value);
+            }}
           />
         </Formik>
       </div>

diff --git a/components/HeaderWithData.jsx b/components/HeaderWithData.jsx
@@ -10,6 +10,13 @@ export default function HeaderWithData(props) {
   const { logout } = useAuthentication()
   const conceptNames = useConceptNames()
   return (
-    <Header profile={profile} loggedIn={loggedIn} logout={logout} conceptNames={conceptNames} {...props} />
-  )
+    <Header
+      profile={profile}
+      loggedIn={loggedIn}
+      logout={logout}
+      conceptNames={conceptNames}
+      onSearch={props.onSearch}
+      {...props}
+    />
+  );
 }
diff --git a/components/Hex.jsx b/components/Hex.jsx
diff --git a/components/PrivacyChanger.jsx b/components/PrivacyChanger.jsx
@@ -16,7 +16,7 @@ import {
 import { useWorkspaceContext } from "../contexts/WorkspaceContext";
 
 import {
-  useConceptIndex,
+  useWorkspaceIndex,
   useConcept,
 } from "../hooks/concepts";
 import { useWorkspace } from "../hooks/app";
@@ -50,12 +50,12 @@ export default function PrivacyChanger({ name, changeTo, onFinished, ...rest })
   const webId = useWebId();
   const { slug: workspaceSlug } = useWorkspaceContext();
   const { concept } = useConcept(webId, workspaceSlug, name);
-  const { index: privateIndex, save: savePrivateIndex } = useConceptIndex(
+  const { index: privateIndex, save: savePrivateIndex } = useWorkspaceIndex(
     webId,
     workspaceSlug,
     "private"
   );
-  const { index: publicIndex, save: savePublicIndex } = useConceptIndex(
+  const { index: publicIndex, save: savePublicIndex } = useWorkspaceIndex(
     webId,
     workspaceSlug,
     "public"

diff --git a/components/modals/NewBookmark.jsx b/components/modals/NewBookmark.jsx
@@ -2,14 +2,14 @@ import { useState, Fragment } from 'react'
 import { Transition, Dialog } from '@headlessui/react';
 import { Formik, Field, Form } from "formik";
 import { Close as CloseIcon, TickCircle } from '../icons'
-import { useConceptIndex } from '../../hooks/concepts';
+import { useWorkspaceIndex } from '../../hooks/concepts';
 import { useWebId } from 'swrlit';
 import { addLinkToIndex } from '../../model/index';
 import Modal from '../Modal';
 
 export function NewBookmark({ onClose }) {
   const webId = useWebId()
-  const { index, save } = useConceptIndex(webId);
+  const { index, save } = useWorkspaceIndex(webId);
 
   const initialValues = { url: '' };
   const onSubmit = async ({ url }) => {

diff --git a/components/modals/NewFile.jsx b/components/modals/NewFile.jsx
@@ -2,7 +2,7 @@ import { useState, Fragment } from 'react'
 import { Formik, Field, Form } from "formik";
 import { Transition, Dialog } from '@headlessui/react';
 import { Close as CloseIcon, TickCircle } from '../icons'
-import { useConceptIndex } from '../../hooks/concepts';
+import { useWorkspaceIndex } from '../../hooks/concepts';
 import { useWebId } from 'swrlit';
 import { addFileToIndex } from '../../model';
 import { uploadFromFile } from '../../components/ImageUploader';
@@ -11,7 +11,7 @@ import Modal from '../Modal';
 
 export function NewFile({ onClose }) {
   const webId = useWebId();
-  const { index, save } = useConceptIndex(webId);
+  const { index, save } = useWorkspaceIndex(webId);
   const fileContainerUri = useFileContainerUri(webId);
   const [file, setFile] = useState()
   const onFileChanged = (file) => {

diff --git a/components/modals/NewImage.jsx b/components/modals/NewImage.jsx
@@ -3,7 +3,7 @@ import { Formik, Field, Form } from "formik";
 import { Transition, Dialog } from '@headlessui/react';
 import { Close as CloseIcon, TickCircle } from '../icons'
 import * as Yup from "yup";
-import { useConceptIndex } from '../../hooks/concepts';
+import { useWorkspaceIndex } from '../../hooks/concepts';
 import { useImageUploadUri } from '../../hooks/uris';
 import { useWebId } from 'swrlit';
 import { addImageToIndex } from '../../model';
@@ -12,7 +12,7 @@ import Modal from '../Modal';
 
 export function NewImage({ onClose }) {
   const webId = useWebId();
-  const { index, save } = useConceptIndex(webId);
+  const { index, save } = useWorkspaceIndex(webId);
   const [imageUrl, setImageUrl] = useState(undefined);
   const [file, setFile] = useState(undefined);