Rework new post widget, dashboard page, profile page

apps/duality-social-react/src/components/dashboard-page.tsx

@@ -13,6 +13,7 @@ import {
   useTheme,
 } from '@mui/material';
 import Feed from './feed';
+import NewPost from './new-post';
 
 const DashboardPage: React.FC = () => {
   const theme = useTheme();
@@ -51,9 +52,15 @@ const DashboardPage: React.FC = () => {
           </Typography>
         </Paper>
 
+        <Box display="flex" flexDirection="column" gap={3}>
+          <Paper sx={{ p: 2 }}>
+            <NewPost isBlogPost={false} />
+          </Paper>
+        </Box>
+
         {/* Main content area */}
         <Box display="flex" gap={3} flexDirection={{ xs: 'column', md: 'row' }}>
-          <Paper sx={{ p: 2 }}>
+          <Paper sx={{ p: 2, flex: 1 }}>
             <Typography variant="h6" color="primary" gutterBottom>
               Your Feed
             </Typography>

apps/duality-social-react/src/components/feed.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import authenticatedApi from '../services/authenticated-api';
 import { Container, Typography, CircularProgress } from '@mui/material';
 import Post from './post';
-import NewPost from './new-post';
 import { getToken, verifyToken } from '../utils/auth';
 import { IFeedPost } from '@duality-social/duality-social-lib';
 
@@ -39,11 +38,10 @@ const Feed: React.FC = () => {
 
   return (
     <Container maxWidth="md">
-      <NewPost isBlogPost={true} />
       {posts && posts.length > 0 ? (
         posts.map((post) => <Post key={post.id?.toString()} post={post} />)
       ) : (
-        <Typography>No posts to display</Typography>
+        <Typography textAlign="center">No posts to display</Typography>
       )}
     </Container>
   );

apps/duality-social-react/src/components/live-post-preview.tsx

@@ -13,7 +13,7 @@ const LivePostPreview: React.FC<LivePostPreviewProps> = ({ content, isBlogPost }
   useEffect(() => {
     setParsedContent(parsePostContent(content, isBlogPost));
     console.log('Parsed content updated:', parsedContent); // for debugging purposes only, remove in production code.
-  }, [content, isBlogPost]);
+  }, [content, isBlogPost, parsedContent]);
 
   return (
     <Box mt={2}>

apps/duality-social-react/src/components/new-post.tsx

@@ -120,6 +120,11 @@ const NewPost: React.FC<NewPostProps> = ({
 
   return (
     <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 2 }}>
+      <Box sx={{ mt: 2 }}>
+        <Typography variant="h6" color="primary" gutterBottom>
+          {isBlogPost ? 'New Blog Post' : 'New Post'}:
+        </Typography>
+      </Box>
       <TextField
         fullWidth
         multiline
@@ -133,13 +138,6 @@ const NewPost: React.FC<NewPostProps> = ({
           (parentPostId ? 'Write a reply' : "What's on your mind?")
         }
       />
-      <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
-        Need help with formatting? Check out our{' '}
-        <Link to="/help/post-format" target="_blank" rel="noopener noreferrer">
-          post formatting guide
-        </Link>
-        .
-      </Typography>
       {images.map((img, index) => (
         <ImagePreview
           key={index}
@@ -181,13 +179,23 @@ const NewPost: React.FC<NewPostProps> = ({
         onClose={() => setCropDialogOpen(false)}
         onSave={handleCropSave}
       />
-      <LivePostPreview content={formik.values.content} isBlogPost={isBlogPost} />
+      <LivePostPreview
+        content={formik.values.content}
+        isBlogPost={isBlogPost}
+      />
       <Typography variant="body2" sx={{ mt: 1, textAlign: 'right' }}>
         {getCharacterCount(formik.values.content, isBlogPost)}/
         {isBlogPost
           ? AppConstants.MaxBlogPostLength
           : AppConstants.MaxPostLength}
       </Typography>
+      <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
+        Need help with formatting? Check out our{' '}
+        <Link to="/help/post-format" target="_blank" rel="noopener noreferrer">
+          post formatting guide
+        </Link>
+        .
+      </Typography>
     </Box>
   );
 };

apps/duality-social-react/src/components/top-menu.tsx

@@ -17,7 +17,7 @@ import { CommentMenuOption, useMenu } from '../menu-context';
 import dualitySocialSymbol from '../assets/DSImageOnlySmall.png';
 
 const TopMenu: React.FC = () => {
-  const { isAuthenticated, logout } = useContext(AuthContext);
+  const { isAuthenticated, logout, user } = useContext(AuthContext);
   const { commentOptions } = useMenu();
   const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -141,7 +141,7 @@ const TopMenu: React.FC = () => {
               >
                 <MenuItem
                   onClick={() => {
-                    navigate('/profile');
+                    navigate(`/profile/${user?.username}`);
                     handleClose();
                   }}
                 >

apps/duality-social-react/src/components/user-profile-page.tsx

@@ -1,5 +1,5 @@
 // file: user-profile.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheckCircle } from '@awesome.me/kit-89ec609b07/icons/classic/regular';
 import {
@@ -18,35 +18,39 @@ import { IApiUserProfileResponse } from '@duality-social/duality-social-lib';
 import authenticatedApi from '../services/authenticated-api';
 import { useNavigate } from 'react-router-dom';
 import { getToken, verifyToken } from '../utils/auth';
+import { AuthContext } from '../auth-provider';
+import NewPost from './new-post';
 
 const UserProfilePage = () => {
+  const { user: authUser } = useContext(AuthContext);
   const [user, setUser] = useState<IApiUserProfileResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
 
-  const checkAuthentication = () => {
-    const token = getToken();
-    if (!token || !verifyToken(token)) {
-      navigate('/login');
-      return false;
-    }
-    return true;
-  };
+  const pageUsername = window.location.pathname.split('/').pop();
 
   useEffect(() => {
+    const checkAuthentication = () => {
+      const token = getToken();
+      if (!token || !verifyToken(token)) {
+        navigate('/login');
+        return false;
+      }
+      return true;
+    };
+
     const fetchData = async () => {
       if (checkAuthentication()) {
-        const username = window.location.pathname.split('/').pop();
-        if (username) {
-          await fetchUserProfile(username);
+        if (pageUsername) {
+          await fetchUserProfile(pageUsername);
         } else {
           setIsLoading(false);
         }
       }
     };
 
     fetchData();
-  }, []);
+  }, [navigate, pageUsername]);
 
   const fetchUserProfile = async (username: string) => {
     try {
@@ -59,6 +63,9 @@ const UserProfilePage = () => {
     }
   };
 
+  const isOwnProfile =
+    pageUsername && authUser?.username && pageUsername === authUser?.username;
+
   if (isLoading) {
     return (
       <Container maxWidth="sm">
@@ -160,6 +167,11 @@ const UserProfilePage = () => {
           </Typography>
         )}
       </Paper>
+      {user && isOwnProfile && (
+        <Box sx={{ mt: 2 }}>
+          <NewPost isBlogPost={true} />
+        </Box>
+      )}
     </Container>
   );
 };