Dev

.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.vscode/mcp.json

package.json

@@ -14,6 +14,9 @@
   "dependencies": {
     "@cloudinary/react": "^1.14.1",
     "@cloudinary/url-gen": "^1.21.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^5.0.0",
     "@markdoc/markdoc": "^0.5.1",
@@ -37,6 +40,7 @@
     "cloudinary": "^2.6.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "drizzle-orm": "^0.41.0",
     "jotai": "^2.12.2",

src/app/(home)/_components/ArticleFeed.tsx

@@ -1,15 +1,22 @@
 "use client";
 
 import * as articleActions from "@/backend/services/article.actions";
+import * as seriesActions from "@/backend/services/series.action";
 import ArticleCard from "@/components/ArticleCard";
+import SeriesCard from "@/components/SeriesCard";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import VisibilitySensor from "@/components/VisibilitySensor";
 import { readingTime } from "@/lib/utils";
 import getFileUrl from "@/utils/getFileUrl";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import { Loader } from "lucide-react";
+import { useState } from "react";
 
 const ArticleFeed = () => {
-  const feedInfiniteQuery = useInfiniteQuery({
-    queryKey: ["article-feed-2"],
+  const [feedType, setFeedType] = useState<"articles" | "series">("articles");
+
+  const articleFeedQuery = useInfiniteQuery({
+    queryKey: ["article-feed", feedType],
     queryFn: ({ pageParam }) =>
       articleActions.articleFeed({ limit: 5, page: pageParam }),
     initialPageParam: 1,
@@ -18,55 +25,115 @@ const ArticleFeed = () => {
       const _page = lastPage?.meta?.currentPage ?? 1;
       return _page + 1;
     },
+    enabled: feedType === "articles",
+  });
+
+  const seriesFeedQuery = useInfiniteQuery({
+    queryKey: ["series-feed", feedType],
+    queryFn: ({ pageParam }) =>
+      seriesActions.seriesFeed({ limit: 5, page: pageParam }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage?.meta.hasNextPage) return undefined;
+      const _page = lastPage?.meta?.currentPage ?? 1;
+      return _page + 1;
+    },
+    enabled: feedType === "series",
   });
 
+  const activeFeedQuery =
+    feedType === "articles" ? articleFeedQuery : seriesFeedQuery;
+  const isLoading =
+    feedType === "articles"
+      ? articleFeedQuery.isFetching
+      : seriesFeedQuery.isFetching;
+
   return (
-    <div className="flex flex-col gap-10">
-      {Boolean(feedInfiniteQuery.isFetching) && (
-        <>
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-          <div className="h-56 bg-muted animate-pulse mx-4" />
-        </>
-      )}
+    <>
+      <div className="mb-6">
+        <Tabs
+          defaultValue="articles"
+          onValueChange={(value) => setFeedType(value as "articles" | "series")}
+          className="w-full"
+        >
+          <TabsList className="grid w-full max-w-md grid-cols-2">
+            <TabsTrigger value="articles">Articles</TabsTrigger>
+            <TabsTrigger value="series">Series</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
 
-      {feedInfiniteQuery.data?.pages
-        .flatMap((page) => page?.nodes)
-        .map((article) => (
-          <ArticleCard
-            key={article?.id}
-            id={article?.id.toString()!}
-            handle={article?.handle ?? ""}
-            title={article?.title ?? ""}
-            excerpt={article?.excerpt ?? ""}
-            coverImage={getFileUrl(article?.cover_image!)}
-            author={{
-              id: article?.user?.id ?? "",
-              name: article?.user?.name ?? "",
-              avatar: article?.user?.profile_photo ?? "",
-              username: article?.user?.username ?? "",
+      <div className="flex flex-col gap-10 mt-2">
+        {isLoading && (
+          <>
+            <div className="h-56 bg-muted animate-pulse mx-4" />
+            <div className="h-56 bg-muted animate-pulse mx-4" />
+            <div className="h-56 bg-muted animate-pulse mx-4" />
+            <div className="h-56 bg-muted animate-pulse mx-4" />
+          </>
+        )}
+
+        {feedType === "articles" &&
+          articleFeedQuery.data?.pages
+            .flatMap((page) => page?.nodes)
+            .map((article) => (
+              <ArticleCard
+                key={article?.id}
+                id={article?.id.toString()!}
+                handle={article?.handle ?? ""}
+                title={article?.title ?? ""}
+                excerpt={article?.excerpt ?? ""}
+                coverImage={getFileUrl(article?.cover_image!)}
+                author={{
+                  id: article?.user?.id ?? "",
+                  name: article?.user?.name ?? "",
+                  avatar: article?.user?.profile_photo ?? "",
+                  username: article?.user?.username ?? "",
+                }}
+                publishedAt={article?.created_at.toDateString() ?? ""}
+                readingTime={readingTime(article?.body ?? "")}
+                likes={0}
+                comments={0}
+              />
+            ))}
+
+        {feedType === "series" &&
+          seriesFeedQuery.data?.pages
+            .flatMap((page) => page?.nodes)
+            .map((series) => (
+              <SeriesCard
+                key={series?.id}
+                id={series?.id.toString()!}
+                handle={series?.handle ?? ""}
+                title={series?.title ?? ""}
+                description={series?.description ?? ""}
+                coverImage={getFileUrl(series?.cover_image!)}
+                creator={{
+                  id: series?.owner?.id ?? "",
+                  name: series?.owner?.name ?? "",
+                  avatar: series?.owner?.profile_photo ?? "",
+                  username: series?.owner?.username ?? "",
+                }}
+                articleCount={series?.article_count || 0}
+              />
+            ))}
+
+        <div className="my-10">
+          {activeFeedQuery.isFetchingNextPage && (
+            <div className="flex justify-center">
+              <Loader className="animate-spin" />
+            </div>
+          )}
+          <VisibilitySensor
+            visible={activeFeedQuery.hasNextPage}
+            onLoadmore={async () => {
+              console.log(`fetching next page for ${feedType}`);
+              await activeFeedQuery.fetchNextPage();
             }}
-            publishedAt={article?.created_at.toDateString() ?? ""}
-            readingTime={readingTime(article?.body ?? "")}
-            likes={0}
-            comments={0}
           />
-        ))}
-
-      <div className="my-10">
-        <VisibilitySensor
-          visible={feedInfiniteQuery.hasNextPage}
-          onLoadmore={async () => {
-            console.log("fetching next page");
-            await feedInfiniteQuery.fetchNextPage();
-            // alert("Fetching next page");
-          }}
-        />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/app/dashboard/_components/DashboardSidebar.tsx

@@ -31,6 +31,11 @@ const DashboardSidebar = () => {
       url: "",
       icon: Home,
     },
+    {
+      title: _t("Series"),
+      url: "/series",
+      icon: Home,
+    },
     {
       title: _t("Notifications"),
       url: "/notifications",