Merge branch 'feature/feed-page' into 'master'

Feature: Add pages for feed posts See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!43
2021-03-28 15:39:02 +00:00
parent 0842f5a658 2940e26165
commit d95f7aace9
2 changed files with 115 additions and 0 deletions
@@ -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<InitialProps> = ({ 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 <LoadingView />;
+
+  return (
+    <>
+      <Head>
+        <link rel="canonical" href={`https://sik.ayy.fi/events/${id}`} />
+      </Head>
+      <PageWrapper>
+        <FeedPageView post={data} />
+      </PageWrapper>
+    </>
+  );
+};
+
+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<InitialProps> = async ({ params }) => {
+  const { id } = params;
+  const initialPost = await FeedApi.getPost(Number(id));
+  return {
+    props: {
+      initialPost,
+    },
+    revalidate: 10,
+  };
+};
+
+export default FeedPage;
@@ -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<FeedPageViewProps> = ({ post }) => {
+  if (!post) return <LoadingView />;
+  return (
+    <StyledTextSection>
+      <h1>
+        {post.title_fi}
+        <p>
+          {post.description_fi}
+        </p>
+        <Image
+          src={post.image || post.tags[0].icon}
+          alt={post.title_fi}
+          layout="responsive"
+          width={0}
+          height={0}
+        />
+      </h1>
+      <div>
+        <Content source={post.content_fi} escapeHtml={false} />
+      </div>
+    </StyledTextSection>
+  );
+};
+export default FeedPageView;