Remove Server Dialog System (#250)

* Remove Server Dialog System * Fix Update Collection Dialog * Comment Out Collections
timoclsn · Oct 14, 2023 · 3eb708f · 3eb708f · vercel · Oct 14, 2023
1 parent 0f66ca2
commit 3eb708f
Show file tree

Hide file tree

Showing 28 changed files with 456 additions and 602 deletions.
diff --git a/apps/resources/app/(home)/page.tsx b/apps/resources/app/(home)/page.tsx
@@ -1,22 +1,16 @@
-import { Page } from 'components/Page/Page';
-import { SearchParams } from 'lib/types';
 import { NewResources } from '../../components/NewResources/NewResources';
 import { Newsletter } from '../../components/Newsletter/Newsletter';
 import { About } from './About/About';
 import { Header } from './Header/Header';
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const Home = ({ searchParams }: Props) => {
+const Home = () => {
   return (
-    <Page searchParams={searchParams}>
+    <>
       <Header />
       <NewResources />
       <Newsletter />
       <About />
-    </Page>
+    </>
   );
 };
 

diff --git a/apps/resources/app/collections/[id]/page.tsx b/apps/resources/app/collections/[id]/page.tsx
@@ -1,12 +1,11 @@
 import { auth } from '@clerk/nextjs';
 import { Resources } from 'app/resources/Resources/Resources';
 import { Await } from 'components/Await/Await';
-import { Page } from 'components/Page/Page';
-import { Heading, Text } from 'design-system';
+import { UpdateCollectionDialog } from 'components/Collections/UpdateCollectionDialog/UpdateCollectionDialog';
+import { Button, Heading, Text } from 'design-system';
 import { getCollectionCached } from 'lib/cache';
 import { SearchParams } from 'lib/types';
 import { DeleteCollectionButton } from '../../../components/Collections/DeleteCollectionButton/DeleteCollectionButton';
-import { UpdateBollectionButton } from '../../../components/Collections/UpdateBollectionButton';
 
 interface Props {
   params: {
@@ -21,12 +20,14 @@ const CollectionPage = async ({ params, searchParams }: Props) => {
   const { userId } = auth();
 
   return (
-    <Page searchParams={searchParams}>
+    <>
       <div>
         <Heading>Collection Page</Heading>
         {userId && (
           <div className="flex flex-col items-start gap-4">
-            <UpdateBollectionButton collectionId={Number(id)} />
+            <UpdateCollectionDialog collectionId={Number(id)}>
+              <Button>Update Collection</Button>
+            </UpdateCollectionDialog>
             <DeleteCollectionButton collectionId={Number(id)} />
           </div>
         )}
@@ -69,7 +70,7 @@ const CollectionPage = async ({ params, searchParams }: Props) => {
           );
         }}
       </Await>
-    </Page>
+    </>
   );
 };
 

diff --git a/apps/resources/app/collections/page.tsx b/apps/resources/app/collections/page.tsx
@@ -1,23 +1,21 @@
 import { auth } from '@clerk/nextjs';
 import { Await } from 'components/Await/Await';
-import { Page } from 'components/Page/Page';
-import { Heading, Text } from 'design-system';
+import { AddCollectionDialog } from 'components/Collections/AddCollectionDialog/AddCollectionDialog';
+import { Button, Heading, Text } from 'design-system';
 import { getCollectionsCached } from 'lib/cache';
-import { SearchParams } from 'lib/types';
 import Link from 'next/link';
-import { AddCollectionButton } from '../../components/Collections/AddCollectionButton';
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const CollectionsPage = async ({ searchParams }: Props) => {
+const CollectionsPage = async () => {
   const promise = getCollectionsCached();
   const { userId } = auth();
   return (
-    <Page searchParams={searchParams}>
+    <>
       <Heading level="2">Collections</Heading>
-      {userId && <AddCollectionButton />}
+      {userId && (
+        <AddCollectionDialog>
+          <Button>Add Collection</Button>
+        </AddCollectionDialog>
+      )}
       <Await promise={promise}>
         {(collections) => {
           return (
@@ -39,7 +37,7 @@ const CollectionsPage = async ({ searchParams }: Props) => {
           );
         }}
       </Await>
-    </Page>
+    </>
   );
 };
 

diff --git a/apps/resources/app/imprint/page.tsx b/apps/resources/app/imprint/page.tsx
@@ -1,31 +1,23 @@
-import { Page } from 'components/Page/Page';
 import { allPages } from 'contentlayer/generated';
 import { Heading } from 'design-system';
-import { SearchParams } from 'lib/types';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Imprint',
 };
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const ImprintPage = ({ searchParams }: Props) => {
+const ImprintPage = () => {
   const content = allPages.find((page) => page.title === 'Imprint');
   return (
-    <Page searchParams={searchParams}>
-      <section className="mx-auto max-w-prose space-y-20">
-        <Heading level="1" className="mb-6">
-          {content?.title}
-        </Heading>
-        <div
-          className="prose"
-          dangerouslySetInnerHTML={{ __html: content?.body.html ?? '' }}
-        />
-      </section>
-    </Page>
+    <section className="mx-auto max-w-prose space-y-20">
+      <Heading level="1" className="mb-6">
+        {content?.title}
+      </Heading>
+      <div
+        className="prose"
+        dangerouslySetInnerHTML={{ __html: content?.body.html ?? '' }}
+      />
+    </section>
   );
 };
 

diff --git a/apps/resources/app/privacy/page.tsx b/apps/resources/app/privacy/page.tsx
@@ -1,31 +1,23 @@
-import { Page } from 'components/Page/Page';
 import { allPages } from 'contentlayer/generated';
 import { Heading } from 'design-system';
-import { SearchParams } from 'lib/types';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Privacy Policy',
 };
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const PrivacyPage = ({ searchParams }: Props) => {
+const PrivacyPage = () => {
   const content = allPages.find((page) => page.title === 'Privacy');
   return (
-    <Page searchParams={searchParams}>
-      <section className="mx-auto max-w-prose space-y-20">
-        <Heading level="1" className="mb-6">
-          {content?.title}
-        </Heading>
-        <div
-          className="prose"
-          dangerouslySetInnerHTML={{ __html: content?.body.html ?? '' }}
-        />
-      </section>
-    </Page>
+    <section className="mx-auto max-w-prose space-y-20">
+      <Heading level="1" className="mb-6">
+        {content?.title}
+      </Heading>
+      <div
+        className="prose"
+        dangerouslySetInnerHTML={{ __html: content?.body.html ?? '' }}
+      />
+    </section>
   );
 };
 

diff --git a/apps/resources/app/profile/page.tsx b/apps/resources/app/profile/page.tsx
@@ -4,45 +4,37 @@ import {
   SignedOut,
   UserProfile,
 } from '@clerk/nextjs';
-import { Page } from 'components/Page/Page';
 import { Heading } from 'design-system';
-import { SearchParams } from 'lib/types';
 import { DeleteAccountButton } from './DeleteAccountButton';
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const ProfilePage = ({ searchParams }: Props) => {
+const ProfilePage = () => {
   return (
-    <Page searchParams={searchParams}>
-      <section className="mx-auto max-w-4xl">
-        <Heading level="1" className="mb-8">
-          Profile
-        </Heading>
-        <SignedIn>
+    <section className="mx-auto max-w-4xl">
+      <Heading level="1" className="mb-8">
+        Profile
+      </Heading>
+      <SignedIn>
+        <div className="flex flex-col items-center justify-center gap-10">
+          <UserProfile
+            appearance={{
+              variables: {
+                colorPrimary: '#101b2c',
+                borderRadius: 'none',
+              },
+              elements: {
+                card: 'shadow-none',
+              },
+            }}
+          />
           <div className="flex flex-col items-center justify-center gap-10">
-            <UserProfile
-              appearance={{
-                variables: {
-                  colorPrimary: '#101b2c',
-                  borderRadius: 'none',
-                },
-                elements: {
-                  card: 'shadow-none',
-                },
-              }}
-            />
-            <div className="flex flex-col items-center justify-center gap-10">
-              <DeleteAccountButton />
-            </div>
+            <DeleteAccountButton />
           </div>
-        </SignedIn>
-        <SignedOut>
-          <RedirectToSignIn />
-        </SignedOut>
-      </section>
-    </Page>
+        </div>
+      </SignedIn>
+      <SignedOut>
+        <RedirectToSignIn />
+      </SignedOut>
+    </section>
   );
 };
 

diff --git a/apps/resources/app/resources/[slug]/page.tsx b/apps/resources/app/resources/[slug]/page.tsx
@@ -1,5 +1,3 @@
-import { Page } from 'components/Page/Page';
-import { SearchParams } from 'lib/types';
 import { Comments } from '../../../components/Comments/Comments';
 import { NewResources } from '../../../components/NewResources/NewResources';
 import { Newsletter } from '../../../components/Newsletter/Newsletter';
@@ -57,21 +55,20 @@ interface Props {
   params: {
     slug: string;
   };
-  searchParams: SearchParams;
 }
 
-const ResourcePage = async ({ params, searchParams }: Props) => {
+const ResourcePage = async ({ params }: Props) => {
   const { slug } = params;
   const { resourceId, resourceType } = parseResourceSlug(slug);
 
   return (
-    <Page searchParams={searchParams}>
+    <>
       <ResourceCard resourceId={resourceId} resourceType={resourceType} />
       <Comments resourceId={resourceId} resourceType={resourceType} />
       <RelatedResources resourceId={resourceId} resourceType={resourceType} />
       <NewResources />
       <Newsletter />
-    </Page>
+    </>
   );
 };
 

diff --git a/apps/resources/app/resources/page.tsx b/apps/resources/app/resources/page.tsx
@@ -1,4 +1,3 @@
-import { Page } from 'components/Page/Page';
 import { SearchParams } from 'lib/types';
 import { Metadata } from 'next';
 import { Resources } from './Resources/Resources';
@@ -14,10 +13,10 @@ interface Props {
 
 const ResourcesPage = ({ searchParams }: Props) => {
   return (
-    <Page searchParams={searchParams}>
+    <>
       <Resources searchParams={searchParams} />
       <Suggestion />
-    </Page>
+    </>
   );
 };
 

diff --git a/apps/resources/app/sign-in/[[...sign-in]]/page.tsx b/apps/resources/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,44 +1,36 @@
 import { SignIn } from '@clerk/nextjs';
-import { Page } from 'components/Page/Page';
 import { Heading } from 'design-system';
-import { SearchParams } from 'lib/types';
 
-interface Props {
-  searchParams: SearchParams;
-}
-
-const SignInPage = ({ searchParams }: Props) => {
+const SignInPage = () => {
   return (
-    <Page searchParams={searchParams}>
-      <section className="mx-auto max-w-lg">
-        <Heading level="1" className="mb-8">
-          Sign in
-        </Heading>
-        <div className="flex items-center justify-center">
-          <SignIn
-            path="/sign-in"
-            routing="path"
-            signUpUrl="/sign-up"
-            appearance={{
-              layout: {
-                privacyPageUrl: '/privacy',
-                socialButtonsPlacement: 'bottom',
-                socialButtonsVariant: 'blockButton',
-              },
-              variables: {
-                colorPrimary: '#101b2c',
-                borderRadius: 'none',
-              },
-              elements: {
-                headerTitle: 'hidden',
-                headerSubtitle: 'hidden',
-                card: 'shadow-none',
-              },
-            }}
-          />
-        </div>
-      </section>
-    </Page>
+    <section className="mx-auto max-w-lg">
+      <Heading level="1" className="mb-8">
+        Sign in
+      </Heading>
+      <div className="flex items-center justify-center">
+        <SignIn
+          path="/sign-in"
+          routing="path"
+          signUpUrl="/sign-up"
+          appearance={{
+            layout: {
+              privacyPageUrl: '/privacy',
+              socialButtonsPlacement: 'bottom',
+              socialButtonsVariant: 'blockButton',
+            },
+            variables: {
+              colorPrimary: '#101b2c',
+              borderRadius: 'none',
+            },
+            elements: {
+              headerTitle: 'hidden',
+              headerSubtitle: 'hidden',
+              card: 'shadow-none',
+            },
+          }}
+        />
+      </div>
+    </section>
   );
 };