Post (#18)

* prispevky na zdruzeni, zatial bez vela css

* zobrazenie linkov

* Update src/pages/Post/Post.tsx

oprava useStatov

Co-authored-by: Richard Trembecký <[email protected]>

* zapracovanie pripomienok

* Update src/pages/Post/Post.tsx

destructuring

Co-authored-by: Richard Trembecký <[email protected]>

* 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 <[email protected]>
Co-authored-by: Richard Trembecký <[email protected]>

.prettierrc

@@ -4,4 +4,5 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "all",
+  "endOfLine": "auto",
 }

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;
+}

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>
+  )
+}

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>
     </>
   )