Skip to content

Commit

Permalink
Replace Post detail with "show more" workflow
Browse files Browse the repository at this point in the history
  • Loading branch information
Matushl committed Dec 14, 2024
1 parent 3b9b4e1 commit 395be8a
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 112 deletions.
59 changes: 33 additions & 26 deletions src/components/Posts/Post.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {Stack, Typography} from '@mui/material'
import {FC} from 'react'
import {FC, useState} from 'react'

import {formatDate} from '@/utils/formatDate'

import {Button} from '../Clickable/Button'
import {Link} from '../Clickable/Link'
import {PostMarkdown} from './PostMarkdown'

export interface IPost {
id: number
Expand All @@ -16,32 +17,38 @@ export interface IPost {
visible_after: string
visible_until: string
sites: number[]
openDetail: () => void
}

export const Post: FC<IPost> = ({caption, short_text, links, details, added_at, openDetail}) => (
<Stack>
<Typography variant="postTitle">{caption}</Typography>

<Typography variant="postBody">{short_text}</Typography>

<Stack direction="row" justifyContent="space-between" gap={0.5} mt={0.5}>
{/* alignItems so the links don't stretch */}
<Stack gap={0.5} alignItems="start" ml="-10px">
{details.length > 0 && (
<Button type="button" onClick={openDetail} variant="button2">
Podrobnosti
</Button>
)}
{links.map(({id, url, caption}) => (
<Link key={id} href={url} variant="button2">
{caption}
</Link>
))}
export const Post: FC<IPost> = ({caption, short_text, links, details, added_at}) => {
const [displayDetail, setDisplayDetail] = useState<boolean>(false)
const toggleDisplayDetail = () => setDisplayDetail((prev) => !prev)

return (
<Stack gap={0.5}>
<Typography variant="postTitle">{caption}</Typography>

<Typography variant="postBody">{short_text}</Typography>

{displayDetail && <PostMarkdown content={details} />}

<Stack direction="row" justifyContent="space-between" gap={0.5} mt={0.5}>
{/* alignItems so the links don't stretch */}
<Stack gap={0.5} alignItems="start" ml="-10px">
{details.length > 0 && (
<Button type="button" onClick={toggleDisplayDetail} variant="button2">
{displayDetail ? 'Zobraziť menej' : 'Zobraziť viac'}
</Button>
)}
{links.map(({id, url, caption}) => (
<Link key={id} href={url} variant="button2">
{caption}
</Link>
))}
</Stack>
<Typography variant="body1" fontWeight={275} textTransform="uppercase">
{formatDate(added_at)}
</Typography>
</Stack>
<Typography variant="body1" fontWeight={275} textTransform="uppercase">
{formatDate(added_at)}
</Typography>
</Stack>
</Stack>
)
)
}
37 changes: 0 additions & 37 deletions src/components/Posts/PostDetail.tsx

This file was deleted.

56 changes: 8 additions & 48 deletions src/components/Posts/Posts.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import {Stack, Typography} from '@mui/material'
// new MUI Grid without spacing issues: https://mui.com/material-ui/react-grid2/
import Grid from '@mui/material/Unstable_Grid2'
import {useQuery} from '@tanstack/react-query'
import axios from 'axios'
import {FC, useState} from 'react'
import {FC} from 'react'

import {useSeminarInfo} from '@/utils/useSeminarInfo'

import {Loading} from '../Loading/Loading'
import {IPost, Post} from './Post'
import {PostDetail} from './PostDetail'

export const Posts: FC = () => {
const {
Expand All @@ -24,54 +21,17 @@ export const Posts: FC = () => {

const {seminarId} = useSeminarInfo()

const [activePostDetailIndex, setActivePostDetailIndex] = useState<number>()

if (postsIsLoading) return <Loading />

if (postsError) return <Typography>{postsError.message}</Typography>

return (
<>
{/* detail prispevku chceme zobrazit na urovni toho prispevku - `activePostDetailIndex` teda rozdeluje prispevky na dva gridy:
- prvy grid su vsetky prispevky do rozbaleneho prispevku - len jeden grid item ako jeden stlpec prispevkov (`xs={4}` ako 4 stlpce z 12)
- druhy grid su prispevky od rozbaleneho prispevku - dva grid itemy ako jeden stlpec prispevkov (`xs={4}`) a druhy stlpec ako detail prispevku (`xs={5}` - detail je sirsi) */}
{activePostDetailIndex !== 0 && (
<Grid container disableEqualOverflow columnSpacing={5} mb={5}>
<Grid xs={12} sm={6} md={4}>
<Stack gap={5}>
{posts.slice(0, activePostDetailIndex).map((post, index) => {
if (!post.sites.includes(seminarId)) return null
return <Post key={post.id} {...post} openDetail={() => setActivePostDetailIndex(index)} />
})}
</Stack>
</Grid>
</Grid>
)}
{activePostDetailIndex !== undefined && (
<Grid container disableEqualOverflow columnSpacing={5}>
<Grid xs={12} sm={6} md={4}>
<Stack gap={5}>
{posts.slice(activePostDetailIndex).map((post, index) => {
if (!post.sites.includes(seminarId)) return null
return (
<Post
key={post.id}
{...post}
openDetail={() => setActivePostDetailIndex(activePostDetailIndex + index)}
/>
)
})}
</Stack>
</Grid>
<Grid xs={12} sm={6} mt={{xs: 2, sm: 0}}>
<PostDetail
closeDetail={() => setActivePostDetailIndex(undefined)}
caption={posts[activePostDetailIndex].caption}
details={posts[activePostDetailIndex].details}
/>
</Grid>
</Grid>
)}
</>
<Stack gap={5}>
{posts
.filter((p) => p.sites.includes(seminarId))
.map((post) => (
<Post key={post.id} {...post} />
))}
</Stack>
)
}
2 changes: 1 addition & 1 deletion src/pages/strom/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
import {Posts} from '@/components/Posts/Posts'

const Strom: NextPage = () => (
<PageLayout title="Príspevky" contentWidth={3}>
<PageLayout title="Príspevky" contentWidth={1}>
<Posts />
</PageLayout>
)
Expand Down

0 comments on commit 395be8a

Please sign in to comment.