From 99bc4b2484dff662a42b27f62feb5a04bc98108a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Albert=20Gb=C3=BAr?=
 <58312374+MartinAlbertGbur@users.noreply.github.com>
Date: Tue, 27 Apr 2021 23:38:21 +0100
Subject: [PATCH] Post (#18)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* prispevky na zdruzeni, zatial bez vela css

* zobrazenie linkov

* Update src/pages/Post/Post.tsx

oprava useStatov

Co-authored-by: Richard Trembecký <rtrembecky@gmail.com>

* zapracovanie pripomienok

* Update src/pages/Post/Post.tsx

destructuring

Co-authored-by: Richard Trembecký <rtrembecky@gmail.com>

* oprava

* fix line endings handling on Windows

* rewrite promise-style fetch to awaited axios.get

also fix bad merge and bring back destructuring

Co-authored-by: Adzedze <58312374+Adzedze@users.noreply.github.com>
Co-authored-by: Richard Trembecký <rtrembecky@gmail.com>
---
 .prettierrc                 |  1 +
 src/pages/Post/Post.css     | 13 ++++++++
 src/pages/Post/Post.tsx     | 63 +++++++++++++++++++++++++++++++++++++
 src/pages/Router/Router.tsx |  3 +-
 4 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Post/Post.css
 create mode 100644 src/pages/Post/Post.tsx

diff --git a/.prettierrc b/.prettierrc
index 9ef31bca..c04b1d7c 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,4 +4,5 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "all",
+  "endOfLine": "auto",
 }
\ No newline at end of file
diff --git a/src/pages/Post/Post.css b/src/pages/Post/Post.css
new file mode 100644
index 00000000..9e6a9327
--- /dev/null
+++ b/src/pages/Post/Post.css
@@ -0,0 +1,13 @@
+#posts {
+  background-color: white;
+  text-decoration-color: black;
+  position: static;
+  padding-left: 0cm;
+}
+
+#post {
+  list-style: none;
+  margin: 0px auto;
+  width: 800px;
+  text-align: left;
+}
\ No newline at end of file
diff --git a/src/pages/Post/Post.tsx b/src/pages/Post/Post.tsx
new file mode 100644
index 00000000..bb215381
--- /dev/null
+++ b/src/pages/Post/Post.tsx
@@ -0,0 +1,63 @@
+import './Post.css'
+
+import axios, {AxiosError} from 'axios'
+import React, {FC, useEffect, useState} from 'react'
+
+interface IPost {
+  id: number
+  links: {id: number; caption: string; url: string}[]
+  caption: string
+  short_text: string
+  details: string
+  added_at: string
+  show_after: string
+  disable_after: string
+}
+
+export const Posts: FC = () => {
+  const [posts, setPosts] = useState<IPost[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const {data} = await axios.get<IPost[]>('/api/cms/post/visible/', {
+          headers: {
+            'Content-type': 'application/json',
+          },
+        })
+        setPosts(data)
+      } catch (e) {
+        const ex = e as AxiosError
+        const error = ex.response?.status === 404 ? 'Resource not found' : 'An unexpected error has occurred'
+        setError(error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchData()
+  }, [])
+
+  return (
+    <div id="posts">
+      <ul id="post">
+        {posts.map(({id, caption, short_text, links}) => (
+          <li key={id}>
+            <h2 id="bold">{caption}</h2>
+            <h3>{short_text}</h3>
+            {links.map(({id, url, caption}) => (
+              <p key={id}>
+                <h3>
+                  <a href={url}>{caption}</a>
+                </h3>
+              </p>
+            ))}
+            <h5 id="bold">PODROBNOSTI</h5>
+          </li>
+        ))}
+      </ul>
+      {error && <p>{error}</p>}
+    </div>
+  )
+}
diff --git a/src/pages/Router/Router.tsx b/src/pages/Router/Router.tsx
index f9631bb5..bc10b0db 100644
--- a/src/pages/Router/Router.tsx
+++ b/src/pages/Router/Router.tsx
@@ -5,6 +5,7 @@ import {LatexExample} from '../../components/Latex/LatexExample'
 import {PageLayout} from '../../components/PageLayout/PageLayout'
 import {Admin} from '../Admin/Admin'
 import {PagePlaceholder} from '../PagePlaceholder'
+import {Posts} from '../Post/Post'
 
 export const Router: React.FC<{seminarId: number}> = ({seminarId}) => {
   return (
@@ -116,7 +117,7 @@ const ZdruzenieRouter: React.FC = () => {
   return (
     <>
       <Route exact path={path}>
-        <PagePlaceholder title="Združenie home" />
+        <Posts />
       </Route>
     </>
   )