Update PoC

apps/resources/app/collections/[id]/page.tsx

@@ -5,6 +5,8 @@ import { Heading, Text } from 'design-system';
 import { getCollectionCached } from 'lib/cache';
 import { SearchParams } from 'lib/types';
 import { DeleteCollectionButton } from './DeleteCollectionButton/DeleteCollectionButton';
+import { auth } from '@clerk/nextjs';
+import { Resources } from 'app/resources/Resources/Resources';
 
 interface Props {
   params: {
@@ -16,24 +18,30 @@ interface Props {
 const CollectionPage = async ({ params, searchParams }: Props) => {
   const { id } = params;
   const promise = getCollectionCached(Number(id));
+  const { userId } = auth();
 
   return (
     <Page searchParams={searchParams}>
       <div>
         <Heading>Collection Page</Heading>
-        <OpenServerDialog
-          dialog="update-collection"
-          params={{
-            collectionId: Number(id),
-          }}
-        >
-          Update Collection
-        </OpenServerDialog>
-        <DeleteCollectionButton collectionId={Number(id)} />
+        {userId && (
+          <>
+            <OpenServerDialog
+              dialog="update-collection"
+              params={{
+                collectionId: Number(id),
+              }}
+            >
+              Update Collection
+            </OpenServerDialog>
+            <DeleteCollectionButton collectionId={Number(id)} />
+          </>
+        )}
       </div>
       <Await promise={promise}>
         {(collection) => {
           if (!collection) return <div>No collection found</div>;
+          const isOwnCollection = collection.user?.id === userId;
 
           return (
             <div className="flex flex-col gap-4">
@@ -63,6 +71,7 @@ const CollectionPage = async ({ params, searchParams }: Props) => {
                   </ul>
                 </div>
               )}
+              {isOwnCollection && <Resources searchParams={searchParams} />}
             </div>
           );
         }}

apps/resources/app/collections/page.tsx

@@ -1,3 +1,4 @@
+import { auth } from '@clerk/nextjs';
 import { Await } from 'components/Await/Await';
 import { Page } from 'components/Page/Page';
 import { OpenServerDialog } from 'components/ServerDialog/OpenServerDialog';
@@ -12,12 +13,15 @@ interface Props {
 
 const CollectionsPage = async ({ searchParams }: Props) => {
   const promise = getCollectionsCached();
+  const { userId } = auth();
   return (
     <Page searchParams={searchParams}>
       <Heading level="2">Collections</Heading>
-      <OpenServerDialog dialog="add-collection">
-        Add Collection
-      </OpenServerDialog>
+      {userId && (
+        <OpenServerDialog dialog="add-collection">
+          Add Collection
+        </OpenServerDialog>
+      )}
       <Await promise={promise}>
         {(collections) => {
           return (

apps/resources/app/resources/Resources/Resources.tsx

@@ -1,13 +1,31 @@
 import { Heading, Text } from 'design-system';
+import { SearchParams } from 'lib/types';
+import { z } from 'zod';
 import { formateDate } from '../../../lib/utils';
-import { ReseourcesFilter } from '../page';
 import { ResourcesTable } from './ResourcesTable/ResourcesTable';
 
+export type ReseourcesFilter = z.infer<typeof reseourcesFilterSchema>;
+const reseourcesFilterSchema = z.object({
+  type: z.coerce.string().optional(),
+  category: z.coerce.string().optional(),
+  topic: z.coerce.string().optional(),
+  sort: z.coerce.string().optional(),
+  search: z.coerce.string().optional(),
+  likes: z.coerce.boolean().optional(),
+  comments: z.coerce.boolean().optional(),
+  from: z.coerce.string().optional(),
+  till: z.coerce.string().optional(),
+  limit: z.coerce.number().optional(),
+  title: z.coerce.string().optional(),
+});
+
 interface Props {
-  resourcesFilter: ReseourcesFilter;
+  searchParams: SearchParams;
 }
 
-export const Resources = async ({ resourcesFilter }: Props) => {
+export const Resources = async ({ searchParams }: Props) => {
+  const resourcesFilter = reseourcesFilterSchema.parse(searchParams);
+
   const title = resourcesFilter.title;
   const from = resourcesFilter.from;
   const till = resourcesFilter.till;

apps/resources/app/resources/Resources/ResourcesTable/ResourcesList/ResourcesList.tsx

@@ -7,7 +7,7 @@ import {
   LikedResources,
   Resource,
 } from '../../../../../lib/resources';
-import { ReseourcesFilter } from '../../../page';
+import { ReseourcesFilter } from '../../Resources';
 import { ClearAllButton } from './ClearAllButton';
 import { DownloadButton } from './DownloadButton/DownloadButton';
 import { ResourcesListTop } from './ResourcesListTop';

apps/resources/app/resources/Resources/ResourcesTable/ResourcesTable.tsx

@@ -9,7 +9,7 @@ import {
   getResourcesCached,
   getTopicsCached,
 } from '../../../../lib/cache';
-import { ReseourcesFilter } from '../../page';
+import { ReseourcesFilter } from '../Resources';
 import { ResourcesFilter } from './ResourcesFilter/ResourcesFilter';
 import { ResourcesList } from './ResourcesList/ResourcesList';
 import { ResourcesTableProvider } from './ResourcesTableProvider';

apps/resources/app/resources/page.tsx

@@ -1,38 +1,21 @@
 import { Page } from 'components/Page/Page';
 import { SearchParams } from 'lib/types';
 import { Metadata } from 'next';
-import { z } from 'zod';
 import { Resources } from './Resources/Resources';
 import { Suggestion } from './Suggestion/Suggestion';
 
 export const metadata: Metadata = {
   title: 'Resources',
 };
 
-export type ReseourcesFilter = z.infer<typeof reseourcesFilterSchema>;
-const reseourcesFilterSchema = z.object({
-  type: z.coerce.string().optional(),
-  category: z.coerce.string().optional(),
-  topic: z.coerce.string().optional(),
-  sort: z.coerce.string().optional(),
-  search: z.coerce.string().optional(),
-  likes: z.coerce.boolean().optional(),
-  comments: z.coerce.boolean().optional(),
-  from: z.coerce.string().optional(),
-  till: z.coerce.string().optional(),
-  limit: z.coerce.number().optional(),
-  title: z.coerce.string().optional(),
-});
-
 interface Props {
   searchParams: SearchParams;
 }
 
 const ResourcesPage = ({ searchParams }: Props) => {
-  const resourcesFilter = reseourcesFilterSchema.parse(searchParams);
   return (
     <Page searchParams={searchParams}>
-      <Resources resourcesFilter={resourcesFilter} />
+      <Resources searchParams={searchParams} />
       <Suggestion />
     </Page>
   );

apps/resources/components/AddToCollectionDialog/AddToCollectionDialog.tsx

@@ -10,6 +10,7 @@ import {
 import { getResourceCollections, getUserCollections } from 'lib/collections';
 import { ContentType } from 'lib/resources';
 import { AddToCollectionItem } from './AddToCollectionItem';
+import { OpenServerDialog } from 'components/ServerDialog/OpenServerDialog';
 
 interface Props {
   resourceId: number;
@@ -35,20 +36,26 @@ export const AddToCollectionDialog = ({ resourceId, resourceType }: Props) => {
             {([userCollections, resourceCollections]) => {
               return (
                 <div>
-                  {userCollections.map((collection) => {
-                    const state = resourceCollections.find(
-                      (rc) => rc.id === collection.id,
-                    );
-                    return (
-                      <AddToCollectionItem
-                        key={collection.id}
-                        collection={collection}
-                        initialState={!!state}
-                        resourceId={resourceId}
-                        resourceType={resourceType}
-                      />
-                    );
-                  })}
+                  <OpenServerDialog dialog="add-collection">
+                    Add Collection
+                  </OpenServerDialog>
+                  <ul className="flex flex-col gap-4">
+                    {userCollections.map((collection) => {
+                      const state = resourceCollections.find(
+                        (rc) => rc.id === collection.id,
+                      );
+                      return (
+                        <li key={collection.id}>
+                          <AddToCollectionItem
+                            collection={collection}
+                            initialState={!!state}
+                            resourceId={resourceId}
+                            resourceType={resourceType}
+                          />
+                        </li>
+                      );
+                    })}
+                  </ul>
                 </div>
               );
             }}

apps/resources/components/Card/Card.tsx

@@ -20,6 +20,8 @@ import { LikesButton } from './LikesButton/LikesButton';
 import { ResourceLink } from './ResourceLink';
 import { ShareButton } from './ShareButton';
 import { TypeButton } from './TypeButton';
+import { auth } from '@clerk/nextjs';
+import { CollectionButton } from './CollectionButton';
 
 interface Props {
   resourceId: number;
@@ -58,6 +60,7 @@ export const Card = ({
   note,
 }: Props) => {
   const resourceLink = tags?.at(0)?.url;
+  const { userId } = auth();
 
   return (
     <HoverProvider resourceId={resourceId} resourceType={resourceType}>
@@ -148,13 +151,14 @@ export const Card = ({
             {description && (
               <Text className="text-text-secondary">{description}</Text>
             )}
-            <OpenServerDialog
-              dialog="add-to-collection"
-              params={{ resourceId, resourceType }}
-              className="relative"
-            >
-              Add to Collection
-            </OpenServerDialog>
+
+            {/* Add to collection */}
+            {userId && (
+              <CollectionButton
+                resourceId={resourceId}
+                resourceType={resourceType}
+              />
+            )}
           </div>
         </div>
 

apps/resources/components/Card/CollectionButton.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { addToCollection } from 'components/AddToCollectionDialog/actions';
+import { OpenServerDialog } from 'components/ServerDialog/OpenServerDialog';
+import { Button } from 'design-system';
+import { useAction } from 'lib/actions/useAction';
+import { ContentType } from 'lib/resources';
+import { usePathname } from 'next/navigation';
+
+interface Props {
+  resourceId: number;
+  resourceType: ContentType;
+}
+
+export const CollectionButton = ({ resourceId, resourceType }: Props) => {
+  const { runAction, isRunning } = useAction(addToCollection);
+  const pathname = usePathname();
+  const collectionId = pathname.includes('/collections/')
+    ? pathname.split('/').pop()
+    : undefined;
+
+  return collectionId ? (
+    <Button
+      className="relative"
+      onClick={() => {
+        runAction({
+          collectionId: Number(collectionId),
+          resourceId,
+          resourceType,
+        });
+      }}
+      disabled={isRunning}
+    >
+      Add to this collection
+    </Button>
+  ) : (
+    <OpenServerDialog
+      dialog="add-to-collection"
+      params={{ resourceId, resourceType }}
+      className="relative"
+    >
+      Add to Collection
+    </OpenServerDialog>
+  );
+};

apps/resources/components/ServerDialog/ServerDialog.tsx

@@ -23,16 +23,20 @@ export const ServerDialog = ({ searchParams }: Props) => {
     searchParamsSchema.parse(searchParams);
 
   if (dialog === 'add-to-collection' && resourceId && resourceType) {
+    console.log('add-to-collection');
     return (
       <AddToCollectionDialog
         resourceId={resourceId}
         resourceType={resourceType}
       />
     );
   } else if (dialog === 'add-collection') {
+    console.log('add-collection');
     return <AddCollectionDialog />;
   } else if (dialog === 'update-collection' && collectionId) {
+    console.log('update-collection');
     return <UpdateCollectionDialog collectionId={collectionId} />;
   }
+  console.log('null');
   return null;
 };

apps/resources/components/ServerDialog/ServerDialogRoot.tsx

@@ -9,11 +9,20 @@ export const ServerDialogRoot = ({
 }: ComponentPropsWithoutRef<typeof Dialog>) => {
   const [open, setOpen] = useState(true);
   const { back } = useRouter();
+
   const onOpenChange = (open: boolean) => {
     if (!open) {
       back();
+      return;
     }
     setOpen(open);
   };
-  return <Dialog open={open} onOpenChange={onOpenChange} {...props} />;
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      defaultOpen={true}
+      {...props}
+    />
+  );
 };

apps/resources/package.json

@@ -26,7 +26,7 @@
     "esbuild": "^0.19.2",
     "lucide-react": "^0.269.0",
     "match-sorter": "6.3.1",
-    "next": "13.4.20-canary.33",
+    "next": "13.4.20-canary.36",
     "next-contentlayer": "0.3.4",
     "nodemailer": "^6.9.4",
     "react": "18.2.0",