Various links improvements (#309)

- Clickable post card image and title links to site - Clickable post time links to post - "Back to" links with arrows don't underline the arrow - Hide post card actions in most pages - Various styling simplifications
BesLogic · Nov 27, 2024 · 6c62881 · 6c62881
1 parent 3337629
commit 6c62881
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 43 deletions.
diff --git a/canopeum_frontend/src/assets/styles/GlobalStyles.scss b/canopeum_frontend/src/assets/styles/GlobalStyles.scss
@@ -27,6 +27,19 @@ body {
   background-image: url('@assets/images/TreeBackground.png');
 }
 
+// Causes teh inner elements of an anchor to be underlined instead of the anchor itself
+// Useful to get partial underline by adding text-decoration-none to an inner-element
+.link-inner-underline {
+  &:active,
+  &:focus,
+  &:hover {
+    text-decoration: none;
+    * {
+      text-decoration: underline;
+    }
+  }
+}
+
 // Named after https://getbootstrap.com/docs/5.2/utilities/text/#font-size
 .fs-small {
   font-size: 0.875rem;

diff --git a/canopeum_frontend/src/components/auth/AuthPageLayout.tsx b/canopeum_frontend/src/components/auth/AuthPageLayout.tsx
@@ -29,14 +29,14 @@ const AuthPageLayout = ({ children }: Props) => {
         overflow-y-auto
       '>
         {children}
-        <div className='mt-4'>
-          <Link className='d-flex align-items-center' to={appRoutes.map}>
-            <span className='material-symbols-outlined text-primary'>arrow_back</span>
-            <span className='text-primary'>
-              {translate('auth.back-to-map')}
-            </span>
-          </Link>
-        </div>
+        <Link className='mt-4 d-flex align-items-center link-inner-underline' to={appRoutes.map}>
+          <span className='material-symbols-outlined text-primary text-decoration-none'>
+            arrow_back
+          </span>
+          <span className='text-primary'>
+            {translate('auth.back-to-map')}
+          </span>
+        </Link>
       </div>
     </div>
   )

diff --git a/canopeum_frontend/src/components/social/PostCard.tsx b/canopeum_frontend/src/components/social/PostCard.tsx
@@ -1,5 +1,6 @@
 import { useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 import { Dropdown, Popover } from 'rsuite'
 import DropdownMenu from 'rsuite/esm/Dropdown/DropdownMenu'
 import type { OverlayTriggerHandle } from 'rsuite/esm/internals/Picker'
@@ -13,20 +14,21 @@ import ConfirmationDialog from '@components/dialogs/ConfirmationDialog'
 import TextExpansion from '@components/inputs/TextExpansion'
 import PostCommentsDialog from '@components/social/PostCommentsDialog'
 import SharePostDialog from '@components/social/SharePostDialog'
+import { appRoutes } from '@constants/routes.constant'
 import useApiClient from '@hooks/ApiClientHook'
 import type { PageViewMode } from '@models/PageViewMode.type'
 import type { Post } from '@services/api'
 import usePostsStore from '@store/postsStore'
 
 type Props = {
   readonly post: Post,
-  readonly deletePost?: (postId: number) => void,
+  readonly showActions?: boolean,
 }
 
-const PostCard = ({ post, deletePost }: Props) => {
+const PostCard = ({ post, showActions }: Props) => {
   const { t } = useTranslation()
   const { formatDate } = useContext(LanguageContext)
-  const { toggleLike } = usePostsStore()
+  const { toggleLike, deletePost } = usePostsStore()
   const { getApiClient } = useApiClient()
   const { openAlertSnackbar } = useContext(SnackbarContext)
   const { currentUser } = useContext(AuthenticationContext)
@@ -53,7 +55,7 @@ const PostCard = ({ post, deletePost }: Props) => {
   const onDeletePostConfirmation = async (proceed: boolean) => {
     if (proceed) {
       await getApiClient().postClient.delete(post.id)
-      deletePost?.(post.id)
+      deletePost(post.id)
       openAlertSnackbar('Post deleted successfully', { severity: 'success' })
     }
     setConfirmPostDeleteOpen(false)
@@ -70,9 +72,7 @@ const PostCard = ({ post, deletePost }: Props) => {
   }
 
   const actionsPopover = (
-    <Popover
-      style={{ width: 'fit-content' }}
-    >
+    <Popover style={{ width: 'fit-content' }}>
       <DropdownMenu>
         <Dropdown.Item>
           <span className='material-symbols-outlined align-middle'>edit_square</span>{' '}
@@ -90,19 +90,23 @@ const PostCard = ({ post, deletePost }: Props) => {
     <div className='card'>
       <div className='card-body d-flex flex-column gap-3'>
         <div className='d-flex justify-content-start align-items-center gap-2'>
-          <img
-            alt='site'
-            className='rounded-circle'
-            src={post.site.image.asset}
-            style={{ height: '48px', width: '48px' }}
-          />
+          <Link to={appRoutes.site(post.site.id)}>
+            <img
+              alt='site'
+              className='rounded-circle'
+              src={post.site.image.asset}
+              style={{ height: '3em', width: '3em' }}
+            />
+          </Link>
           <div className='d-flex flex-column'>
-            <h6 className='text-uppercase fw-bold mb-1'>{post.site.name}</h6>
-            <span className='text-muted initialism'>
+            <h6 className='text-uppercase fw-bold mb-1'>
+              <Link to={appRoutes.site(post.site.id)}>{post.site.name}</Link>
+            </h6>
+            <Link className='text-muted initialism' to={appRoutes.postDetail(post.id)}>
               {formatDate(post.createdAt, { dateStyle: 'short' })}
-            </span>
+            </Link>
           </div>
-          {viewMode === 'admin' && (
+          {showActions && viewMode === 'admin' && (
             <>
               <Whisper
                 placement='bottomEnd'

diff --git a/canopeum_frontend/src/pages/Login.tsx b/canopeum_frontend/src/pages/Login.tsx
@@ -139,24 +139,21 @@ const Login = () => {
 
         {loginError && <span className='help-block text-danger'>{loginError}</span>}
 
-        <div className='w-100'>
+        <div className='mt-4'>
           <button
-            className='btn btn-primary w-100'
+            className='btn btn-primary w-100 my-2'
             onClick={onLoginClick}
-            style={{ margin: '40px 0px 10px' }}
             type='submit'
           >
             {translate('auth.log-in')}
           </button>
 
-          <Link className='w-100' to={appRoutes.register}>
-            <button
-              className='btn btn-outline-primary w-100'
-              style={{ margin: '10px 0px 10px' }}
-              type='button'
-            >
-              {translate('auth.sign-up')}
-            </button>
+          <Link
+            className='btn btn-outline-primary w-100 my-2 text-decoration-none'
+            to={appRoutes.register}
+            type='button'
+          >
+            {translate('auth.sign-up')}
           </Link>
         </div>
       </div>

diff --git a/canopeum_frontend/src/pages/PostDetailsPage.tsx b/canopeum_frontend/src/pages/PostDetailsPage.tsx
@@ -75,10 +75,10 @@ const PostDetailsPage = () => {
   return (
     <div className='container py-5'>
       <Link
-        className='mb-3 d-flex align-items-center text-light'
+        className='mb-3 d-flex align-items-center text-light link-inner-underline'
         to={appRoutes.siteSocial(postDetail.site.id)}
       >
-        <span className='material-symbols-outlined'>arrow_back</span>
+        <span className='material-symbols-outlined text-decoration-none'>arrow_back</span>
         <span className='ms-1'>{translate('posts.back-to-social')}</span>
       </Link>
 

diff --git a/canopeum_frontend/src/pages/SiteSocialPage.tsx b/canopeum_frontend/src/pages/SiteSocialPage.tsx
@@ -25,7 +25,7 @@ const SiteSocialPage = () => {
   const { t } = useTranslation()
   const { siteId: siteIdParam } = useParams()
   const { currentUser } = useContext(AuthenticationContext)
-  const { posts, addPost, deletePost } = usePostsStore()
+  const { posts, addPost } = usePostsStore()
   const { getApiClient } = useApiClient()
   const scrollableContainerRef = useRef<HTMLDivElement>(null)
 
@@ -99,8 +99,6 @@ const SiteSocialPage = () => {
 
   const addNewPost = (newPost: Post) => addPost(newPost)
 
-  const handleDeletePost = (postId: number) => deletePost(postId)
-
   useEffect((): void => {
     void fetchSiteData(siteId)
     setSiteIds([siteId])
@@ -201,7 +199,11 @@ const SiteSocialPage = () => {
                       </div>
                     )
                     : sitePosts.map(post => (
-                      <PostCard deletePost={handleDeletePost} key={post.id} post={post} />
+                      <PostCard
+                        key={post.id}
+                        post={post}
+                        showActions
+                      />
                     )))}
               </div>
 

diff --git a/canopeum_frontend/src/store/postsStore.ts b/canopeum_frontend/src/store/postsStore.ts
@@ -17,7 +17,7 @@ type Action = {
 
 const usePostsStore = create<Action & PostsState>(set => ({
   posts: [],
-  setPosts: posts => set(_state => ({ posts })),
+  setPosts: posts => set(() => ({ posts })),
   addPost: newPost => set(state => ({ posts: [newPost, ...state.posts] })),
   deletePost: postId => set(state => ({ posts: state.posts.filter(post => post.id !== postId) })),
   morePostsLoaded: (newPosts: Post[]) => set(state => ({ posts: [...state.posts, ...newPosts] })),