Merge pull request #35 from RanitManik/dev

Safe

Author: RanitManik

actions/create-snippet.ts renamed to actions/create-snap.ts

@@ -1,4 +1,4 @@
-export const CreateSnippet = async (
+export const CreateSnap = async (
     values: { snapName: string; language: string; visibility: string },
     userId: string | undefined,
     code: string,

actions/get-snippet.ts renamed to actions/get-snap.ts

@@ -1,5 +1,5 @@
 import { db } from "@/lib/db";
 
-export const GetSnippet = (snapID: string) => {
+export const GetSnap = (snapID: string) => {
     return db.snap.findUnique({ where: { id: snapID } });
 };

actions/get-snippets.ts renamed to actions/get-snaps.ts

@@ -1,6 +1,6 @@
 import { db } from "@/lib/db";
 
-export const GetSnippets = (userID: string | undefined) => {
+export const GetSnaps = (userID: string | undefined) => {
     return db.snap.findMany({
         where: { authorId: userID },
     });

actions/index.ts

@@ -3,6 +3,6 @@ export { SignUp } from "./sign-up";
 export { SignOut } from "./sign-out";
 export { GoogleSignIn } from "./google-sign-in";
 export { ExecuteCode } from "./execute-code";
-export { CreateSnippet } from "./create-snippet";
-export { GetSnippets } from "./get-snippets";
-export { GetSnippet } from "./get-snippet";
+export { CreateSnap } from "./create-snap";
+export { GetSnaps } from "./get-snaps";
+export { GetSnap } from "./get-snap";

app/(auth)/layout.tsx

@@ -4,6 +4,6 @@ interface AuthLayout {
     children: ReactNode;
 }
 
-export default async function AuthLayout({ children }: AuthLayout) {
+export default async function layout({ children }: AuthLayout) {
     return <div className="m-auto max-w-[1920px]">{children}</div>;
 }

app/(dashboard)/_components/control-panel.tsx

@@ -11,7 +11,7 @@ import {
 import { Button } from "@nextui-org/button";
 import { useState, useMemo } from "react";
 
-import CreateSnap from "@/app/(dashboard)/_components/create-snap";
+import CreateSnapModal from "@/app/(dashboard)/_components/create-snap-modal";
 import useMediaQuery from "@/hooks/media-query";
 
 export default function ControlPanel() {
@@ -67,7 +67,7 @@ export default function ControlPanel() {
                         </DropdownItem>
                     </DropdownMenu>
                 </Dropdown>
-                <CreateSnap isMobile={isMobile} />
+                <CreateSnapModal isMobile={isMobile} />
             </div>
         </div>
     );

app/(dashboard)/_components/create-snap.tsx renamed to app/(dashboard)/_components/create-snap-modal.tsx

@@ -27,10 +27,10 @@ import NProgress from "nprogress";
 
 import { codeSnaps, languageOptions } from "@/config/languages";
 import { CustomRadio } from "@/components/custom-radio";
-import { CreateSnippet } from "@/actions";
+import { CreateSnap } from "@/actions";
 import { usePRouter } from "@/components/custom-router";
 
-export default function CreateSnap({ isMobile }: { isMobile: boolean }) {
+export default function CreateSnapModal({ isMobile }: { isMobile: boolean }) {
     const { isOpen, onOpen, onOpenChange } = useDisclosure();
     const { data: session } = useSession();
     const [isLoading, setIsLoading] = useState(false);
@@ -70,31 +70,34 @@ export default function CreateSnap({ isMobile }: { isMobile: boolean }) {
     }
 
     const onSubmit = async (values: z.infer<typeof FormSchema>) => {
-        try {
-            setIsLoading(true);
-            const userId = session?.user?.id;
-
-            const code = getCodeByLanguageName(values.language);
-
-            const response = await CreateSnippet(values, userId, code);
+        setIsLoading(true);
+        const userId = session?.user?.id;
 
-            if (response?.snap) {
-                toast.success("snap created");
+        const code = getCodeByLanguageName(values.language);
+        let response;
 
-                form.reset();
-                onOpenChange();
-
-                router.push(`/snap/${response.snap.id}`);
-            } else {
-                toast.error("Failed creating snap. Try again later.");
-            }
+        try {
+            response = await CreateSnap(values, userId, code);
         } catch (error) {
             toast.error(
                 "An unexpected error occurred. Please try again later.",
             );
+
+            return;
         } finally {
             setIsLoading(false);
         }
+
+        if (response?.snap) {
+            toast.success("snap created");
+
+            form.reset();
+            onOpenChange();
+
+            router.push(`/snap/${response.snap.id}`);
+        } else {
+            toast.error("Failed creating snap. Try again later.");
+        }
     };
 
     const handleModalClose = () => {

app/(dashboard)/layout.tsx

@@ -8,9 +8,7 @@ interface DashboardLayoutProps {
     children: ReactNode;
 }
 
-export default async function DashboardLayout({
-    children,
-}: DashboardLayoutProps) {
+export default async function layout({ children }: DashboardLayoutProps) {
     const session = await getServerSession(authOptions);
 
     if (!session) {

app/(dashboard)/page.tsx

@@ -6,12 +6,25 @@ import SnapInfoCard from "@/app/(dashboard)/_components/snap-info-card";
 import DashboardNavBar from "@/app/(dashboard)/_components/dashboard-nav-bar";
 import { CommandMenu } from "@/components/command-menu";
 import { authOptions } from "@/lib/auth";
-import { GetSnippets } from "@/actions";
+import { GetSnaps } from "@/actions";
 
 export default async function Page() {
     const session = await getServerSession(authOptions);
 
-    const SnapData = await GetSnippets(session?.user.id);
+    let snapData;
+
+    try {
+        snapData = await GetSnaps(session?.user.id);
+    } catch (error) {
+        // TODO: Make Page for the failed loading Snippets [No Internet / Server Error]
+        return <div>Unable to load snaps. Please try again later.</div>;
+    }
+
+    // If no snap is found
+    if (!snapData) {
+        // TODO: Make component for the failed loading Snippets
+        return <div>Unable to load snaps. Please try again later.</div>;
+    }
 
     return (
         <div className="space-y-6">
@@ -24,8 +37,8 @@ export default async function Page() {
                     <h1>Snaps</h1>
                 </div>
                 <div className="m-auto grid grid-cols-[repeat(auto-fill,minmax(330px,1fr))] gap-4 pb-8 lg:gap-6 xl:gap-8">
-                    {SnapData &&
-                        SnapData.map((snap, index) => (
+                    {snapData &&
+                        snapData.map((snap, index) => (
                             <SnapInfoCard
                                 key={index}
                                 createdAt={snap.createdAt.toISOString()}

app/(dashboard)/snap/[id]/_components/code-editor.tsx

@@ -2,10 +2,11 @@
 
 import { Editor } from "@monaco-editor/react";
 import { useTheme } from "next-themes";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { editor } from "monaco-editor";
 
 import CodeEditorSkeleton from "@/app/(dashboard)/snap/[id]/_components/code-editor-skeleton";
-import { useCodeStore } from "@/stores/code-store";
+import { useCodeStore } from "@/stores";
 
 export default function CodeEditor({
     initialCode,
@@ -17,15 +18,20 @@ export default function CodeEditor({
     version?: string;
 }) {
     const { theme } = useTheme();
-    const editorRef = useRef(null);
-    const { code, setCode, setLanguage, setOutput } = useCodeStore();
+    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+    const { code, setCode, setLanguage, setOutput, setEditorLoading } =
+        useCodeStore();
 
-    function handleEditorDidMount(editor: any) {
+    useEffect(() => {
+        setOutput([]);
+    }, []);
+
+    function handleEditorDidMount(editor: editor.IStandaloneCodeEditor) {
         editorRef.current = editor;
         editor.focus();
         setCode(initialCode || "");
         setLanguage({ name: language || "", version: version || "" });
-        setOutput([]);
+        setEditorLoading(false);
     }
 
     function handleOnchange(value: string | undefined) {