Skip to content

Js/add news feed #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_API_URL=http://localhost:1337
8 changes: 2 additions & 6 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand Down
21 changes: 21 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.module.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
92 changes: 3 additions & 89 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions src/components/NewsFeed.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.newsItemList {
display: flex;
flex-direction: column;
justify-content: space-around;
}

.newsItem {
margin: 20px 0;
}
39 changes: 39 additions & 0 deletions src/components/NewsFeed.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
23 changes: 23 additions & 0 deletions src/types/api.d.ts
Original file line number Diff line number Diff line change
@@ -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[];
}