Move search and garden fetch into Dashboard

mysilio-co · Nov 1, 2021 · 86c22c3 · 86c22c3
1 parent d88f62d
commit 86c22c3
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 16 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 { useGarden } from '../hooks/concepts';
 import { Loader } from './elements'
 import NoteCard from "./cards/NoteCard"
 import ImageCard from "./cards/ImageCard"
@@ -40,10 +38,8 @@ export function CardsFromGarden({ garden, webId, workspaceSlug }) {
   );
 }
 
-export default function Cards({ }) {
-  const myWebId = useWebId()
-  const { slug: workspaceSlug, webId } = useWorkspaceContext()
-  const { garden } = useGarden(webId, workspaceSlug);
+export default function Cards({ workspaceSlug, webId, garden }) {
+  const myWebId = useWebId();
 
   return (
     <>

diff --git a/components/Dashboard.jsx b/components/Dashboard.jsx
@@ -1,18 +1,31 @@
+import { useState } from 'react'
 import { useWebId } from 'swrlit'
 import WebMonetization from '../components/WebMonetization'
 import HeaderWithData from '../components/HeaderWithData'
 import { WorkspaceProvider } from '../contexts/WorkspaceContext'
+import { useGarden } from '../hooks/concepts';
 import Cards from '../components/Cards';
 
 export default function Dashboard() {
-  const webId = useWebId()
+  const webId = useWebId();
+  const workspaceSlug = 'default';
+  const { garden } = useGarden(webId, workspaceSlug);
+
+  const [search, setSearch] = useState('');
+
   return (
     <>
       <WebMonetization webId={webId} />
-      <HeaderWithData type="dashboard" />
+      <HeaderWithData
+        type="dashboard"
+        onSearch={(s) => {
+          console.log(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,10 +40,17 @@ 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';
+  const bg = type == 'dashboard' ? 'bg-header-gradient' : 'bg-my-green';
 
   return (
     <nav
@@ -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/cards/NoteCard.jsx b/components/cards/NoteCard.jsx
@@ -6,6 +6,7 @@ import { DCTERMS, FOAF } from "@inrupt/vocab-common-rdf";
 import { conceptIdFromUri } from "../../model/concept";
 import { notePath, urlSafeIdToConceptName } from "../../utils/uris";
 import { getRelativeTime } from '../../utils/time.js';
+import { workspace } from "rdf-namespaces/dist/space";
 
 export default function NoteCard({ concept, workspaceSlug, webId }) {
   const uri = asUrl(concept);

diff --git a/pages/u/[handle].jsx b/pages/u/[handle].jsx
@@ -16,6 +16,9 @@ export default function ProfilePage() {
   const router = useRouter()
   const { query: { handle } } = router
   const webId = handleToWebId(handle)
+  const workspaceSlug = 'default';
+  const { garden } = useGarden(webId, workspaceSlug);
+
   const { profile } = useProfile(webId)
   const name = profile && getStringNoLocale(profile, FOAF.name)
 
@@ -67,8 +70,8 @@ export default function ProfilePage() {
               </button>
             ))}
         </div>
-        <WorkspaceProvider webId={webId} slug="default">
-          <Cards webId={webId} />
+        <WorkspaceProvider webId={webId} slug={workspaceSlug}>
+          <Cards webId={webId} garden={garden} workspaceSlug={workspaceSlug} />
         </WorkspaceProvider>
       </div>
     </div>