Updated poetry to use latest api
Added poem id, changed url, fixed formatting, enabled actual fetching
This commit is contained in:
parent
ea18439140
commit
60779ea489
GPG Key ID:
027994B0AA357688
@ -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 => {
|
||||
|
||||
@ -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',
|
||||
})
|
||||
)
|
||||
|
||||
|
||||
@ -1,18 +1,13 @@
|
||||
import { CSSProperties } from 'react'
|
||||
import { usePoetry } from '../hooks/api'
|
||||
import { gotError, gotResponse } from '../hooks/useFetch'
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
paddingBottom: 8,
|
||||
} as CSSProperties,
|
||||
}
|
||||
import styles from '../styles/Poetry.module.css'
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,121 +1,17 @@
|
||||
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',
|
||||
}
|
||||
import { composePoetryURL, initialPoetry, processPoetry } from '../../api/poetry'
|
||||
import { Poetry, isPoetryResponse } from '../../api/poetry/types'
|
||||
import useFetch, { UseFetchReturn } from '../useFetch'
|
||||
|
||||
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 },
|
||||
// }
|
||||
useFetch(
|
||||
composePoetryURL(),
|
||||
'GET',
|
||||
false,
|
||||
isPoetryResponse,
|
||||
processPoetry,
|
||||
initialPoetry,
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
7
front/src/styles/Poetry.module.css
Normal file
7
front/src/styles/Poetry.module.css
Normal file
@ -0,0 +1,7 @@
|
||||
.container {
|
||||
padding-bottom: 8;
|
||||
}
|
||||
|
||||
.text {
|
||||
white-space: 'pre-wrap';
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user