Replace Post detail with "show more" workflow

src/components/Admin/custom/PostPreview.tsx

@@ -1,22 +1,20 @@
 import {Stack} from '@mui/material'
 import {ThemeProvider} from '@mui/material/styles'
 import Grid from '@mui/material/Unstable_Grid2'
-import {FC, useState} from 'react'
+import {FC} from 'react'
 import {FormDataConsumer} from 'react-admin'
 
 import {Post} from '@/components/Posts/Post'
-import {PostDetail} from '@/components/Posts/PostDetail'
 import {theme} from '@/theme'
 
 export const PostPreview: FC = () => {
-  const [isDetailOpen, openDetail] = useState<boolean>(false)
   return (
     <ThemeProvider theme={theme}>
       <FormDataConsumer>
         {({formData}) => (
           <Grid container columnSpacing={5} sx={{width: '100%'}}>
-            <Grid xs={4}>
-              <Stack gap={5}>
+            <Grid xs={12} md={4}>
+              <Stack gap={5} sx={{color: 'black', background: 'white', p: '10px'}}>
                 <Post
                   id={0}
                   links={formData?.links ?? []}
@@ -27,19 +25,9 @@ export const PostPreview: FC = () => {
                   visible_after={formData?.visible_after ?? ''}
                   visible_until={formData?.visible_until ?? ''}
                   sites={formData?.sites ?? []}
-                  openDetail={() => openDetail(true)}
                 />
               </Stack>
             </Grid>
-            <Grid xs={5}>
-              {isDetailOpen && (
-                <PostDetail
-                  closeDetail={() => openDetail(false)}
-                  caption={formData?.caption ?? ''}
-                  details={formData?.details ?? ''}
-                />
-              )}
-            </Grid>
           </Grid>
         )}
       </FormDataConsumer>

src/components/Posts/Post.tsx

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

src/components/Posts/Posts.tsx

@@ -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 {
@@ -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>
   )
 }

src/pages/strom/index.tsx

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