From 163a55ce8f462f46ecd332b905914c5e4950c02e Mon Sep 17 00:00:00 2001 From: Dhravya Date: Sun, 30 Jun 2024 19:18:33 -0500 Subject: revalidate page --- apps/web/app/(dash)/memories/content.tsx | 221 ++++++++++++++++++++++++++++++ apps/web/app/(dash)/memories/page.tsx | 228 +------------------------------ apps/web/app/(dash)/menu.tsx | 3 +- apps/web/app/actions/doers.ts | 5 +- apps/web/app/layout.tsx | 1 + apps/web/migrations/cmd.sql | 1 + package.json | 1 + 7 files changed, 234 insertions(+), 226 deletions(-) create mode 100644 apps/web/app/(dash)/memories/content.tsx create mode 100644 apps/web/migrations/cmd.sql diff --git a/apps/web/app/(dash)/memories/content.tsx b/apps/web/app/(dash)/memories/content.tsx new file mode 100644 index 00000000..6b0b31b7 --- /dev/null +++ b/apps/web/app/(dash)/memories/content.tsx @@ -0,0 +1,221 @@ +"use client"; + +import { getAllUserMemoriesAndSpaces } from "@/app/actions/fetchers"; +import { Content, StoredSpace } from "@/server/db/schema"; +import { MemoriesIcon, NextIcon, SearchIcon, UrlIcon } from "@repo/ui/icons"; +import { NotebookIcon, PaperclipIcon } from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; +import React, { useEffect, useMemo, useState } from "react"; +import Masonry from "react-layout-masonry"; +import { getRawTweet } from "@repo/shared-types/utils"; +import { MyTweet } from "./render-tweet"; + +export function MemoriesPage({ + memoriesAndSpaces, +}: { + memoriesAndSpaces: { memories: Content[]; spaces: StoredSpace[] }; +}) { + const [filter, setFilter] = useState("All"); + + // Sort Both memories and spaces by their savedAt and createdAt dates respectfully. + // The output should be just one single list of items + // And it will look something like { item: "memory" | "space", date: Date, data: Content | StoredSpace } + const sortedItems = useMemo(() => { + // Merge the lists + const unifiedItems = [ + ...memoriesAndSpaces.memories.map((memory) => ({ + item: "memory", + date: new Date(memory.savedAt), // Assuming savedAt is a string date + data: memory, + })), + ...memoriesAndSpaces.spaces.map((space) => ({ + item: "space", + date: new Date(space.createdAt), // Assuming createdAt is a string date + data: space, + })), + ].map((item) => ({ + ...item, + date: Number(item.date), // Convert the date to a number + })); + + // Sort the merged list + return unifiedItems + .filter((item) => { + if (filter === "All") return true; + if (filter === "Spaces" && item.item === "space") { + console.log(item); + return true; + } + if (filter === "Pages") + return ( + item.item === "memory" && (item.data as Content).type === "page" + ); + if (filter === "Notes") + return ( + item.item === "memory" && (item.data as Content).type === "note" + ); + if (filter === "Tweet") + return ( + item.item === "memory" && (item.data as Content).type === "tweet" + ); + return false; + }) + .sort((a, b) => b.date - a.date); + }, [memoriesAndSpaces.memories, memoriesAndSpaces.spaces, filter]); + + return ( +
+

+ My Memories +

+ + + + + {sortedItems.map((item) => { + if (item.item === "memory") { + return ( + + ); + } + + if (item.item === "space") { + return ( + + ); + } + + return null; + })} + +
+ ); +} + +function TabComponent({ + title, + description, +}: { + title: string; + description: string; +}) { + // TODO: Display the space name and desription which is the number of elemenet in the space + return ( +
+
+ Spaces icon Space +
+
+
+
+ {title.slice(0, 2).toUpperCase()} +
+
+
+
{title}
+
{description}
+
+
+ Search icon +
+
+
+ ); +} + +function LinkComponent({ + type, + content, + title, + url, + image, + description, +}: { + type: string; + content: string; + title: string; + url: string; + image?: string; + description: string; +}) { + // TODO: DISPLAY THE ITEM BASED ON `type` being note or page + return ( + + {type === "page" ? ( + <> +
+ Page +
+
{title}
+
{url}
+ + ) : type === "note" ? ( + <> +
+ Note +
+
{title}
+
{content.replace(title, "")}
+ + ) : type === "tweet" ? ( + + ) : null} + + ); +} + +const FilterMethods = ["All", "Spaces", "Pages", "Notes", "Tweet"]; +function Filters({ + setFilter, + filter, +}: { + setFilter: (i: string) => void; + filter: string; +}) { + return ( +
+ {FilterMethods.map((i) => { + return ( + + ); + })} +
+ ); +} + +export default MemoriesPage; diff --git a/apps/web/app/(dash)/memories/page.tsx b/apps/web/app/(dash)/memories/page.tsx index fa074a0b..1856161f 100644 --- a/apps/web/app/(dash)/memories/page.tsx +++ b/apps/web/app/(dash)/memories/page.tsx @@ -1,227 +1,11 @@ -"use client"; - import { getAllUserMemoriesAndSpaces } from "@/app/actions/fetchers"; -import { Content, StoredSpace } from "@/server/db/schema"; -import { MemoriesIcon, NextIcon, SearchIcon, UrlIcon } from "@repo/ui/icons"; -import { NotebookIcon, PaperclipIcon } from "lucide-react"; -import Image from "next/image"; -import Link from "next/link"; -import React, { useEffect, useMemo, useState } from "react"; -import Masonry from "react-layout-masonry"; -import { getRawTweet } from "@repo/shared-types/utils"; -import { MyTweet } from "./render-tweet"; - -function Page() { - const [filter, setFilter] = useState("All"); - - const [memoriesAndSpaces, setMemoriesAndSpaces] = useState<{ - memories: Content[]; - spaces: StoredSpace[]; - }>({ memories: [], spaces: [] }); - - // Sort Both memories and spaces by their savedAt and createdAt dates respectfully. - // The output should be just one single list of items - // And it will look something like { item: "memory" | "space", date: Date, data: Content | StoredSpace } - const sortedItems = useMemo(() => { - // Merge the lists - const unifiedItems = [ - ...memoriesAndSpaces.memories.map((memory) => ({ - item: "memory", - date: new Date(memory.savedAt), // Assuming savedAt is a string date - data: memory, - })), - ...memoriesAndSpaces.spaces.map((space) => ({ - item: "space", - date: new Date(space.createdAt), // Assuming createdAt is a string date - data: space, - })), - ].map((item) => ({ - ...item, - date: Number(item.date), // Convert the date to a number - })); - - // Sort the merged list - return unifiedItems - .filter((item) => { - if (filter === "All") return true; - if (filter === "Spaces" && item.item === "space") { - console.log(item); - return true; - } - if (filter === "Pages") - return ( - item.item === "memory" && (item.data as Content).type === "page" - ); - if (filter === "Notes") - return ( - item.item === "memory" && (item.data as Content).type === "note" - ); - if (filter === "Tweet") - return ( - item.item === "memory" && (item.data as Content).type === "tweet" - ); - return false; - }) - .sort((a, b) => b.date - a.date); - }, [memoriesAndSpaces.memories, memoriesAndSpaces.spaces, filter]); - - useEffect(() => { - (async () => { - const { success, data } = await getAllUserMemoriesAndSpaces(); - if (!success ?? !data) return; - setMemoriesAndSpaces({ memories: data.memories, spaces: data.spaces }); - })(); - }, []); - - return ( -
-

- My Memories -

- - - - - {sortedItems.map((item) => { - if (item.item === "memory") { - return ( - - ); - } - - if (item.item === "space") { - return ( - - ); - } - - return null; - })} - -
- ); -} - -function TabComponent({ - title, - description, -}: { - title: string; - description: string; -}) { - // TODO: Display the space name and desription which is the number of elemenet in the space - return ( -
-
- Spaces icon Space -
-
-
-
- {title.slice(0, 2).toUpperCase()} -
-
-
-
{title}
-
{description}
-
-
- Search icon -
-
-
- ); -} - -function LinkComponent({ - type, - content, - title, - url, - image, - description, -}: { - type: string; - content: string; - title: string; - url: string; - image?: string; - description: string; -}) { - // TODO: DISPLAY THE ITEM BASED ON `type` being note or page - return ( - - {type === "page" ? ( - <> -
- Page -
-
{title}
-
{url}
- - ) : type === "note" ? ( - <> -
- Note -
-
{title}
-
{content.replace(title, "")}
- - ) : type === "tweet" ? ( - - ) : null} - - ); -} +import { redirect } from "next/navigation"; +import MemoriesPage from "./content"; -const FilterMethods = ["All", "Spaces", "Pages", "Notes", "Tweet"]; -function Filters({ - setFilter, - filter, -}: { - setFilter: (i: string) => void; - filter: string; -}) { - return ( -
- {FilterMethods.map((i) => { - return ( - - ); - })} -
- ); +async function Page() { + const { success, data } = await getAllUserMemoriesAndSpaces(); + if (!success ?? !data) return redirect("/home"); + return ; } export default Page; diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx index cc45016e..90e114de 100644 --- a/apps/web/app/(dash)/menu.tsx +++ b/apps/web/app/(dash)/menu.tsx @@ -38,6 +38,7 @@ import { createMemory, createSpace } from "../actions/doers"; import { Input } from "@repo/ui/shadcn/input"; import ComboboxWithCreate from "@repo/ui/shadcn/combobox"; import { StoredSpace } from "@/server/db/schema"; +import { revalidatePath } from "next/cache"; function Menu() { const [spaces, setSpaces] = useState([]); @@ -205,7 +206,7 @@ function Menu() { value={content} onChange={(e) => setContent(e.target.value)} onKeyDown={(e) => { - if (e.key === "Enter") { + if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSubmit(content); } diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts index 84d43924..8acc5679 100644 --- a/apps/web/app/actions/doers.ts +++ b/apps/web/app/actions/doers.ts @@ -245,6 +245,8 @@ export const createMemory = async (input: { noteId, }) .returning({ id: storedContent.id }); + revalidatePath("/memories"); + revalidatePath("/home"); contentId = insertResponse[0]?.id; } catch (e) { @@ -318,9 +320,6 @@ export const createMemory = async (input: { }; } - revalidatePath("/home"); - revalidatePath("/memories"); - return { success: true, data: 1, diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 9af77837..1527c8a0 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -7,6 +7,7 @@ import { GeistMono } from "geist/font/mono"; import { cn } from "@repo/ui/lib/utils"; import BackgroundPlus from "./(landing)/GridPatterns/PlusGrid"; import { Toaster } from "@repo/ui/shadcn/toaster"; + const inter = Inter({ subsets: ["latin"] }); export const runtime = "edge"; diff --git a/apps/web/migrations/cmd.sql b/apps/web/migrations/cmd.sql new file mode 100644 index 00000000..0af8ba38 --- /dev/null +++ b/apps/web/migrations/cmd.sql @@ -0,0 +1 @@ +ALTER TABLE `space` ADD COLUMN `numItems` integer NOT NULL DEFAULT 0; \ No newline at end of file diff --git a/package.json b/package.json index 8d1e73af..e4e5cc86 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "react-markdown": "^9.0.1", "react-responsive-masonry": "^2.2.1", "react-tweet": "^3.2.1", + "react-web-share": "^2.0.2", "rehype-highlight": "^7.0.0", "rehype-katex": "^7.0.0", "remark-gfm": "^4.0.0", -- cgit v1.2.3