From ab735dbb9a5609b38c70653efa48e41c5e94a9d1 Mon Sep 17 00:00:00 2001 From: Josh Stillman Date: Tue, 5 Sep 2023 13:27:16 -0400 Subject: [PATCH 1/4] cleanup github action --- .github/workflows/main.yml | 6 ------ 1 file changed, 6 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 9eb10b6..a0747c9 100644 --- a/.github/workflows/main.yml +++ b/.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: From 37619a60d1a09f75098335fc3fc22a4e3c66c95f Mon Sep 17 00:00:00 2001 From: Josh Stillman Date: Tue, 5 Sep 2023 13:29:27 -0400 Subject: [PATCH 2/4] cleanup homepage --- src/app/page.tsx | 91 +----------------------------------------------- 1 file changed, 1 insertion(+), 90 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 4300399..8df30e7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,3 @@ -import Image from 'next/image'; import styles from './page.module.css'; import Link from 'next/link'; @@ -6,97 +5,9 @@ export default function Home() { return (
-

- Hello World we are  - deployed!! -

- -

deployed through GITHUB ACTIONS!

- AGAIN?! +

Hello World we are deployed!

go to foobar page! -
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -

hello world

- -
- -

- Docs -> -

-

Find in-depth information about Next.js features and API.

- - - -

- Learn -> -

-

Learn about Next.js in an interactive course with quizzes!

- - - -

- Templates -> -

-

Explore the Next.js 13 playground.

- - - -

- Deploy -> -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

-
); From 223308b224a10b4cda15e7fdbe18d59598477e5a Mon Sep 17 00:00:00 2001 From: Josh Stillman Date: Tue, 5 Sep 2023 14:26:38 -0400 Subject: [PATCH 3/4] add news feed component --- .env | 1 + package-lock.json | 21 ++++++++++++++++ package.json | 1 + src/app/page.module.css | 2 +- src/app/page.tsx | 3 +++ src/components/NewsFeed.module.css | 9 +++++++ src/components/NewsFeed.tsx | 39 ++++++++++++++++++++++++++++++ src/types/api.d.ts | 23 ++++++++++++++++++ 8 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 .env create mode 100644 src/components/NewsFeed.module.css create mode 100644 src/components/NewsFeed.tsx create mode 100644 src/types/api.d.ts diff --git a/.env b/.env new file mode 100644 index 0000000..5308667 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NEXT_PUBLIC_API_URL=http://localhost:1337 diff --git a/package-lock.json b/package-lock.json index 702e2e4..a768b0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "next": "13.4.15", "react": "18.2.0", "react-dom": "18.2.0", + "swr": "2.2.2", "typescript": "5.1.6" }, "devDependencies": { @@ -3520,6 +3521,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swr": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.2.tgz", + "integrity": "sha512-CbR41AoMD4TQBQw9ic3GTXspgfM9Y8Mdhb5Ob4uIKXhWqnRLItwA5fpGvB7SmSw3+zEjb0PdhiEumtUvYoQ+bQ==", + "dependencies": { + "client-only": "^0.0.1", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/synckit": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz", @@ -3725,6 +3738,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 9fb74f4..ef660ef 100644 --- a/package.json +++ b/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": { diff --git a/src/app/page.module.css b/src/app/page.module.css index 6676d2c..7bbeb4c 100644 --- a/src/app/page.module.css +++ b/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; diff --git a/src/app/page.tsx b/src/app/page.tsx index 8df30e7..d0ae11a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,4 @@ +import { NewsFeed } from '../components/NewsFeed'; import styles from './page.module.css'; import Link from 'next/link'; @@ -9,6 +10,8 @@ export default function Home() { go to foobar page! + + ); } diff --git a/src/components/NewsFeed.module.css b/src/components/NewsFeed.module.css new file mode 100644 index 0000000..4fe34f9 --- /dev/null +++ b/src/components/NewsFeed.module.css @@ -0,0 +1,9 @@ +.newsItemList { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.newsItem { + margin: 20px 0; +} diff --git a/src/components/NewsFeed.tsx b/src/components/NewsFeed.tsx new file mode 100644 index 0000000..1e2b3ca --- /dev/null +++ b/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( + `${process.env.NEXT_PUBLIC_API_URL}/api/news-items?${params.toString()}`, + fetcher + ); + + if (isLoading) return
loading...
; + + if (error || !data?.data) return
failed to load
; + + return ( +
+

NewsFeed! 🗞️

+ + {data.data.map(({ attributes, id }) => ( +
+

{attributes.Title}

+ +

+ {attributes.Body} +

+ + {new Date(attributes.publishedAt).toLocaleDateString()} +
+ ))} +
+ ); +} diff --git a/src/types/api.d.ts b/src/types/api.d.ts new file mode 100644 index 0000000..8b1b57d --- /dev/null +++ b/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[]; +} From 44c65435efe258771a5a2deed1b26eaeb2702b34 Mon Sep 17 00:00:00 2001 From: Josh Stillman Date: Tue, 5 Sep 2023 15:03:21 -0400 Subject: [PATCH 4/4] use API URL from secrets --- .github/workflows/main.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index a0747c9..f7a306d 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -18,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