pagers-org · geeonie · Sep 17, 2023 · Sep 17, 2023 · Sep 17, 2023 · Sep 17, 2023
diff --git a/.env b/.env
@@ -0,0 +1 @@
+BACKEND_URL=https://api.realworld.io/api
diff --git a/.gitignore b/.gitignore
@@ -73,7 +73,7 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
+# .env
 .env.development.local
 .env.test.local
 .env.production.local

diff --git a/app/(home)/@feeds/(feeds)/@global/page.tsx b/app/(home)/@feeds/(feeds)/@global/page.tsx
@@ -0,0 +1,29 @@
+import { FeedItem } from 'components/home/feed';
+import { Pagination } from 'components/ui';
+import { ARTICLE_PAGE_LIMIT } from 'constants/article';
+import { articleApi } from 'services';
+
+type Props = {
+  searchParams: Record<string, string>;
+};
+const GlobalPage = async ({ searchParams }: Props) => {
+  const page = Number(searchParams.page ?? 1);
+
+  const { articles, articlesCount } = await articleApi.getArticles({
+    limit: ARTICLE_PAGE_LIMIT,
+    offset: (page - 1) * ARTICLE_PAGE_LIMIT,
+  });
+
+  return (
+    <>
+      <ul className="p-0">
+        {articles.map((feed) => {
+          return <FeedItem feed={feed} key={feed.slug} />;
+        })}
+      </ul>
+      <Pagination total={articlesCount / ARTICLE_PAGE_LIMIT} current={page} />
+    </>
+  );
+};
+
+export default GlobalPage;
diff --git a/.../home/article-section/article-section.tsx → app/(home)/@feeds/(feeds)/layout.tsx b/.../home/article-section/article-section.tsx → app/(home)/@feeds/(feeds)/layout.tsx
@@ -1,8 +1,13 @@
+import { ReactNode } from 'react';
+
 import { Tabs } from 'components/ui';
-import { FeedList } from '../feed-list';
 import { clsx } from 'lib/utils';
 
-export const ArticleSection = () => {
+type Props = {
+  global: ReactNode;
+};
+
+const FeedsLayout = ({ global }: Props) => {
   const tabs = [
     {
       key: 'feed',
@@ -29,10 +34,10 @@ export const ArticleSection = () => {
           <div className={clsx('pt-[24px]', 'pb-[24px]')}>No articles are here... yet</div>
         </Tabs.Content>
 
-        <Tabs.Content value="all">
-          <FeedList />
-        </Tabs.Content>
+        <Tabs.Content value="all">{global}</Tabs.Content>
       </Tabs.Root>
     </div>
   );
 };
+
+export default FeedsLayout;
diff --git a/components/home/index.tsx → app/(home)/layout.tsx b/components/home/index.tsx → app/(home)/layout.tsx
@@ -1,17 +1,20 @@
-import { ArticleSection } from './article-section';
-import { Banner } from './banner';
-import { TagList } from './tag-list';
+import { ReactNode } from 'react';
 
-export const Home = () => {
+import { Banner } from 'components/home/banner';
+import { TagList } from 'components/home/tag-list';
+
+type Props = {
+  feeds: ReactNode;
+};
+
+const HomeLayout = ({ feeds }: Props) => {
   return (
     <div className="home-page">
       <Banner />
 
       <div className="page container">
         <div className="row">
-          <div className="col-md-9">
-            <ArticleSection />
-          </div>
+          <div className="col-md-9">{feeds}</div>
 
           <div className="col-md-3">
             <div className="sidebar">
@@ -24,3 +27,5 @@ export const Home = () => {
     </div>
   );
 };
+
+export default HomeLayout;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,7 @@ const inter = Inter({
   variable: '--font-inter',
 });
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
     <html lang="en" className={inter.variable}>
       <body>
@@ -30,4 +30,6 @@ export default async function RootLayout({ children }: { children: ReactNode })
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/app/page.tsx b/app/page.tsx
diff --git a/components/home/article-section/index.ts b/components/home/article-section/index.ts
diff --git a/components/home/feed-list/feed-list.tsx b/components/home/feed-list/feed-list.tsx
diff --git a/...ents/home/feed-list/feed-item.stories.tsx → components/home/feed/feed-item.stories.tsx b/...ents/home/feed-list/feed-item.stories.tsx → components/home/feed/feed-item.stories.tsx
diff --git a/components/home/feed-list/feed-item.tsx → components/home/feed/feed-item.tsx b/components/home/feed-list/feed-item.tsx → components/home/feed/feed-item.tsx
@@ -1,24 +1,11 @@
 import { Avatar, Tag } from 'components/ui';
+import { Article } from 'models';
 
-export const FeedItem = () => {
-  const feed = {
-    slug: 'how-to-train-your-dragon',
-    title: 'How to train your dragon',
-    description: 'Ever wonder how?',
-    body: 'It takes a Jacobian',
-    tagList: ['dragons', 'training'],
-    createdAt: '2016-02-18T03:22:56.637Z',
-    updatedAt: '2016-02-18T03:48:35.824Z',
-    favorited: false,
-    favoritesCount: 0,
-    author: {
-      username: 'jake',
-      bio: 'I work at statefarm',
-      image: 'https://i.stack.imgur.com/xHWG8.jpg',
-      following: false,
-    },
-  };
+type Props = {
+  feed: Article;
+};
 
+export const FeedItem = ({ feed }: Props) => {
   const { slug, title, description, author, favoritesCount, tagList } = feed;
 
   return (

diff --git a/components/home/feed-list/index.ts → components/home/feed/index.ts b/components/home/feed-list/index.ts → components/home/feed/index.ts
@@ -1,2 +1 @@
-export * from './feed-list';
 export * from './feed-item';
diff --git a/components/ui/pagination/pagination.tsx b/components/ui/pagination/pagination.tsx
@@ -1,32 +1,29 @@
-'use client';
-
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { clsx } from 'lib/utils';
 import { Overwrite } from 'lib/type-utils';
 
 type PaginationProps = {
   total: number;
   current?: number;
-  onChange?: (page: number) => void;
 };
 
 type Props = Overwrite<ComponentPropsWithoutRef<'ul'>, PaginationProps>;
 
 export const Pagination = forwardRef<HTMLUListElement, Props>(function pagination(
-  { total, current = 1, onChange, ...otherProps },
+  { total, current = 1, ...otherProps },
   ref,
 ) {
   const pages = Array.from({ length: total }, (_, i) => i + 1);
 
-  const handleItemClick = (page: number) => () => {
-    onChange?.(page);
-  };
+  if (total < 2) {
+    return null;
+  }
 
   return (
     <ul ref={ref} {...otherProps} className="pagination">
       {pages.map((page) => (
-        <li className={clsx('page-item', { active: page === current })} key={page} onClick={handleItemClick(page)}>
-          <a className="page-link" href="">
+        <li className={clsx('page-item', { active: page === current })} key={page}>
+          <a className="page-link" href={`?page=${page}`}>
             {page}
           </a>
         </li>

diff --git a/constants/article.ts b/constants/article.ts
@@ -0,0 +1 @@
+export const ARTICLE_PAGE_LIMIT = 10;
diff --git a/models/article.ts b/models/article.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod';
+import { AuthorSchema } from './author';
+
+export const ArticleSchema = z.object({
+  slug: z.string(),
+  title: z.string(),
+  description: z.string(),
+  body: z.string(),
+  tagList: z.array(z.string()),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  favorited: z.boolean(),
+  favoritesCount: z.number(),
+  author: AuthorSchema,
+});
+
+export const ArticleListSchema = z.object({
+  articles: z.array(ArticleSchema),
+  articlesCount: z.number(),
+});
+
+export type Article = z.infer<typeof ArticleSchema>;
diff --git a/models/author.ts b/models/author.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const AuthorSchema = z.object({
+  username: z.string(),
+  bio: z.string().nullable(),
+  image: z.string(),
+  following: z.boolean(),
+});
diff --git a/models/index.ts b/models/index.ts
@@ -0,0 +1,3 @@
+export * from './article';
+export * from './author';
+export * from './search-params';
diff --git a/models/search-params.ts b/models/search-params.ts
@@ -0,0 +1,7 @@
+export type SearchParams = {
+  limit: number;
+  offset: number;
+  author: string;
+  tag: string;
+  favorited: string;
+};
diff --git a/next.config.js b/next.config.js
@@ -3,7 +3,7 @@ module.exports = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'i.stack.imgur.com',
+        hostname: 'api.realworld.io',
       },
     ],
   },

diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "prettier-plugin-tailwindcss": "0.5.4",
     "storybook": "7.4.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "zod": "3.22.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/services/apis/article.ts b/services/apis/article.ts
@@ -0,0 +1,15 @@
+import { get } from 'services/fetch-utils';
+import { ArticleListSchema, SearchParams } from 'models';
+
+class ArticleApiService {
+  async getArticles({ limit = 10, offset = 0 }: Partial<SearchParams> = {}) {
+    const params = new URLSearchParams({
+      limit: limit.toString(),
+      offset: offset.toString(),
+    });
+
+    return await get(`/articles?${params}`, ArticleListSchema);
+  }
+}
+
+export const articleApi = new ArticleApiService();
diff --git a/services/apis/index.ts b/services/apis/index.ts
@@ -0,0 +1 @@
+export * from './article';
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './feed-list';
		export * from './feed-item';