Added poetry display on userPage

front/src/api/poetry/index.ts

@@ -0,0 +1,18 @@
+import { API_URL } from '../../config'
+import { PoetryResponse, Poetry } from './types'
+
+const initialPoetry: Poetry = {
+    title: '',
+    text: '',
+    author: '',
+}
+
+const composePoetryURL = () => (
+    API_URL + '/poetry?'
+)
+
+const processPoetry = (data: PoetryResponse): Poetry => {
+    return data
+}
+
+export { initialPoetry, composePoetryURL, processPoetry }

front/src/api/poetry/types.ts

@@ -0,0 +1,23 @@
+import { isObject } from '../../utils/types'
+
+type PoetryResponse = {
+    title: string,
+    text: string,
+    author: string,
+}
+
+const isPoetryResponse = (obj: unknown): obj is PoetryResponse => (
+    isObject(obj, {
+        'title': 'string',
+        'text': 'string',
+        'author': 'string',
+    })
+)
+
+type Poetry = PoetryResponse
+
+const isPoetry = isPoetryResponse
+
+export type { PoetryResponse, Poetry }
+
+export { isPoetryResponse, isPoetry }

front/src/components/Poetry.tsx

@@ -0,0 +1,39 @@
+import { CSSProperties } from 'react'
+import { usePoetry } from '../hooks/api'
+import { gotError, gotResponse } from '../hooks/useFetch'
+
+const styles = {
+    container: {
+        paddingBottom: 8,
+    } as CSSProperties,
+}
+
+function Poetry() {
+    const poetry = usePoetry()
+
+    return (
+        <div style={styles.container}>
+            <h4 className='fw-bold'>Поэзия</h4> {
+                gotResponse(poetry) ? (
+                    gotError(poetry) ? (
+                        <div className='text-danger'>
+                            <h5>Ошибка получения стиха</h5>
+                            <p>{poetry.error}</p>
+                        </div>
+                    ) : (
+                        <>
+                            <h5>{poetry.data.title}</h5>
+                            <p dangerouslySetInnerHTML={{ __html: poetry.data.text }} />
+                            <p><em>{poetry.data.author}</em></p>
+                        </>
+                    )
+                ) : (
+                    <h5>Загрузка...</h5>
+                )
+            }
+
+        </div>
+    )
+}
+
+export default Poetry

front/src/components/index.ts

@@ -12,3 +12,4 @@ export { default as CategoryPreview } from './CategoryPreview'
 export { default as StoriesPreview } from './StoriesPreview'
 export { default as Points } from './Points'
 export { default as SignOut } from './SignOut'
+export { default as Poetry } from './Poetry'

front/src/hooks/api/index.ts

@@ -7,3 +7,4 @@ export { default as useUser } from './useUser'
 export { default as useRemoveAnnouncement } from './useRemoveAnnouncement'
 export { default as useSignIn } from './useSignIn'
 export { default as useSignUp } from './useSignUp'
+export { default as usePoetry } from './usePoetry'

front/src/hooks/api/usePoetry.ts

@@ -0,0 +1,122 @@
+import { Poetry } from '../../api/poetry/types'
+import { 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(
+        //     composePoetryURL(),
+        //     'GET',
+        //     false,
+        //     isPoetryResponse,
+        //     processPoetry,
+        //     initialPoetry,
+        // )
+
+        {
+            data: testPoetry,
+            loading: false,
+            error: null,
+            refetch: () => { return },
+        }
+
+        // {
+        //     data: undefined,
+        //     loading: false,
+        //     error: 'хе-хе',
+        //     refetch: () => { return },
+        // }
+
+        // {
+        //     data: undefined,
+        //     loading: true,
+        //     error: null,
+        //     refetch: () => { return },
+        // }
+    )
+}
+
+export default usePoetry

front/src/pages/UserPage.tsx

@@ -2,7 +2,7 @@ import { Container } from 'react-bootstrap'
 
 import { useUser } from '../hooks/api'
 import { userCategories } from '../assets/userCategories'
-import { BackHeader, CategoryPreview, Points, SignOut } from '../components'
+import { BackHeader, CategoryPreview, Poetry, Points, SignOut } from '../components'
 import { gotError, gotResponse } from '../hooks/useFetch'
 
 function UserPage() {
@@ -31,9 +31,12 @@ function UserPage() {
                     'Загрузка...'
                 )
             } />
+
             {userCategories.map(cat => (
                 <CategoryPreview key={cat} category={cat} />
             ))}
+
+            <Poetry />
         </Container>
     )
 }