Add nextjs-scheduler example and bump up examples to v0.4.7 (#106)

* Bump up examples to v0.4.7 * Add nextjs-scheduler example * Prevent fileinfo being overwritten with null when selecting a file --------- Co-authored-by: blurfx <[email protected]>
yorkie-team · Oct 21, 2023 · a3110a2 · a3110a2
1 parent eab9f38
commit a3110a2
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 18 deletions.
diff --git a/examples/nextjs-scheduler/fileInfo.ts b/examples/nextjs-scheduler/fileInfo.ts
diff --git a/examples/profile-stack/fileInfo.ts b/examples/profile-stack/fileInfo.ts
diff --git a/examples/react-tldraw/fileInfo.ts b/examples/react-tldraw/fileInfo.ts
diff --git a/examples/react-todomvc/fileInfo.ts b/examples/react-todomvc/fileInfo.ts
diff --git a/examples/simultaneous-cursors/fileInfo.ts b/examples/simultaneous-cursors/fileInfo.ts
diff --git a/examples/vanilla-codemirror6/fileInfo.ts b/examples/vanilla-codemirror6/fileInfo.ts
diff --git a/examples/vanilla-quill/fileInfo.ts b/examples/vanilla-quill/fileInfo.ts
diff --git a/examples/vuejs-kanban/fileInfo.ts b/examples/vuejs-kanban/fileInfo.ts
diff --git a/pages/examples/calendar.tsx b/pages/examples/calendar.tsx
@@ -0,0 +1,69 @@
+import { NextPage } from 'next';
+import Head from 'next/head';
+import { ExampleLayout } from '@/components';
+import {
+  Sidebar,
+  BasicExampleView,
+  ProjectCodes,
+  COMMON_IGNORE_FILES,
+  EXAMPLE_CODE_URL,
+  EXAMPLE_PREVIEW_URL,
+} from '@/components/exampleView';
+import { FILE_INFO } from '@/examples/nextjs-scheduler/fileInfo';
+
+const exampleKey = 'nextjs-scheduler';
+const exampleTitle = 'Calendar';
+
+const CalendarExampleView: NextPage = () => {
+  return (
+    <ExampleLayout breadcrumbTitle={exampleTitle}>
+      {() => (
+        <>
+          <Head>
+            <title>{`${exampleTitle} · Yorkie Examples`}</title>
+          </Head>
+          <Sidebar wide>
+            <Sidebar.Tabs defaultTab="code">
+              <Sidebar.Top>
+                <Sidebar.TabsList>
+                  <Sidebar.TabsTab value="code">Code</Sidebar.TabsTab>
+                </Sidebar.TabsList>
+              </Sidebar.Top>
+              <Sidebar.TabsPanel value="code">
+                <Sidebar.GuideTitle>{exampleTitle}</Sidebar.GuideTitle>
+                <Sidebar.GuideDescription>
+                  This demo shows the real-time collaborative version of the{' '}
+                  <a href="https://quilljs.com/" className="link" target="_blank" rel="noreferrer">
+                    Quill
+                  </a>{' '}
+                  editor with{' '}
+                  <a href="https://yorkie.dev/" className="link" target="_blank" rel="noreferrer">
+                    Yorkie
+                  </a>{' '}
+                  and{' '}
+                  <a href="https://vitejs.dev/" className="link" target="_blank" rel="noreferrer">
+                    Vite
+                  </a>
+                  .
+                </Sidebar.GuideDescription>
+                <ProjectCodes
+                  files={FILE_INFO}
+                  activeFile="/app/page.tsx"
+                  ignoreFiles={[...COMMON_IGNORE_FILES, '.env', 'vite.config.js', '/src/vite-env.d.ts']}
+                />
+              </Sidebar.TabsPanel>
+              <Sidebar.Bottom codeURL={EXAMPLE_CODE_URL + exampleKey} />
+            </Sidebar.Tabs>
+          </Sidebar>
+          <BasicExampleView
+            rpcAddr={process.env.NEXT_PUBLIC_API_ADDR || ''}
+            apiKey={process.env.NEXT_PUBLIC_EXAMPLES_API_KEY || ''}
+            documentKey={exampleKey}
+            iframeURL={EXAMPLE_PREVIEW_URL + exampleKey}
+          />
+        </>
+      )}
+    </ExampleLayout>
+  );
+};
+export default CalendarExampleView;
diff --git a/pages/examples/index.tsx b/pages/examples/index.tsx
@@ -215,6 +215,19 @@ const Examples: NextPage = () => {
                 </div>
               </Link>
             </li>
+            <li className="grid_item">
+              <Link href="/examples/calendar" className="grid_card">
+                <div className="grid_thumbnail">
+                  <ExampleThumbnailImage fileName="nextjs-scheduler.jpg" alt="nextjs-scheudler" />
+                </div>
+                <div className="grid_card_info">
+                  <strong className="title">Calendar</strong>
+                  <p className="desc">
+                    This demo shows the real-time collaborative version of the Calendar with Yorkie and Next.js.
+                  </p>
+                </div>
+              </Link>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/public/assets/images/examples/nextjs-scheduler.jpg b/public/assets/images/examples/nextjs-scheduler.jpg
diff --git a/utils/exampleFileUtils.ts b/utils/exampleFileUtils.ts
@@ -90,18 +90,27 @@ export const setFirstFileOpen = (directoryInfo: DirectoryInfo): [DirectoryInfo,
   return [directoryInfoResult, openedFileInfo];
 };
 
-export const setFileOpen = (directoryInfo: DirectoryInfo, targetFile: string): [DirectoryInfo, FileInfo | null] => {
-  const cloneDirectoryInfo = cloneDeep(directoryInfo);
-  let _openedFileInfo: FileInfo | null = null;
-  cloneDirectoryInfo.children.forEach((child, i) => {
+export const setFileOpen = (directoryInfo: DirectoryInfo, targetFilePath: string): [DirectoryInfo, FileInfo | null] => {
+  const clonedDirectoryInfo = cloneDeep(directoryInfo);
+  const openedFileInfo = findOpenedFileInfo(clonedDirectoryInfo, targetFilePath);
+  return [clonedDirectoryInfo, openedFileInfo];
+};
+
+const findOpenedFileInfo = (directoryInfo: DirectoryInfo, targetFilePath: string): FileInfo | null => {
+  let opendFileInfo: FileInfo | null = null;
+  for (const child of directoryInfo.children) {
+    if (opendFileInfo != null) {
+      break;
+    }
     if (child.isFile) {
-      child.isOpen = child.path === targetFile;
-      _openedFileInfo = child.path === targetFile ? child : _openedFileInfo;
+      child.isOpen = child.path === targetFilePath;
+      if (child.isOpen) {
+        opendFileInfo = child;
+        break;
+      }
     } else {
-      const [childInfo, openedFileInfo] = setFileOpen(child, targetFile);
-      cloneDirectoryInfo.children[i] = childInfo;
-      _openedFileInfo = openedFileInfo;
+      opendFileInfo = opendFileInfo ?? findOpenedFileInfo(child, targetFilePath);
     }
-  });
-  return [cloneDirectoryInfo, _openedFileInfo];
-};
+  }
+  return opendFileInfo;
+}