From 2940e26165ea52d4af6b5a66e63d5d0ac9719542 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Sun, 28 Mar 2021 18:30:49 +0300 Subject: [PATCH] add pages for feed posts --- src/pages/feed/[id].tsx | 62 +++++++++++++++++++++++++++++ src/views/FeedPage/FeedPageView.tsx | 53 ++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 src/pages/feed/[id].tsx create mode 100644 src/views/FeedPage/FeedPageView.tsx diff --git a/src/pages/feed/[id].tsx b/src/pages/feed/[id].tsx new file mode 100644 index 0000000..66e544d --- /dev/null +++ b/src/pages/feed/[id].tsx @@ -0,0 +1,62 @@ +import React from "react"; +import { NextPage, GetStaticProps, GetStaticPaths } from "next"; +import Head from "next/head"; +import { useRouter } from "next/router"; +import Post from "@models/Feed"; +import FeedApi from "@api/feedApi"; +import useFetchFeed from "@hooks/useFetchFeed"; +import FeedPageView from "@views/FeedPage/FeedPageView"; +import PageWrapper from "@views/common/PageWrapper"; +import LoadingView from "@views/common/LoadingView"; + +interface InitialProps { + initialPost: Post; +} + +const FeedPage: NextPage = ({ initialPost }) => { + const router = useRouter(); + const { id } = router.query; + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { data, error } = useFetchFeed({ initialData: initialPost, id: id as string }); + + if (!data || router.isFallback) return ; + + return ( + <> + + + + + + + + ); +}; + +export const getStaticPaths: GetStaticPaths = async () => { + const feed = await FeedApi.getFeed(); + const paths = feed.map((post: Post) => ({ + params: { + id: String(post.id), + }, + } + )); + return { + paths, + fallback: true, + }; +}; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const { id } = params; + const initialPost = await FeedApi.getPost(Number(id)); + return { + props: { + initialPost, + }, + revalidate: 10, + }; +}; + +export default FeedPage; diff --git a/src/views/FeedPage/FeedPageView.tsx b/src/views/FeedPage/FeedPageView.tsx new file mode 100644 index 0000000..1d6b0b8 --- /dev/null +++ b/src/views/FeedPage/FeedPageView.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import Image from "next/image"; +import styled from "styled-components"; +import colors from "@theme/colors"; +import Post from "@models/Feed"; +import { TextSection } from "@components/index"; +import MarkdownStyles from "@views/common/MarkdownStyles"; +import LoadingView from "@views/common/LoadingView"; + +interface FeedPageViewProps { + post?: Post; +} + +const StyledTextSection = styled(TextSection)` + margin: auto; + align-items: center; + + & > h1 { + color: ${colors.darkBlue}; + p { + color: ${colors.orange1}; + } + } +`; + +const Content = styled(MarkdownStyles)` + margin-top: 1.5rem; +`; + +const FeedPageView: React.FC = ({ post }) => { + if (!post) return ; + return ( + +

+ {post.title_fi} +

+ {post.description_fi} +

+ {post.title_fi} +

+
+ +
+ + ); +}; +export default FeedPageView;