Js/add news feed

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:1337

.github/workflows/main.yml

@@ -8,12 +8,6 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
@@ -24,6 +18,8 @@ jobs:
   # Build job
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_API_URL: ${{ secrets.API_URL }}
     steps:
       - name: Checkout
         uses: actions/checkout@v3

package.json

@@ -18,6 +18,7 @@
     "next": "13.4.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swr": "2.2.2",
     "typescript": "5.1.6"
   },
   "devDependencies": {

src/app/page.module.css

@@ -1,7 +1,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
   padding: 6rem;
   min-height: 100vh;

src/app/page.tsx

@@ -1,103 +1,17 @@
-import Image from 'next/image';
+import { NewsFeed } from '../components/NewsFeed';
 import styles from './page.module.css';
 import Link from 'next/link';
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.description}>
-        <h1>
-          Hello World we are&nbsp;
-          <code className={styles.code}>deployed!!</code>
-        </h1>
-
-        <h1>deployed through GITHUB ACTIONS!</h1>
-        <strong>AGAIN?!</strong>
+        <h1>Hello World we are deployed!</h1>
 
         <Link href="/foobar">go to foobar page!</Link>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
       </div>
 
-      <h1>hello world</h1>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+      <NewsFeed />
     </main>
   );
 }

src/components/NewsFeed.module.css

@@ -0,0 +1,9 @@
+.newsItemList {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.newsItem {
+  margin: 20px 0;
+}

src/components/NewsFeed.tsx

@@ -0,0 +1,39 @@
+'use client';
+import useSWR from 'swr';
+import { NewsItemsResponse } from '../types/api';
+import styles from './NewsFeed.module.css';
+
+const fetcher = (url: string) => fetch(url).then(res => res.json());
+
+const params = new URLSearchParams();
+
+params.set('sort', 'publishedAt:desc');
+
+export function NewsFeed() {
+  const { data, error, isLoading } = useSWR<NewsItemsResponse>(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/news-items?${params.toString()}`,
+    fetcher
+  );
+
+  if (isLoading) return <div>loading...</div>;
+
+  if (error || !data?.data) return <div>failed to load</div>;
+
+  return (
+    <div className={styles.newsItemList}>
+      <h1>NewsFeed! 🗞️</h1>
+
+      {data.data.map(({ attributes, id }) => (
+        <div key={id} className={styles.newsItem}>
+          <h2>{attributes.Title}</h2>
+
+          <h3>
+            <i>{attributes.Body}</i>
+          </h3>
+
+          <span>{new Date(attributes.publishedAt).toLocaleDateString()}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/types/api.d.ts

@@ -0,0 +1,23 @@
+export interface NewsItem {
+  id: number;
+  attributes: {
+    Title: string;
+    Body: string;
+    publishedAt: string;
+  };
+}
+
+export interface StrapiResponse {
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+}
+
+export interface NewsItemsResponse extends StrapiResponse {
+  data: NewsItem[];
+}