fix metadata

supermemoryai · Apr 13, 2024 · 560363b · 560363b
1 parent 2b926ba
commit 560363b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -16,10 +16,12 @@ import { Loader, Plus, X } from "lucide-react";
 import { StoredContent } from "@/server/db/schema";
 import { cleanUrl } from "@/lib/utils";
 import { motion } from "framer-motion"
+import { getMetaData } from "@/server/helpers";
 
-export function AddMemoryPage() {
+export function AddMemoryPage({ closeDialog }: { closeDialog: () => void }) {
   const { addMemory } = useMemory();
 
+  const [loading, setLoading] = useState(false);
   const [url, setUrl] = useState("");
   const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
 
@@ -37,38 +39,59 @@ export function AddMemoryPage() {
         placeholder="Enter the URL of the page"
         type="url"
         data-modal-autofocus
-        className="bg-rgray-4 mt-2 w-full"
+        className="disabled:opacity-70 disabled:cursor-not-allowed bg-rgray-4 mt-2 w-full"
         value={url}
         onChange={(e) => setUrl(e.target.value)}
+				disabled={loading}
       />
       <DialogFooter>
         <FilterSpaces
           selectedSpaces={selectedSpacesId}
           setSelectedSpaces={setSelectedSpacesId}
-          className="hover:bg-rgray-5 mr-auto bg-white/5"
+          className="disabled:opacity-70 disabled:cursor-not-allowed hover:bg-rgray-5 mr-auto bg-white/5"
           name={"Spaces"}
+					disabled={loading}
         />
         <button
           type={"submit"}
+					disabled={loading}
           onClick={async () => {
-            // @Dhravya this is adding a memory with insufficient information fix pls
+						setLoading(true)
+						const metadata = await getMetaData(url)
             await addMemory(
               {
-                title: url,
+                title: metadata.title,
+								description: metadata.description,
                 content: "",
                 type: "page",
                 url: url,
-                image: "/icons/logo_without_bg.png",
+                image: metadata.image,
                 savedAt: new Date(),
               },
               selectedSpacesId,
             );
+						closeDialog()
           }}
-          className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2"
+          className="relative disabled:opacity-70 disabled:cursor-not-allowed bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2"
         >
-          Add
+					<motion.div 
+						initial={{ x: '-50%', y: '-100%' }}
+						animate={loading && { y: '-50%', x: '-50%', opacity: 1 }}
+						className="opacity-0 absolute top-1/2 left-1/2 translate-y-[-100%] -translate-x-1/2"
+					>
+						<Loader className="w-5 h-5 animate-spin text-rgray-11" />
+					</motion.div>
+					<motion.div
+						initial={{ y: '0%' }}
+						animate={loading && { opacity: 0, y: '30%' }}
+					>
+						Add
+					</motion.div>
         </button>
-        <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+        <DialogClose
+					disabled={loading}
+					className="disabled:opacity-70 disabled:cursor-not-allowed hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2"
+				>
           Cancel
         </DialogClose>
       </DialogFooter>

diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -215,6 +215,9 @@ export function MemoryItem({
 						className="h-16 w-16"
 						id={id.toString()}
 						src={image!}
+						onError={(e) => {
+							(e.target as HTMLImageElement).src = "/icons/white_without_bg.png"
+						}}
 					/>
 				): type === "note" ? (
 					<div className="shadow-md rounded-md bg-rgray-4 p-2 flex justify-center items-center">
@@ -414,7 +417,7 @@ export function SpaceMoreButton({
 							className="focus:bg-red-100 focus:text-red-400 dark:focus:bg-red-100/10"
 						>
 							<Trash2 className="mr-2 h-4 w-4" strokeWidth={1.5} />
-							Move to Trash
+							Delete
 						</DropdownMenuItem>
 					</DialogTrigger>
         </DropdownMenuContent>
@@ -479,7 +482,7 @@ export function AddMemoryModal({
         className="w-max max-w-[auto]"
       >
         {type === "page" ? (
-          <AddMemoryPage />
+          <AddMemoryPage closeDialog={() => setIsDialogOpen(false)} />
         ) : type === "note" ? (
           <NoteAddPage closeDialog={() => setIsDialogOpen(false)} />
         ) : type === "space" ? (

diff --git a/apps/web/src/server/helpers.ts b/apps/web/src/server/helpers.ts
@@ -1,3 +1,4 @@
+'use server';
 import * as cheerio from "cheerio"
 
 export async function getMetaData(url: string) {