Updated poetry to use latest api

Added poem id, changed url, fixed formatting, enabled actual fetching

front/src/api/poetry/index.ts

@@ -5,10 +5,11 @@ const initialPoetry: Poetry = {
     title: '',
     text: '',
     author: '',
+    id: 0,
 }
 
 const composePoetryURL = () => (
-    API_URL + '/poetry?'
+    API_URL + '/user/poem?'
 )
 
 const processPoetry = (data: PoetryResponse): Poetry => {

front/src/api/poetry/types.ts

@@ -4,6 +4,7 @@ type PoetryResponse = {
     title: string,
     text: string,
     author: string,
+    id: number,
 }
 
 const isPoetryResponse = (obj: unknown): obj is PoetryResponse => (
@@ -11,6 +12,7 @@ const isPoetryResponse = (obj: unknown): obj is PoetryResponse => (
         'title': 'string',
         'text': 'string',
         'author': 'string',
+        'id': 'number',
     })
 )
 

front/src/components/Poetry.tsx

@@ -1,18 +1,13 @@
-import { CSSProperties } from 'react'
 import { usePoetry } from '../hooks/api'
 import { gotError, gotResponse } from '../hooks/useFetch'
 
-const styles = {
+import styles from '../styles/Poetry.module.css'
-    container: {
-        paddingBottom: 8,
-    } as CSSProperties,
-}
 
 function Poetry() {
     const poetry = usePoetry()
 
     return (
-        <div style={styles.container}>
+        <div className={styles.container}>
             <h4 className='fw-bold'>Поэзия</h4> {
                 gotResponse(poetry) ? (
                     gotError(poetry) ? (
@@ -23,7 +18,13 @@ function Poetry() {
                     ) : (
                         <>
                             <h5>{poetry.data.title}</h5>
-                            <p dangerouslySetInnerHTML={{ __html: poetry.data.text }} />
+                            <p
+                                className={styles.text}
+                                dangerouslySetInnerHTML={{
+                                    __html:
+                                        poetry.data.text.trim().replace(/(\n){3,}/g, '\n\n'),
+                                }}
+                            />
                             <p><em>{poetry.data.author}</em></p>
                         </>
                     )

front/src/hooks/api/usePoetry.ts

@@ -1,121 +1,17 @@
-import { Poetry } from '../../api/poetry/types'
+import { composePoetryURL, initialPoetry, processPoetry } from '../../api/poetry'
-import { UseFetchReturn } from '../useFetch'
+import { Poetry, isPoetryResponse } from '../../api/poetry/types'
-
+import useFetch, { UseFetchReturn } from '../useFetch'
-const testPoetry: Poetry = {
-    title: 'The Mouse\'s Tale',
-    text: `<div style="padding:0 60px"><div class="eleven" style="position:relative;left:-60px">"Fury said to</div>
-    <div class="ten" style="position:relative;left:-40px">a mouse, That</div>
-    <div class="ten" style="position:relative;left:0px">he met</div>
-    <div class="ten" style="position:relative;left:10px">in the</div>
-    <div class="ten" style="position:relative;left:20px">house,</div>
-    <div class="ten" style="position:relative;left:17px">'Let us</div>
-    <div class="ten" style="position:relative;left:5px">both go</div>
-    <div class="ten" style="position:relative;left:-7px">to law:</div>
-    <div class="ten" style="position:relative;left:-23px"><i>I</i> will</div>
-    <div class="ten" style="position:relative;left:-26px">prosecute</div>
-    <div class="nine" style="position:relative;left:-40px"><i>you.</i>—</div>
-    <div class="nine" style="position:relative;left:-30px">Come, I'll</div>
-    <div class="nine" style="position:relative;left:-20px">take no</div>
-    <div class="nine" style="position:relative;left:-7px">denial;</div>
-    <div class="nine" style="position:relative;left:19px">We must</div>
-    <div class="nine" style="position:relative;left:45px">have a</div>
-    <div class="nine" style="position:relative;left:67px">trial:</div>
-    <div class="nine" style="position:relative;left:80px">For</div>
-    <div class="eight" style="position:relative;left:70px">really</div>
-    <div class="eight" style="position:relative;left:57px">this</div>
-    <div class="eight" style="position:relative;left:75px">morning</div>
-    <div class="eight" style="position:relative;left:95px">I've</div>
-    <div class="eight" style="position:relative;left:77px">nothing</div>
-    <div class="eight" style="position:relative;left:57px">to do.'</div>
-    <div class="seven" style="position:relative;left:38px">Said the</div>
-    <div class="seven" style="position:relative;left:30px">mouse to</div>
-    <div class="seven" style="position:relative;left:18px">the cur,</div>
-    <div class="seven" style="position:relative;left:22px">'Such a</div>
-    <div class="seven" style="position:relative;left:37px">trial,</div>
-    <div class="seven" style="position:relative;left:27px">dear sir,</div>
-    <div class="seven" style="position:relative;left:9px">With no</div>
-    <div class="seven" style="position:relative;left:-8px">jury or</div>
-    <div class="seven" style="position:relative;left:-18px">judge,</div>
-    <div class="seven" style="position:relative;left:-6px">would be</div>
-    <div class="seven" style="position:relative;left:7px">wasting</div>
-    <div class="seven" style="position:relative;left:25px">our breath.'</div>
-    <div class="six" style="position:relative;left:30px">'I'll be</div>
-    <div class="six" style="position:relative;left:24px">judge,</div>
-    <div class="six" style="position:relative;left:15px">I'll be</div>
-    <div class="six" style="position:relative;left:2px">jury,'</div>
-    <div class="six" style="position:relative;left:-4px">Said</div>
-    <div class="six" style="position:relative;left:17px">cunning</div>
-    <div class="six" style="position:relative;left:29px">old Fury;</div>
-    <div class="six" style="position:relative;left:37px">'I'll try</div>
-    <div class="six" style="position:relative;left:51px">the whole</div>
-    <div class="six" style="position:relative;left:70px">cause,</div>
-    <div class="six" style="position:relative;left:65px">and</div>
-    <div class="six" style="position:relative;left:60px">condemn</div>
-    <div class="six" style="position:relative;left:60px">you</div>
-    <div class="six" style="position:relative;left:68px">to</div>
-    <div class="six" style="position:relative;left:82px">death.' "</div><style>.eleven {
-        font-size: 105%;
-        margin: 0px;
-    }
-
-    .ten {
-        font-size: 100%;
-        margin: 0px;
-    }
-
-    .nine {
-        font-size: 90%;
-        margin: 0px;
-    }
-
-    .eight {
-        font-size: 80%;
-        margin: 0px;
-    }
-
-    .seven {
-        font-size: 70%;
-        margin: 0px;
-    }
-
-    .six {
-        font-size: 60%;
-        margin: 0px;
-    }</style></div>`,
-    author: 'Lewis Carroll',
-}
 
 function usePoetry(): UseFetchReturn<Poetry> {
     return (
-        // useFetch(
+        useFetch(
-        //     composePoetryURL(),
+            composePoetryURL(),
-        //     'GET',
+            'GET',
-        //     false,
+            false,
-        //     isPoetryResponse,
+            isPoetryResponse,
-        //     processPoetry,
+            processPoetry,
-        //     initialPoetry,
+            initialPoetry,
-        // )
+        )
-
-        {
-            data: testPoetry,
-            loading: false,
-            error: null,
-            refetch: () => { return },
-        }
-
-        // {
-        //     data: undefined,
-        //     loading: false,
-        //     error: 'хе-хе',
-        //     refetch: () => { return },
-        // }
-
-        // {
-        //     data: undefined,
-        //     loading: true,
-        //     error: null,
-        //     refetch: () => { return },
-        // }
     )
 }
 

front/src/styles/Poetry.module.css

@@ -0,0 +1,7 @@
+.container {
+    padding-bottom: 8;
+}
+
+.text {
+    white-space: 'pre-wrap';
+}