Posts Detail (#322)

* Refactor Posts pages for small seminars * Remove unnecessary styles * Remove default padding for buttons * Add Post detail * Rename new input props * Add Markdown component for Posts * Improve Markdown for static pages * Position PostDetail properly * fix PostDetailProps * refactor Posts to use MUI Grid component * Posts structure comments * Post - minimal gap between links and date * PostDetail - fix always showing scrollbar space --------- Co-authored-by: rtrembecky <[email protected]>
ZdruzenieSTROM · Jan 8, 2024 · eefe562 · eefe562
1 parent 90fec87
commit eefe562
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 40 deletions.
diff --git a/src/components/Clickable/Clickable.module.scss b/src/components/Clickable/Clickable.module.scss
@@ -1,6 +1,6 @@
 .actionButton {
   cursor: pointer;
-  text-transform: uppercase;
+  padding: 0;
   border: 0;
   border-bottom: 5px solid black;
   color: black;

diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
@@ -4,6 +4,7 @@ import {FC} from 'react'
 import {formatDate} from '@/utils/formatDate'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Button} from '../Clickable/Button'
 import {Link} from '../Clickable/Link'
 
 export interface IPost {
@@ -16,29 +17,34 @@ export interface IPost {
   visible_after: string
   visible_until: string
   sites: number[]
+  openDetail: () => void
 }
 
-export const Post: FC<IPost> = ({caption, short_text, links, sites, added_at}) => {
+export const Post: FC<IPost> = ({caption, short_text, links, details, sites, added_at, openDetail}) => {
   const {seminarId} = useSeminarInfo()
 
   if (!sites.includes(seminarId)) return null
 
   return (
     <Stack>
       <Typography variant="postTitle">{caption}</Typography>
-      <Typography variant="postBody" component="p">
-        {short_text}
-      </Typography>
-      <Stack direction="row" justifyContent="space-between" alignItems="end">
+
+      <Typography variant="postBody">{short_text}</Typography>
+
+      <Stack direction="row" justifyContent="space-between" gap={0.5}>
         {/* alignItems so the links don't stretch */}
         <Stack gap={0.5} alignItems="start">
+          {details.length > 0 && (
+            <Button onClick={openDetail} variant="button2">
+              Podrobnosti
+            </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>

diff --git a/src/components/Posts/PostDetail.tsx b/src/components/Posts/PostDetail.tsx
@@ -0,0 +1,28 @@
+import {Stack, Typography} from '@mui/material'
+import {FC} from 'react'
+
+import {PostMarkdown} from './PostMarkdown'
+
+type PostDetailProps = {
+  caption: string
+  details: string
+}
+
+export const PostDetail: FC<PostDetailProps> = ({caption, details}) => {
+  return (
+    <Stack
+      p={2}
+      sx={{
+        border: '1rem solid black',
+        backgroundColor: 'white',
+        maxHeight: '60vh',
+        overflow: 'auto',
+      }}
+    >
+      <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic" mb={4}>
+        {caption}
+      </Typography>
+      <PostMarkdown content={details} />
+    </Stack>
+  )
+}
diff --git a/src/components/Posts/PostMarkdown.tsx b/src/components/Posts/PostMarkdown.tsx
@@ -0,0 +1,35 @@
+import 'katex/dist/katex.min.css'
+
+import {FC} from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import {Header, MarkdownLink, Ol, Paragraph, Ul} from './PostMarkdownTexts'
+
+type PostMarkdownProps = {
+  content: string
+}
+
+export const PostMarkdown: FC<PostMarkdownProps> = ({content}) => (
+  <ReactMarkdown
+    remarkPlugins={[remarkGfm, remarkMath]}
+    rehypePlugins={[rehypeKatex]}
+    components={{
+      a: MarkdownLink,
+      p: Paragraph,
+      h1: Header,
+      h2: Header,
+      h3: Header,
+      h4: Header,
+      h5: Header,
+      h6: Header,
+      ol: Ol,
+      ul: Ul,
+    }}
+    disallowedElements={['table']}
+  >
+    {content}
+  </ReactMarkdown>
+)
diff --git a/src/components/Posts/PostMarkdownTexts.tsx b/src/components/Posts/PostMarkdownTexts.tsx
@@ -0,0 +1,40 @@
+import {Typography} from '@mui/material'
+import {FC, ReactNode} from 'react'
+import {HeadingProps, OrderedListProps, ReactMarkdownProps, UnorderedListProps} from 'react-markdown/lib/ast-to-react'
+
+import {Link} from '../Clickable/Link'
+
+type MarkdownLinkProps = {
+  children: ReactNode[]
+  href?: string
+}
+
+export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
+  <Link href={href}>
+    <Typography variant="postBody">{children}</Typography>
+  </Link>
+)
+
+export const Ol: FC<OrderedListProps> = ({children}) => (
+  <Typography variant="postBody" component="ol">
+    {children}
+  </Typography>
+)
+
+export const Ul: FC<UnorderedListProps> = ({children}) => (
+  <Typography variant="postBody" component="ul">
+    {children}
+  </Typography>
+)
+
+export const Paragraph: FC<ReactMarkdownProps> = ({children}) => (
+  <Typography variant="postBody" mt={0.5} component="div">
+    {children}
+  </Typography>
+)
+
+export const Header: FC<HeadingProps> = ({children}) => (
+  <Typography variant="postBody" mt={1} component="div" fontWeight={800}>
+    {children}
+  </Typography>
+)
diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
@@ -1,10 +1,13 @@
 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} from 'react'
+import {FC, useState} from 'react'
 
 import {Loading} from '../Loading/Loading'
 import {IPost, Post} from './Post'
+import {PostDetail} from './PostDetail'
 
 export const Posts: FC = () => {
   const {
@@ -17,15 +20,46 @@ export const Posts: FC = () => {
   })
   const posts = postsData?.data ?? []
 
+  const [activePostDetailIndex, setActivePostDetailIndex] = useState<number>()
+
   if (postsIsLoading) return <Loading />
 
   if (postsError) return <Typography>{postsError.message}</Typography>
 
   return (
-    <Stack gap={5}>
-      {posts.map((post) => (
-        <Post key={post.id} {...post} />
-      ))}
-    </Stack>
+    <>
+      {/* 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 columnSpacing={5} mb={5}>
+          <Grid xs={4}>
+            <Stack gap={5}>
+              {posts.slice(0, activePostDetailIndex).map((post, index) => (
+                <Post key={post.id} {...post} openDetail={() => setActivePostDetailIndex(index)} />
+              ))}
+            </Stack>
+          </Grid>
+        </Grid>
+      )}
+      {activePostDetailIndex !== undefined && (
+        <Grid container columnSpacing={5}>
+          <Grid xs={4}>
+            <Stack gap={5}>
+              {posts.slice(activePostDetailIndex).map((post, index) => (
+                <Post
+                  key={post.id}
+                  {...post}
+                  openDetail={() => setActivePostDetailIndex(activePostDetailIndex + index)}
+                />
+              ))}
+            </Stack>
+          </Grid>
+          <Grid xs={5}>
+            <PostDetail caption={posts[activePostDetailIndex].caption} details={posts[activePostDetailIndex].details} />
+          </Grid>
+        </Grid>
+      )}
+    </>
   )
 }
diff --git a/src/components/Problems/Problems.module.scss b/src/components/Problems/Problems.module.scss
@@ -8,9 +8,7 @@
 .sideContainer {
   margin: 1rem 0px;
   height: auto;
-  display: grid;
-  grid-template-rows: auto 1fr;
-
+
   position: fixed;
   top: 12rem;
   bottom: 2rem;

diff --git a/src/components/StaticSites/Markdown.tsx b/src/components/StaticSites/Markdown.tsx
@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {H1, H2, H3, Li, MarkdownLink, Ol, P, Table, Td, Th} from './Texts'
+import {H1, H2, H3, MarkdownLink, Ol, P, Table, Td, Th, Ul} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -25,8 +25,11 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       h1: H1,
       h2: H2,
       h3: H3,
+      h4: H3,
+      h5: H3,
+      h6: H3,
       ol: Ol,
-      li: Li,
+      ul: Ul,
     }}
   >
     {content}

diff --git a/src/components/StaticSites/Texts.tsx b/src/components/StaticSites/Texts.tsx
@@ -2,11 +2,11 @@ import {Typography} from '@mui/material'
 import {FC, ReactNode} from 'react'
 import {
   HeadingProps,
-  LiProps,
   OrderedListProps,
   ReactMarkdownProps,
   TableDataCellProps,
   TableHeaderCellProps,
+  UnorderedListProps,
 } from 'react-markdown/lib/ast-to-react'
 
 import {Link} from '../Clickable/Link'
@@ -45,8 +45,8 @@ export const Ol: FC<OrderedListProps> = ({children}) => (
   </Typography>
 )
 
-export const Li: FC<LiProps> = ({children}) => (
-  <Typography variant="body1" mt={1} component="li">
+export const Ul: FC<UnorderedListProps> = ({children}) => (
+  <Typography variant="body1" component="ul">
     {children}
   </Typography>
 )
@@ -58,19 +58,19 @@ export const P: FC<ReactMarkdownProps> = ({children}) => (
 )
 
 export const H1: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h1" mt={10}>
+  <Typography variant="h1" mt={10} component="div">
     {children}
   </Typography>
 )
 
 export const H2: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h2" mt={5}>
+  <Typography variant="h2" mt={5} component="div">
     {children}
   </Typography>
 )
 
 export const H3: FC<HeadingProps> = ({children}) => (
-  <Typography variant="h3" mt={3}>
+  <Typography variant="h3" mt={3} component="div">
     {children}
   </Typography>
 )
diff --git a/src/pages/malynar/index.tsx b/src/pages/malynar/index.tsx
@@ -1,12 +1,9 @@
 import {NextPage} from 'next'
 
-import {PageLayout} from '@/components/PageLayout/PageLayout'
-import {Posts} from '@/components/Posts/Posts'
+import Page from '../strom/index'
 
-const Malynar: NextPage = () => (
-  <PageLayout title="Novinky" contentWidth={1}>
-    <Posts />
-  </PageLayout>
-)
+const Malynar: NextPage = () => {
+  return <Page />
+}
 
 export default Malynar
diff --git a/src/pages/matik/index.tsx b/src/pages/matik/index.tsx
@@ -1,12 +1,9 @@
 import {NextPage} from 'next'
 
-import {PageLayout} from '@/components/PageLayout/PageLayout'
-import {Posts} from '@/components/Posts/Posts'
+import Page from '../strom/index'
 
-const Matik: NextPage = () => (
-  <PageLayout title="Novinky" contentWidth={1}>
-    <Posts />
-  </PageLayout>
-)
+const Matik: NextPage = () => {
+  return <Page />
+}
 
 export default Matik
diff --git a/src/pages/strom/index.tsx b/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="Novinky" contentWidth={1}>
+  <PageLayout title="Novinky" contentWidth={3}>
     <Posts />
   </PageLayout>
 )

diff --git a/src/theme.ts b/src/theme.ts
@@ -66,7 +66,7 @@ const _theme = createTheme({
           button1: 'span',
           button2: 'span',
           button3: 'span',
-          postTitle: 'span',
+          postTitle: 'h1',
           postBody: 'span',
         },
       },