Feature/26 add post feature (#65)

Co-authored-by: Mathias Havekes <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Theo Auffeuvre <[email protected]>

README.md

@@ -102,9 +102,8 @@ For backend
 
    ```shell
    # In another CLI
-   npm install -g @mockoon/cli
-   cd releaf-canopeum/canopeum_frontend
-   mockoon-cli start --data canopeum-mockoon.json
+   cd canopeum_frontend
+   npm run mockoon
    ```
 
 ### Folder Architecture

canopeum_frontend/src/App.scss

@@ -60,3 +60,23 @@ body {
   display: flex;
   text-align: center;
 }
+
+.btn-secondary {
+  color: #fff;
+}
+
+.btn-secondary:hover {
+  color: #fff;
+}
+
+.form-control::placeholder {
+  color: map-get($theme-colors, light-gray);
+}
+
+.form-control {
+  color: $default-text-color;
+}
+
+.form-control:focus {
+  color: $default-text-color;
+}

canopeum_frontend/src/assets/styles/theme-variables.scss

@@ -43,7 +43,8 @@ $theme-colors: (
   warning: $yellow,
   danger: $red,
   light: $gray-100,
-  dark: $gray-800
+  dark: $gray-800,
+  light-gray: #818181,
 );
 $colors: (
   blue: $blue,
@@ -59,7 +60,7 @@ $colors: (
   white: $white,
   gray: $gray-600,
   gray-dark: $gray-800,
-  cream: $cream
+  cream: $cream,
 );
 $theme-color-interval: 8%;
 $table-variants: (

canopeum_frontend/src/components/CreatePostWidget.tsx

@@ -0,0 +1,30 @@
+import type { SiteSocial } from '../services/api'
+
+const CreatePostWidget = (props: { readonly site: SiteSocial }) => {
+  /* eslint-disable @typescript-eslint/no-unused-vars -- We'll use this eventually */
+  // @ts-expect-error: We'll use this eventually
+  const { site } = props
+  /* eslint-enable @typescript-eslint/no-unused-vars -- We'll use this eventually */
+
+  return (
+    <div className='bg-white rounded-2 px-5 py-4 d-flex flex-column gap-2'>
+      <div className='d-flex justify-content-between'>
+        <h2>New Post</h2>
+        <button className='btn btn-secondary' type='button'>
+          Publish
+        </button>
+      </div>
+      <div className='position-relative'>
+        <div className='position-absolute top-0 left-0 m-3 d-flex gap-3 fs-3'>
+          <span className='material-symbols-outlined'>mood</span>
+          <span className='material-symbols-outlined'>add_a_photo</span>
+          <span className='material-symbols-outlined'>smart_display</span>
+        </div>
+        <textarea className='form-control pt-5' id='exampleFormControlTextarea1' placeholder='Post a New Message...'>
+        </textarea>
+      </div>
+    </div>
+  )
+}
+
+export default CreatePostWidget

canopeum_frontend/src/components/PostWidget.tsx

@@ -0,0 +1,40 @@
+import canopeumLogo from '@assets/images/Canopeum_Logo.jpg'
+
+import type { Post } from '../services/api'
+import { formatDate } from '../utils/dateFormatter'
+
+const PostWidget = (props: { readonly post: Post }) => {
+  const { post } = props
+
+  return (
+    <div className='bg-white rounded-2 px-5 py-4 d-flex flex-column gap-3'>
+      <div className='d-flex justify-content-start gap-2'>
+        <img alt='site' className='rounded-circle' src={canopeumLogo} style={{ height: '48px', width: '48px' }} />
+        <div className='d-flex flex-column'>
+          <div>{post.site.name}</div>
+          {post.createdAt && <div>{formatDate(post.createdAt.toISOString())}</div>}
+        </div>
+      </div>
+
+      <div>{post.body}</div>
+
+      <div className='d-flex justify-content-end gap-4'>
+        <div className='d-flex gap-2'>
+          <span className='material-symbols-outlined'>eco</span>
+          <div>{post.likeCount}</div>
+        </div>
+        <div className='d-flex gap-2'>
+          <span className='material-symbols-outlined'>sms</span>
+          <div>{post.commentCount}</div>
+        </div>
+        <div className='d-flex gap-2'>
+          <span className='material-symbols-outlined'>share</span>
+          <div>{post.shareCount}</div>
+        </div>
+        <div />
+      </div>
+    </div>
+  )
+}
+
+export default PostWidget

canopeum_frontend/src/pages/MapSite.tsx

@@ -1,10 +1,12 @@
 import { AuthenticationContext } from '@components/context/AuthenticationContext'
 import SiteSummaryCard from '@components/site/SiteSummaryCard'
-import type { SiteSocial } from '@services/api'
+import type { Post, SiteSocial } from '@services/api'
 import api from '@services/apiInterface'
 import { ensureError } from '@services/errors'
 import { useContext, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import CreatePostWidget from '../components/CreatePostWidget'
+import PostWidget from '../components/PostWidget'
 
 const MapSite = () => {
   const { siteId } = useParams()
@@ -58,8 +60,15 @@ const MapSite = () => {
             </div>
           </div>
           <div className='col-8'>
-            <div className='bg-white rounded-2 px-3 py-2'>
-              <h1>Right</h1>
+            <div className='rounded-2 d-flex flex-column gap-2'>
+              {site && (
+                <>
+                  <CreatePostWidget site={site} />
+                  <div className='d-flex flex-column gap-2'>
+                    {site.posts?.map((post: Post) => <PostWidget key={post.id} post={post} />)}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>

canopeum_frontend/src/utils/dateFormatter.ts

@@ -0,0 +1,11 @@
+export const formatDate = (dateIso: string): string => {
+  const date = new Date(dateIso)
+
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+
+  return `${day}-${month}-${year} ${hours}:${minutes}`
+}