release 0.3.4
This commit is contained in:
songjunxi
506
apps/web/app/post/[id]/editor.tsx
Normal file
506
apps/web/app/post/[id]/editor.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
} from "react";
|
||||
import { Editor as InkeEditor } from "inkejs";
|
||||
import { JSONContent } from "@tiptap/react";
|
||||
import useLocalStorage from "@/lib/hooks/use-local-storage";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import { Content_Storage_Key, Default_Debounce_Duration } from "@/lib/consts";
|
||||
import { ContentItem } from "@/lib/types/note";
|
||||
import {
|
||||
exportAsJson,
|
||||
exportAsMarkdownFile,
|
||||
fetcher,
|
||||
fomatTmpDate,
|
||||
timeAgo,
|
||||
} from "@/lib/utils";
|
||||
import Menu from "@/ui/menu";
|
||||
import UINotFound from "@/ui/layout/not-found";
|
||||
import { toPng } from "html-to-image";
|
||||
import { usePDF } from "react-to-pdf";
|
||||
import { Session } from "next-auth";
|
||||
import { IResponse } from "@/lib/types/response";
|
||||
import { ShareNote } from "@prisma/client";
|
||||
import { LoadingCircle, LoadingDots } from "@/ui/shared/icons";
|
||||
import { BadgeInfo, ExternalLink, Shapes, Clipboard } from "lucide-react";
|
||||
import toast, { Toaster } from "react-hot-toast";
|
||||
import {
|
||||
useCollaborationByLocalId,
|
||||
useCollaborationRoomId,
|
||||
useUserInfoByEmail,
|
||||
useUserShareNotes,
|
||||
} from "./request";
|
||||
import Link from "next/link";
|
||||
import Tooltip from "@/ui/shared/tooltip";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import db, { noteTable, updateNote } from "@/store/db.model";
|
||||
|
||||
export default function Editor({
|
||||
id,
|
||||
session,
|
||||
contents,
|
||||
setShowRoomModal,
|
||||
}: {
|
||||
id?: string;
|
||||
session: Session | null;
|
||||
contents: ContentItem[];
|
||||
setShowRoomModal: Dispatch<SetStateAction<boolean>>;
|
||||
}) {
|
||||
const params = useSearchParams();
|
||||
const [collaboration, setCollaboration] = useState(false);
|
||||
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [debounceDuration, setDebounceDuration] = useState(
|
||||
Default_Debounce_Duration,
|
||||
);
|
||||
const [saveStatus, setSaveStatus] = useState("Saved");
|
||||
const [isLoading, setLoading] = useState(true);
|
||||
const [isSharing, setSharing] = useState(false);
|
||||
const [isShowShareLink, setShowShareLink] = useState(false);
|
||||
const [currentRoomId, setCurrentRoomId] = useState("");
|
||||
|
||||
const [currentIndex, setCurrentIndex] = useState(-1);
|
||||
const [currentContent, setCurrentContent] = useLocalStorage<JSONContent>(
|
||||
Content_Storage_Key,
|
||||
{},
|
||||
);
|
||||
const [currentPureContent, setPureContent] = useState("");
|
||||
|
||||
const { shares } = useUserShareNotes();
|
||||
const { user } = useUserInfoByEmail(session?.user.email);
|
||||
const { room, isLoading: isLoadingRoom } = useCollaborationRoomId(
|
||||
params.get("work"),
|
||||
);
|
||||
const { room: localRoom } = useCollaborationByLocalId(id);
|
||||
|
||||
const { toPDF, targetRef } = usePDF({ filename: "note.pdf" });
|
||||
|
||||
useEffect(() => {
|
||||
const roomId = params.get("work");
|
||||
if (roomId) {
|
||||
if (room && room.code === 200) {
|
||||
setCurrentRoomId(roomId);
|
||||
setCollaboration(true);
|
||||
}
|
||||
if (id && contents.length > 0) {
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
if (index !== -1 && contents[index]) {
|
||||
setCurrentContent({});
|
||||
setCurrentIndex(index);
|
||||
document.title = "Space | Inke";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (id && contents.length > 0) {
|
||||
setLoading(true);
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
|
||||
if (index !== -1 && contents[index]) {
|
||||
setCurrentContent(contents[index].content ?? {});
|
||||
setCurrentIndex(index);
|
||||
document.title = `${contents[index].title} | Inke`;
|
||||
}
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, [id, contents, room]);
|
||||
|
||||
const debouncedUpdates = useDebouncedCallback(
|
||||
async (value, text, markdown) => {
|
||||
handleUpdateItem(id, value);
|
||||
setPureContent(markdown);
|
||||
},
|
||||
debounceDuration,
|
||||
);
|
||||
|
||||
const handleUpdateItem = (id: string, updatedContent: JSONContent) => {
|
||||
if (currentIndex !== -1) {
|
||||
updateNote({
|
||||
...contents[currentIndex],
|
||||
content: updatedContent,
|
||||
updated_at: new Date().getTime(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportImage = useCallback(() => {
|
||||
if (ref.current === null || currentIndex === -1 || saveStatus !== "Saved") {
|
||||
return;
|
||||
}
|
||||
|
||||
toPng(ref.current, {
|
||||
cacheBust: true,
|
||||
width: ref.current.scrollWidth,
|
||||
height: ref.current.scrollHeight,
|
||||
})
|
||||
.then((dataUrl) => {
|
||||
const link = document.createElement("a");
|
||||
link.download = contents[currentIndex].title + ".png";
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}, [ref, currentIndex, contents]);
|
||||
|
||||
const handleExportJson = () => {
|
||||
if (!contents || currentIndex === -1 || saveStatus !== "Saved") return;
|
||||
exportAsJson(contents[currentIndex], contents[currentIndex].title);
|
||||
};
|
||||
|
||||
const handleExportMarkdown = () => {
|
||||
if (
|
||||
currentPureContent.length === 0 ||
|
||||
currentIndex === -1 ||
|
||||
saveStatus !== "Saved"
|
||||
)
|
||||
return;
|
||||
|
||||
exportAsMarkdownFile(currentPureContent, contents[currentIndex].title);
|
||||
};
|
||||
|
||||
const handleExportPDF = () => {
|
||||
toPDF();
|
||||
};
|
||||
|
||||
const handleCreateShare = async () => {
|
||||
if (saveStatus !== "Saved") return;
|
||||
setSharing(true);
|
||||
const res = await fetcher<IResponse<ShareNote | null>>("/api/share", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
data: contents[currentIndex],
|
||||
}),
|
||||
});
|
||||
if (res.code !== 200) {
|
||||
toast(res.msg, {
|
||||
icon: "😅",
|
||||
});
|
||||
} else {
|
||||
toast.success(res.msg, {
|
||||
icon: "🎉",
|
||||
});
|
||||
if (!isShowShareLink) setShowShareLink(true);
|
||||
}
|
||||
setSharing(false);
|
||||
};
|
||||
|
||||
const handleCreateCollaboration = async () => {
|
||||
// 用户当前本地笔记是否已加入协作
|
||||
if (localRoom && localRoom.code === 200) return;
|
||||
|
||||
if (!currentRoomId) {
|
||||
setShowRoomModal(true);
|
||||
} else if (currentRoomId && !collaboration) {
|
||||
// url有roomid但是没有加入
|
||||
console.log("url有roomid但是没有加入", room);
|
||||
} else if (currentRoomId && collaboration) {
|
||||
// url有roomid且已经加入
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || (params.get("work") && isLoadingRoom))
|
||||
return (
|
||||
<div className="m-6">
|
||||
<LoadingCircle className="h-6 w-6" />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (params.get("work") && room.code !== 200)
|
||||
return (
|
||||
<>
|
||||
<div className="relative mx-auto h-screen w-full overflow-auto px-12 pt-12">
|
||||
<Shapes className="mx-auto h-12 w-12 text-purple-400 hover:text-slate-500" />
|
||||
<h1 className="my-4 text-center text-2xl font-semibold">
|
||||
Wrong collaboration space
|
||||
</h1>
|
||||
<p>
|
||||
You are accessing a multiplayer collaboration space, but there seems
|
||||
to be an unexpected issue:{" "}
|
||||
<span className="font-bold text-slate-800">{room.msg}</span>. Please
|
||||
check your space id (<strong>{params.get("work")}</strong>) and try
|
||||
it again.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<div className="relative flex h-screen w-full justify-center overflow-auto">
|
||||
<div className="bg-white/50 absolute z-10 mb-5 flex w-full items-center justify-end gap-2 px-3 py-2 backdrop-blur-xl">
|
||||
<span className="hidden text-xs text-slate-400 md:block">
|
||||
Created at{" "}
|
||||
{currentIndex !== -1 &&
|
||||
fomatTmpDate(contents[currentIndex]?.created_at || 0)}
|
||||
</span>
|
||||
|
||||
<div className="mr-auto flex items-center justify-center gap-2 rounded-lg bg-stone-100 px-2 py-1 text-sm ">
|
||||
<i
|
||||
style={{
|
||||
width: "9px",
|
||||
height: "9px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor:
|
||||
saveStatus === "Saved"
|
||||
? "#00d2ee"
|
||||
: saveStatus === "Saving..."
|
||||
? "#ff6b2c"
|
||||
: "#919191",
|
||||
display: "block",
|
||||
transition: "all 0.5s",
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-slate-400 transition-all">
|
||||
{saveStatus}{" "}
|
||||
{saveStatus === "Saved" &&
|
||||
currentIndex !== -1 &&
|
||||
timeAgo(contents[currentIndex]?.updated_at || 0)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="w-72 px-3 py-2 text-sm text-slate-400">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-semibold text-slate-500">
|
||||
Collaborative Space
|
||||
</h1>
|
||||
|
||||
{collaboration && room && room.data && (
|
||||
<Clipboard
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`https://inke.app/invite/${room.data.id}`,
|
||||
);
|
||||
toast("Copied to clipboard");
|
||||
}}
|
||||
className="h-4 w-4 cursor-pointer text-cyan-500 hover:text-slate-300 active:text-green-500 "
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{collaboration && room && room.data ? (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
This note has enabled multi person collaboration, Copy the{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
|
||||
href={`/invite/${room.data.id}`}
|
||||
target="_blank"
|
||||
>
|
||||
invite link
|
||||
</Link>{" "}
|
||||
to invite others to join the collaboration.
|
||||
</p>
|
||||
) : localRoom && localRoom.code === 200 ? (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
This local note is already associated with a collaboration
|
||||
space. Click the link below to jump to the collaboration:{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
|
||||
href={`/post/${id}?work=${localRoom.data.roomId}`}
|
||||
target="_blank"
|
||||
>
|
||||
space-{localRoom.data.roomId}
|
||||
</Link>
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
Now, Inke supports collaborative editing of docs by multiple
|
||||
team members. Start by creating collaborative space. Learn
|
||||
more about{" "}
|
||||
<Link
|
||||
className="text-cyan-600 after:content-['_↗'] hover:text-cyan-300"
|
||||
href={`/collaboration`}
|
||||
target="_blank"
|
||||
>
|
||||
collaboration space
|
||||
</Link>
|
||||
. <br />
|
||||
Note: You need to{" "}
|
||||
<strong className="text-slate-900">sign in first</strong> to
|
||||
try this feature.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
fullWidth={false}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{collaboration && room && room.data ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`https://inke.app/invite/${room.data.id}`,
|
||||
);
|
||||
toast("Copied to clipboard");
|
||||
}}
|
||||
className="hover:opacity-800 mr-2 text-sm text-cyan-500"
|
||||
>
|
||||
Invite
|
||||
</button>
|
||||
) : (
|
||||
<button className="mr-2" onClick={handleCreateCollaboration}>
|
||||
<Shapes className="h-5 w-5 text-cyan-500 hover:opacity-80" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{((shares &&
|
||||
shares.data &&
|
||||
shares.data.find((i) => i.localId === id)) ||
|
||||
isShowShareLink) && (
|
||||
<Link href={`/publish/${id}`} target="_blank">
|
||||
<ExternalLink className="h-5 w-5 text-cyan-500 hover:text-cyan-300" />
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="ml-1 flex h-7 w-20 items-center justify-center gap-1 rounded-md bg-cyan-500 px-4 py-1 text-sm text-white transition-all hover:opacity-80"
|
||||
onClick={handleCreateShare}
|
||||
disabled={isSharing || saveStatus !== "Saved"}
|
||||
>
|
||||
{isSharing ? (
|
||||
<LoadingDots color="#fff" />
|
||||
) : (
|
||||
<span className="bg-gradient-to-r from-red-200 via-yellow-300 to-orange-200 bg-clip-text font-semibold text-transparent">
|
||||
Publish
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="w-64 px-3 py-2 text-sm text-slate-400">
|
||||
<h1 className="mb-2 font-semibold text-slate-500">
|
||||
Publish and Share
|
||||
</h1>
|
||||
<p>
|
||||
Click the <code>`Publish`</code> button to save your note
|
||||
remotely and generate a sharing link, allowing you to share
|
||||
your notes with others. Your notes will be uploaded after
|
||||
serialization. e.g{" "}
|
||||
<a
|
||||
className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
|
||||
href="https://inke.app/publish/0e1be533-ae66-4ffa-9725-bd6b84899e78"
|
||||
target="_blank"
|
||||
>
|
||||
link
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
You need to <strong>sign in</strong> first to try this
|
||||
feature.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
fullWidth={false}
|
||||
>
|
||||
<button className="hidden sm:block">
|
||||
<BadgeInfo className="h-4 w-4 text-slate-400 hover:text-slate-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
onExportImage={handleExportImage}
|
||||
onExportJson={handleExportJson}
|
||||
onExportTxT={handleExportMarkdown}
|
||||
onExportPDF={handleExportPDF}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{id &&
|
||||
currentIndex === -1 &&
|
||||
!isLoading &&
|
||||
(collaboration && room && room.data ? (
|
||||
<div className="relative mx-auto mt-10 h-screen w-full overflow-auto px-12 pt-12">
|
||||
<Shapes className="mx-auto h-12 w-12 text-cyan-500" />
|
||||
<h1 className="my-4 text-center text-2xl font-semibold">
|
||||
Sync collaboration space
|
||||
</h1>
|
||||
<p className="mt-2 hyphens-manual">
|
||||
It seems that you have joined this collaboration space (
|
||||
{room.data.title}), but this device has not been created. Copy
|
||||
this{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
|
||||
href={`/invite/${room.data.id}`}
|
||||
target="_blank"
|
||||
>
|
||||
invite link
|
||||
</Link>{" "}
|
||||
and recreate a local record to enter.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<UINotFound />
|
||||
))}
|
||||
|
||||
{contents && currentIndex !== -1 && (
|
||||
<div ref={ref} className="w-full max-w-screen-lg overflow-auto">
|
||||
<div ref={targetRef}>
|
||||
{params.get("work") ? (
|
||||
<InkeEditor
|
||||
className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
|
||||
storageKey={Content_Storage_Key}
|
||||
debounceDuration={debounceDuration}
|
||||
defaultValue={currentContent}
|
||||
plan={user?.plan || "5"}
|
||||
bot={true}
|
||||
id={params.get("work")}
|
||||
collaboration={true}
|
||||
userName={user?.name || "unknown"}
|
||||
onUpdate={() => setSaveStatus("Unsaved")}
|
||||
onDebouncedUpdate={(
|
||||
json: JSONContent,
|
||||
text: string,
|
||||
markdown: string,
|
||||
) => {
|
||||
setSaveStatus("Saving...");
|
||||
if (json) debouncedUpdates(json, text, markdown);
|
||||
setTimeout(() => {
|
||||
setSaveStatus("Saved");
|
||||
}, 500);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<InkeEditor
|
||||
className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
|
||||
storageKey={Content_Storage_Key}
|
||||
debounceDuration={debounceDuration}
|
||||
defaultValue={currentContent}
|
||||
plan={user?.plan || "5"}
|
||||
bot={true}
|
||||
onUpdate={() => setSaveStatus("Unsaved")}
|
||||
onDebouncedUpdate={(
|
||||
json: JSONContent,
|
||||
text: string,
|
||||
markdown: string,
|
||||
) => {
|
||||
setSaveStatus("Saving...");
|
||||
if (json) debouncedUpdates(json, text, markdown);
|
||||
setTimeout(() => {
|
||||
setSaveStatus("Saved");
|
||||
}, 500);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
29
apps/web/app/post/[id]/layout.tsx
Normal file
29
apps/web/app/post/[id]/layout.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import Providers from "@/app/providers";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import "@/styles/globals.css";
|
||||
|
||||
import { Metadata } from "next";
|
||||
import { ReactNode } from "react";
|
||||
// import Providers from "./providers";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: siteConfig.name,
|
||||
description: siteConfig.description,
|
||||
keywords: siteConfig.keywords,
|
||||
authors: siteConfig.authors,
|
||||
creator: siteConfig.creator,
|
||||
themeColor: siteConfig.themeColor,
|
||||
icons: siteConfig.icons,
|
||||
metadataBase: siteConfig.metadataBase,
|
||||
openGraph: siteConfig.openGraph,
|
||||
twitter: siteConfig.twitter,
|
||||
manifest: siteConfig.manifest,
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Providers>{children}</Providers>
|
||||
</>
|
||||
);
|
||||
}
|
||||
13
apps/web/app/post/[id]/page.tsx
Normal file
13
apps/web/app/post/[id]/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
|
||||
import EditorWrapper from "./wrapper";
|
||||
|
||||
// export async function generateMetadata({ params, searchParams }): Metadata {
|
||||
// const data = await getDetail(params.slug);
|
||||
// return { title: data.title };
|
||||
// }
|
||||
|
||||
export default async function Page({ params }: { params: { id: string } }) {
|
||||
const session = await getServerSession(authOptions);
|
||||
return <EditorWrapper id={params.id} session={session} />;
|
||||
}
|
||||
182
apps/web/app/post/[id]/request.ts
Normal file
182
apps/web/app/post/[id]/request.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import { fetcher } from "@/lib/utils";
|
||||
import useSWR from "swr";
|
||||
import { User } from "@/lib/types/user";
|
||||
import { Collaboration, ShareNote } from "@prisma/client";
|
||||
import { IResponse } from "@/lib/types/response";
|
||||
|
||||
export function useUserInfoByEmail(email: string) {
|
||||
let api = `/api/users?email=${email}`;
|
||||
const { data, error, isLoading } = useSWR<User>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
user: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
|
||||
export function useUserInfoById(id: string) {
|
||||
let api = `/api/users?id=${id}`;
|
||||
const { data, error, isLoading } = useSWR<User>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
user: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
|
||||
export function useUserShareNotes() {
|
||||
let api = `/api/share/all`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<ShareNote[]>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
shares: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
|
||||
export function useShareNoteByLocalId(id: string) {
|
||||
const api = `/api/share?id=${id}`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<ShareNote>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
share: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
|
||||
export function useCollaborationRoomId(id: string) {
|
||||
const api = `/api/collaboration/room?roomId=${id}`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
room: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
export function useCollaborationById(id: string) {
|
||||
const api = `/api/collaboration/id?id=${id}`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
room: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
export function useCollaborationByLocalId(id: string) {
|
||||
const api = `/api/collaboration/local-id?localId=${id}`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
room: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
export function useCollaborationInviteCount(roomId: string) {
|
||||
const api = `/api/collaboration/count?id=${roomId}`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<number>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
count: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
export function useCollaborationByUserId() {
|
||||
const api = `/api/collaboration`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<Collaboration[]>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "GET",
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
rooms: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
// 查询第一个空间创建者
|
||||
export function useCollaborationByRoomId(roomId: string) {
|
||||
const api = `/api/collaboration/room`;
|
||||
const { data, error, isLoading } = useSWR<IResponse<Collaboration>>(
|
||||
api,
|
||||
() =>
|
||||
fetcher(api, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ roomId }),
|
||||
}),
|
||||
{ revalidateOnFocus: false },
|
||||
);
|
||||
|
||||
return {
|
||||
room_creator: data,
|
||||
isLoading,
|
||||
isError: error,
|
||||
};
|
||||
}
|
||||
655
apps/web/app/post/[id]/sider.tsx
Normal file
655
apps/web/app/post/[id]/sider.tsx
Normal file
@@ -0,0 +1,655 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
Suspense,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
import { ContentItem } from "@/lib/types/note";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import NewPostButton from "@/ui/new-post-button";
|
||||
import UserDropdown from "@/ui/layout/user-dropdown";
|
||||
import { Session } from "next-auth";
|
||||
import { useCollaborationByUserId, useUserShareNotes } from "./request";
|
||||
import Link from "next/link";
|
||||
import { exportAsJson, fetcher } from "@/lib/utils";
|
||||
import { Collaboration, ShareNote } from "@prisma/client";
|
||||
import SearchInput from "@/ui/search-input";
|
||||
import {
|
||||
Check,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Download,
|
||||
DownloadCloud,
|
||||
Edit,
|
||||
ExternalLink,
|
||||
Minus,
|
||||
Plus,
|
||||
Trash2,
|
||||
Shapes,
|
||||
FolderClosed,
|
||||
FolderOpen,
|
||||
FolderEdit,
|
||||
} from "lucide-react";
|
||||
import Tooltip from "@/ui/shared/tooltip";
|
||||
import useWindowSize from "@/lib/hooks/use-window-size";
|
||||
import toast from "react-hot-toast";
|
||||
import { addNote, deleteNote, patchNote, updateNote } from "@/store/db.model";
|
||||
import useLocalStorage from "@/lib/hooks/use-local-storage";
|
||||
import { Note_Storage_Key } from "@/lib/consts";
|
||||
|
||||
export default function Sidebar({
|
||||
id,
|
||||
session,
|
||||
contents,
|
||||
setShowSignInModal,
|
||||
setShowEditModal,
|
||||
setShowRoomModal,
|
||||
}: {
|
||||
id?: string;
|
||||
session: Session | null;
|
||||
contents: ContentItem[];
|
||||
setShowSignInModal: Dispatch<SetStateAction<boolean>>;
|
||||
setShowEditModal: Dispatch<SetStateAction<boolean>>;
|
||||
setShowRoomModal: Dispatch<SetStateAction<boolean>>;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const { isMobile } = useWindowSize();
|
||||
|
||||
const [active, setActive] = useState(false);
|
||||
const [showEditInput, setShowEditInput] = useState(false);
|
||||
const [showEditCate, setShowEditCate] = useState(false);
|
||||
const [searchKey, setSearchKey] = useState("");
|
||||
|
||||
const controls = useAnimation();
|
||||
const controlText = useAnimation();
|
||||
const controlTitleText = useAnimation();
|
||||
|
||||
const [contentsCache, setContentsCache] = useState<ContentItem[]>([]);
|
||||
const [categorizedData, setCategorizedData] = useState<{
|
||||
[key: string]: ContentItem[];
|
||||
}>();
|
||||
|
||||
const { shares, isLoading } = useUserShareNotes();
|
||||
const [sharesCache, setSharesCache] = useState<ShareNote[]>([]);
|
||||
|
||||
const { rooms } = useCollaborationByUserId();
|
||||
const [roomsCache, setRoomsCache] = useState<Collaboration[]>([]);
|
||||
|
||||
const [openHistory, setOpenHistory] = useState(true);
|
||||
const [openShares, setOpenShares] = useState(false);
|
||||
const [openRooms, setOpenRooms] = useState(false);
|
||||
|
||||
const editCateRef = useRef<HTMLInputElement>(null);
|
||||
const editTitleRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [oldContents, setOldContents] = useLocalStorage<ContentItem[]>(
|
||||
Note_Storage_Key,
|
||||
[],
|
||||
);
|
||||
|
||||
const showMore = () => {
|
||||
controls.start({
|
||||
width: "270px",
|
||||
transition: { duration: 0.001 },
|
||||
});
|
||||
controlText.start({
|
||||
opacity: 1,
|
||||
display: "block",
|
||||
transition: { delay: 0.3 },
|
||||
});
|
||||
controlTitleText.start({
|
||||
opacity: 1,
|
||||
transition: { delay: 0.3 },
|
||||
});
|
||||
|
||||
setActive(true);
|
||||
};
|
||||
|
||||
const showLess = () => {
|
||||
controls.start({
|
||||
width: "0px",
|
||||
transition: { duration: 0.001 },
|
||||
});
|
||||
|
||||
controlText.start({
|
||||
opacity: 0,
|
||||
display: "none",
|
||||
});
|
||||
|
||||
controlTitleText.start({
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
setActive(false);
|
||||
};
|
||||
|
||||
// patch
|
||||
useEffect(() => {
|
||||
if (oldContents.length > 0) {
|
||||
patchNote(oldContents);
|
||||
setOldContents([]);
|
||||
}
|
||||
}, [oldContents]);
|
||||
|
||||
useEffect(() => {
|
||||
showMore();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
showLess();
|
||||
}
|
||||
}, [isMobile]);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchKey === "") {
|
||||
setContentsCache(contents);
|
||||
setSharesCache(shares?.data || []);
|
||||
setCategorizedData(() => {
|
||||
return (
|
||||
contents
|
||||
// .sort((a, b) => b.updated_at - a.updated_at)
|
||||
.reduce((acc, item) => {
|
||||
const tag = item.tag || ""; // If tag is undefined, default it to an empty string
|
||||
if (!acc[tag]) {
|
||||
acc[tag] = [];
|
||||
}
|
||||
acc[tag].push(item);
|
||||
return acc;
|
||||
}, {} as { [key: string]: ContentItem[] })
|
||||
);
|
||||
});
|
||||
}
|
||||
}, [searchKey, contents, shares]);
|
||||
|
||||
useEffect(() => {
|
||||
if (shares && shares.data) {
|
||||
setSharesCache(shares.data);
|
||||
}
|
||||
}, [shares]);
|
||||
|
||||
useEffect(() => {
|
||||
if (rooms && rooms.data) {
|
||||
setRoomsCache(rooms.data);
|
||||
}
|
||||
}, [rooms]);
|
||||
|
||||
const handleDeleteItem = (_id: string) => {
|
||||
deleteNote(_id);
|
||||
};
|
||||
const handleDeletePublicItem = async (_id: string) => {
|
||||
const res = await fetcher(`/api/share?id=${_id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
const updatedList = shares.data.filter((item) => item.id !== _id);
|
||||
setSharesCache(updatedList);
|
||||
};
|
||||
|
||||
const handleEditTitle = (itemId: string) => {
|
||||
if (showEditInput && id === itemId) {
|
||||
setShowEditInput(false);
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
if (index !== -1) {
|
||||
updateNote({
|
||||
...contents[index],
|
||||
title: editTitleRef.current.value,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setShowEditInput(true);
|
||||
}
|
||||
};
|
||||
const handleEditCate = (itemId: string) => {
|
||||
if (showEditCate && id === itemId) {
|
||||
setShowEditCate(false);
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
if (index !== -1) {
|
||||
updateNote({
|
||||
...contents[index],
|
||||
tag: editCateRef.current.value,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setShowEditCate(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportJson = () => {
|
||||
if (!contents) return;
|
||||
exportAsJson(contents, "Inke-notes-local");
|
||||
};
|
||||
|
||||
const handleInputSearch = (value: string) => {
|
||||
if (value.length > 0) {
|
||||
setSearchKey(value);
|
||||
const local_res = contents.filter((item) => {
|
||||
if (
|
||||
item.title.includes(value) ||
|
||||
JSON.stringify(item.content).includes(value) ||
|
||||
(item.tag && item.tag.includes(value))
|
||||
) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
setContentsCache(local_res);
|
||||
setCategorizedData(() => {
|
||||
return (
|
||||
local_res
|
||||
// .sort((a, b) => b.updated_at - a.updated_at)
|
||||
.reduce((acc, item) => {
|
||||
const tag = item.tag || ""; // If tag is undefined, default it to an empty string
|
||||
if (!acc[tag]) {
|
||||
acc[tag] = [];
|
||||
}
|
||||
acc[tag].push(item);
|
||||
return acc;
|
||||
}, {} as { [key: string]: ContentItem[] })
|
||||
);
|
||||
});
|
||||
|
||||
if (shares && shares.data) {
|
||||
const publish_res = shares.data.filter((item) => {
|
||||
if (item.data.includes(value)) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
setSharesCache(publish_res);
|
||||
}
|
||||
} else {
|
||||
setSearchKey("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickPublishNote = (publishId: string, localId: string) => {
|
||||
const localIndex = contentsCache.findIndex((i) => i.id === localId);
|
||||
if (localIndex !== -1) {
|
||||
router.push(`/post/${localId}`);
|
||||
} else {
|
||||
router.push(`/publish/${localId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncPublisToLocal = (localId: string, remoteDate: string) => {
|
||||
const data = JSON.parse(remoteDate || "{}");
|
||||
if (remoteDate && data) {
|
||||
addNote(data);
|
||||
router.push(`/post/${data.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuitSpace = async (id: string, roomId: string) => {
|
||||
const res = await fetcher(`/api/collaboration?id=${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res && res.code === 200) {
|
||||
toast("Exit space");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateSpace = () => {
|
||||
setShowRoomModal(true);
|
||||
};
|
||||
|
||||
const handleToggleCollapse = (tag: string) => {
|
||||
setCategorizedData((prevData) => {
|
||||
const updatedData = { ...prevData };
|
||||
updatedData[tag].forEach((item) => {
|
||||
item.collapsed = !item.collapsed;
|
||||
});
|
||||
return updatedData;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
animate={controls}
|
||||
className={
|
||||
`${active ? "border-r" : ""}` +
|
||||
" animate group flex h-screen w-[270px] flex-col gap-3 overflow-y-auto border-slate-200/60 py-6 duration-300"
|
||||
}
|
||||
>
|
||||
{active && (
|
||||
<button
|
||||
onClick={showLess}
|
||||
className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200 "
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 text-slate-400" />
|
||||
</button>
|
||||
)}
|
||||
{!active && (
|
||||
<button
|
||||
onClick={showMore}
|
||||
className="absolute -right-4 top-28 z-[10] cursor-pointer rounded-r bg-slate-100 py-2 shadow transition-all hover:bg-slate-200"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4 text-slate-400" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="mx-3 flex flex-col gap-2">
|
||||
<SearchInput onChange={handleInputSearch} />
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<NewPostButton
|
||||
isShowIcon={true}
|
||||
className="h-9 w-full shadow"
|
||||
text="Note"
|
||||
from="post"
|
||||
/>
|
||||
<button
|
||||
className="flex h-9 w-full items-center justify-center gap-1 rounded-md bg-cyan-500 px-3 text-center text-sm text-slate-100 shadow transition-all hover:opacity-80"
|
||||
onClick={handleCreateSpace}
|
||||
>
|
||||
<Shapes className="inline h-4 w-4 text-slate-50" /> Space
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-slate-200/70" />
|
||||
|
||||
<div className="h-[40%] w-full grow overflow-y-auto px-3">
|
||||
<div
|
||||
className="flex cursor-pointer items-center justify-between"
|
||||
onClick={() => {
|
||||
setOpenHistory(!openHistory);
|
||||
}}
|
||||
>
|
||||
<p className="font-mono text-sm font-semibold text-slate-400">
|
||||
History({contents.length})
|
||||
</p>
|
||||
<button className="rounded bg-slate-100 hover:bg-slate-200">
|
||||
{openHistory ? (
|
||||
<Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
) : (
|
||||
<Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{openHistory &&
|
||||
categorizedData &&
|
||||
Object.keys(categorizedData).map((tag) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
key={tag}
|
||||
>
|
||||
<h2
|
||||
className={
|
||||
`${
|
||||
categorizedData[tag].findIndex((i) => i.id === id) !== -1
|
||||
? "text-cyan-500"
|
||||
: "text-gray-500"
|
||||
}` +
|
||||
" flex cursor-pointer items-center justify-start gap-1 pt-2 font-mono text-xs font-semibold transition-all hover:text-slate-300"
|
||||
}
|
||||
onClick={() => handleToggleCollapse(tag)}
|
||||
>
|
||||
{categorizedData[tag][0].collapsed ? (
|
||||
<FolderOpen className="h-3 w-3 text-slate-400" />
|
||||
) : (
|
||||
<FolderClosed className="h-3 w-3 text-slate-400" />
|
||||
)}
|
||||
{tag || "Uncategorized"}
|
||||
</h2>
|
||||
{categorizedData[tag][0].collapsed &&
|
||||
categorizedData[tag].map((item) => (
|
||||
<div
|
||||
className="group/item my-2 mb-2 flex items-center justify-between gap-2 pl-4 transition-all"
|
||||
key={item.id}
|
||||
>
|
||||
{showEditInput && id === item.id ? (
|
||||
<input
|
||||
ref={editTitleRef}
|
||||
type="text"
|
||||
className="rounded border px-2 py-1 text-xs text-slate-500"
|
||||
defaultValue={item.title}
|
||||
placeholder="Enter note title"
|
||||
/>
|
||||
) : showEditCate && id === item.id ? (
|
||||
<input
|
||||
ref={editCateRef}
|
||||
type="text"
|
||||
className="rounded border px-2 py-1 text-xs text-slate-500"
|
||||
defaultValue={item.tag}
|
||||
placeholder="Enter note category"
|
||||
/>
|
||||
) : (
|
||||
<p
|
||||
className={
|
||||
"flex cursor-pointer items-center justify-start gap-2 truncate font-mono text-xs hover:opacity-80 " +
|
||||
`${
|
||||
id === item.id ? "text-cyan-500" : "text-gray-500"
|
||||
}`
|
||||
}
|
||||
onClick={() => router.push(`/post/${item.id}`)}
|
||||
>
|
||||
{item.title.length > 0 ? item.title : "Untitled"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="ml-auto hidden group-hover/item:block">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{id === item.id && (
|
||||
<button onClick={() => handleEditTitle(item.id)}>
|
||||
{showEditInput ? (
|
||||
<Check className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<Edit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{id === item.id && (
|
||||
<button onClick={() => handleEditCate(item.id)}>
|
||||
{showEditCate ? (
|
||||
<Check className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<FolderEdit className="h-4 w-4 text-slate-300 hover:text-slate-500" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{id !== item.id && (
|
||||
<button onClick={() => handleDeleteItem(item.id)}>
|
||||
<Trash2 className="h-4 w-4 text-slate-300" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sharesCache.length > 0 &&
|
||||
sharesCache.find((i) => i.localId === item.id) && (
|
||||
<Link href={`/publish/${item.id}`} target="_blank">
|
||||
<ExternalLink className="h-4 w-4 text-cyan-500" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{sharesCache.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
|
||||
onClick={() => {
|
||||
setOpenShares(!openShares);
|
||||
}}
|
||||
>
|
||||
<p className="font-mono text-sm font-semibold text-slate-400">
|
||||
Published({shares.data.length})
|
||||
</p>
|
||||
<button className="rounded bg-slate-100 hover:bg-slate-200">
|
||||
{openShares ? (
|
||||
<Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
) : (
|
||||
<Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{openShares &&
|
||||
sharesCache.map((item) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
key={item.id}
|
||||
className="group/item mt-2 flex items-center justify-between"
|
||||
>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleClickPublishNote(item.id, item.localId)
|
||||
}
|
||||
className={
|
||||
`${
|
||||
item.localId === id
|
||||
? "text-cyan-500"
|
||||
: "text-gray-500"
|
||||
}` + " truncate font-mono text-xs hover:opacity-80"
|
||||
}
|
||||
>
|
||||
{JSON.parse(item.data || "{}").title || "Untitled"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="ml-auto hidden group-hover/item:block"
|
||||
onClick={() => handleDeletePublicItem(item.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-slate-300" />
|
||||
</button>
|
||||
|
||||
{contentsCache.findIndex((i) => i.id === item.localId) ===
|
||||
-1 && (
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="w-64 px-3 py-2 text-sm text-slate-400">
|
||||
<h1 className="mb-2 font-semibold text-slate-500">
|
||||
Cross device sync note
|
||||
</h1>
|
||||
<p>
|
||||
Sync your notes from other devices to the current
|
||||
device (history list).
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
fullWidth={false}
|
||||
>
|
||||
<button
|
||||
className="ml-2"
|
||||
onClick={() =>
|
||||
handleSyncPublisToLocal(item.localId, item.data)
|
||||
}
|
||||
>
|
||||
<DownloadCloud className="h-4 w-4 text-slate-400" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{roomsCache.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="mt-3 flex cursor-pointer items-center justify-between border-t border-slate-200/50 pt-3"
|
||||
onClick={() => {
|
||||
setOpenRooms(!openRooms);
|
||||
}}
|
||||
>
|
||||
<p className="font-mono text-sm font-semibold text-slate-400">
|
||||
Collaborations({rooms.data.length})
|
||||
</p>
|
||||
<button className="rounded bg-slate-100 hover:bg-slate-200">
|
||||
{openRooms ? (
|
||||
<Minus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
) : (
|
||||
<Plus className="h-5 w-5 cursor-pointer p-1 text-slate-500" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{openRooms &&
|
||||
roomsCache.map((item) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
key={item.id}
|
||||
className="group/item mt-2 flex items-center justify-between"
|
||||
>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(`/post/${item.localId}?work=${item.roomId}`)
|
||||
}
|
||||
className={
|
||||
`${
|
||||
item.localId === id
|
||||
? "text-cyan-500"
|
||||
: "text-gray-500"
|
||||
}` + " truncate font-mono text-xs hover:opacity-80"
|
||||
}
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="ml-auto hidden group-hover/item:block"
|
||||
onClick={() => handleQuitSpace(item.id, item.roomId)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-slate-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-b border-slate-200/70" />
|
||||
|
||||
<Suspense>
|
||||
{session ? (
|
||||
<div className="-mb-2 text-center">
|
||||
<UserDropdown
|
||||
session={session}
|
||||
setShowEditModal={setShowEditModal}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="mx-3 mt-3 rounded-md border border-slate-800 bg-slate-800 px-3 py-2 text-sm font-semibold text-slate-100 transition-all hover:bg-slate-600"
|
||||
onClick={() => setShowSignInModal(true)}
|
||||
>
|
||||
Sign in for more
|
||||
</button>
|
||||
)}
|
||||
</Suspense>
|
||||
|
||||
<div className="-mb-1 flex items-center justify-center text-sm">
|
||||
<Link className="hover:text-slate-300" href="/">
|
||||
Home
|
||||
</Link>
|
||||
<span className="mx-2">‣</span>
|
||||
<Link
|
||||
className="hover:text-slate-300"
|
||||
href="/document"
|
||||
target="_blank"
|
||||
>
|
||||
Document
|
||||
</Link>
|
||||
<span className="mx-2">‣</span>
|
||||
<Link className="hover:text-slate-300" href="/pricing">
|
||||
Pricing
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
apps/web/app/post/[id]/wrapper.tsx
Normal file
56
apps/web/app/post/[id]/wrapper.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import Editor from "@/app/post/[id]/editor";
|
||||
import Sidebar from "@/app/post/[id]/sider";
|
||||
import { ContentItem } from "@/lib/types/note";
|
||||
import { noteTable } from "@/store/db.model";
|
||||
import { useCreatRoomModal } from "@/ui/layout/create-room-modal";
|
||||
import { useEditNicknameModal } from "@/ui/layout/edit-nickname-modal";
|
||||
import { useSignInModal } from "@/ui/layout/sign-in-modal";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { Session } from "next-auth";
|
||||
|
||||
export default function Wrapper({
|
||||
id,
|
||||
session,
|
||||
}: {
|
||||
id: string;
|
||||
session: Session | null;
|
||||
}) {
|
||||
const { EditModal, setShowEditModal } = useEditNicknameModal(session);
|
||||
const { SignInModal, setShowSignInModal } = useSignInModal();
|
||||
const { RoomModal, setShowRoomModal } = useCreatRoomModal(session, "", id);
|
||||
|
||||
const notes = useLiveQuery<ContentItem[]>(() =>
|
||||
noteTable.orderBy("updated_at").reverse().toArray(),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SignInModal />
|
||||
<EditModal />
|
||||
<RoomModal />
|
||||
|
||||
<div className="flex">
|
||||
{notes && (
|
||||
<>
|
||||
<Sidebar
|
||||
id={id}
|
||||
session={session}
|
||||
contents={notes}
|
||||
setShowEditModal={setShowEditModal}
|
||||
setShowSignInModal={setShowSignInModal}
|
||||
setShowRoomModal={setShowRoomModal}
|
||||
/>
|
||||
<Editor
|
||||
id={id}
|
||||
session={session}
|
||||
contents={notes}
|
||||
setShowRoomModal={setShowRoomModal}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user