aboutsummaryrefslogtreecommitdiff
path: root/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
diff options
context:
space:
mode:
authorYash <[email protected]>2024-04-11 11:02:24 +0000
committerYash <[email protected]>2024-04-11 11:02:24 +0000
commitbf99ee97f7c4d7580829d074816ebe0d32316d92 (patch)
tree6bf59543316a15399ae3cc001b7cdd0fc2c00d39 /apps/web/src/components/Sidebar/AddMemoryDialog.tsx
parentschema update (diff)
downloadsupermemory-bf99ee97f7c4d7580829d074816ebe0d32316d92.tar.xz
supermemory-bf99ee97f7c4d7580829d074816ebe0d32316d92.zip
ok
Diffstat (limited to 'apps/web/src/components/Sidebar/AddMemoryDialog.tsx')
-rw-r--r--apps/web/src/components/Sidebar/AddMemoryDialog.tsx100
1 files changed, 53 insertions, 47 deletions
diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index aa86966f..886507ff 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -10,13 +10,17 @@ import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Markdown } from "tiptap-markdown";
import { useEffect, useRef, useState } from "react";
-import { FilterCombobox } from "./FilterCombobox";
+import { FilterSpaces } from "./FilterCombobox";
+import { useMemory } from "@/contexts/MemoryContext";
export function AddMemoryPage() {
+ const { addMemory } = useMemory();
+
+ const [url, setUrl] = useState("");
const [selectedSpacesId, setSelectedSpacesId] = useState<number[]>([]);
return (
- <div className="md:w-[40vw]">
+ <form className="md:w-[40vw]">
<DialogHeader>
<DialogTitle>Add a web page to memory</DialogTitle>
<DialogDescription>
@@ -30,25 +34,41 @@ export function AddMemoryPage() {
type="url"
data-modal-autofocus
className="bg-rgray-4 mt-2 w-full"
+ value={url}
+ onChange={(e) => setUrl(e.target.value)}
/>
<DialogFooter>
- <FilterCombobox
+ <FilterSpaces
selectedSpaces={selectedSpacesId}
setSelectedSpaces={setSelectedSpacesId}
className="hover:bg-rgray-5 mr-auto bg-white/5"
name={"Spaces"}
/>
- <DialogClose
- type={undefined}
+ <button
+ type={"submit"}
+ onClick={async () => {
+ // @Dhravya this is adding a memory with insufficient information fix pls
+ await addMemory(
+ {
+ title: url,
+ content: "",
+ type: "page",
+ url: url,
+ image: "/icons/logo_without_bg.png",
+ savedAt: new Date(),
+ },
+ selectedSpacesId,
+ );
+ }}
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"
>
Add
- </DialogClose>
+ </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">
Cancel
</DialogClose>
</DialogFooter>
- </div>
+ </form>
);
}
@@ -60,16 +80,15 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
const [content, setContent] = useState("");
const [loading, setLoading] = useState(false);
- function check() {
+ function check(): boolean {
const data = {
name: name.trim(),
content,
};
- console.log(name);
if (!data.name || data.name.length < 1) {
if (!inputRef.current) {
alert("Please enter a name for the note");
- return;
+ return false;
}
inputRef.current.value = "";
inputRef.current.placeholder = "Please enter a title for the note";
@@ -79,7 +98,9 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
inputRef.current!.dataset["error"] = "false";
}, 500);
inputRef.current.focus();
+ return false;
}
+ return true;
}
return (
@@ -87,7 +108,7 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
<Input
ref={inputRef}
data-error="false"
- className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
+ className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-500 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
placeholder="Title of the note"
data-modal-autofocus
value={name}
@@ -104,7 +125,7 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
/>
<DialogFooter>
- <FilterCombobox
+ <FilterSpaces
selectedSpaces={selectedSpacesId}
setSelectedSpaces={setSelectedSpacesId}
className="hover:bg-rgray-5 mr-auto bg-white/5"
@@ -112,7 +133,9 @@ export function NoteAddPage({ closeDialog }: { closeDialog: () => void }) {
/>
<button
onClick={() => {
- check();
+ if (check()) {
+ 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"
>
@@ -137,7 +160,7 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
const [content, setContent] = useState("");
const [loading, setLoading] = useState(false);
- function check() {
+ function check(): boolean {
const data = {
name: name.trim(),
content,
@@ -146,7 +169,7 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
if (!data.name || data.name.length < 1) {
if (!inputRef.current) {
alert("Please enter a name for the note");
- return;
+ return false;
}
inputRef.current.value = "";
inputRef.current.placeholder = "Please enter a title for the note";
@@ -156,49 +179,32 @@ export function SpaceAddPage({ closeDialog }: { closeDialog: () => void }) {
inputRef.current!.dataset["error"] = "false";
}, 500);
inputRef.current.focus();
+ return false;
}
+ return true;
}
return (
- <div>
+ <div className="md:w-[40vw]">
+ <DialogHeader>
+ <DialogTitle>Add a space</DialogTitle>
+ </DialogHeader>
+ <Label className="mt-5 block">Name</Label>
<Input
- ref={inputRef}
- data-error="false"
- className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 placeholder:transition placeholder:duration-200 focus-visible:ring-0 data-[error=true]:placeholder:text-red-400"
- placeholder="Title of the note"
+ placeholder="Enter the name of the space"
+ type="url"
data-modal-autofocus
- value={name}
- onChange={(e) => setName(e.target.value)}
- />
- <Editor
- disableLocalStorage
- defaultValue={""}
- onUpdate={(editor) => {
- if (!editor) return;
- setContent(editor.storage.markdown.getMarkdown());
- }}
- extensions={[Markdown]}
- className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
+ className="bg-rgray-4 mt-2 w-full"
/>
+ <Label className="mt-5 block">Memories</Label>
<DialogFooter>
- <FilterCombobox
- selectedSpaces={selectedSpacesId}
- setSelectedSpaces={setSelectedSpacesId}
- className="hover:bg-rgray-5 mr-auto bg-white/5"
- name={"Spaces"}
- />
- <button
- onClick={() => {
- check();
- }}
- 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"
- >
- Add
- </button>
<DialogClose
type={undefined}
- 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"
+ 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"
>
+ Add
+ </DialogClose>
+ <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">
Cancel
</DialogClose>
</DialogFooter>