Merge pull request #18 from chimobi-justice/ft/public-user-details

FEAT: get user public posts, finish protected/public route & user det…

README.md

@@ -2,3 +2,28 @@
 ## A Forum platform for problem solving, knowledge sharing and community builders, join others for sharing knowledge.
 
 ### API Docs [Api Docs](https://learn-hub-backend-api.onrender.com/api/docs)
+
+## Requirements
+
+The following tools are required in order to start the installation.
+
+- Node 
+- [Node](https://nodejs.org/en/download/package-manager/)
+
+## Installation
+
+1. Clone this repository with `git clone https://github.com/chimobi-justice/learn-hub.git`
+-   Change directories into learn-hub
+-   cd learn-hub
+2. Run `npm install` to install the Node dependencies
+3. Create the .env file by duplicating the .env.example file
+-   VITE_API_BASE_URL
+-  if clone the backend [learn-hub-backend](https://github.com/chimobi-justice/learn-hub-backend.git)  repo use the local server url or use the host backend url
+-  https://learn-hub-backend-api.onrender.com/api/v1
+4. Run the application 
+- npm run dev
+
+
+You can now visit the app in your browser by visiting [http://localhost:5173](http://localhost:5173).
+
+

src/App.tsx

@@ -25,10 +25,13 @@ import ArthoredArticles from '@pages/Users/AuthoredViews/Articles'
 import ShowArticle from '@pages/Articles/show'
 import CreateArticle from '@pages/Articles/create'
 
+import ShowUserPublicPosts from '@pages/Users/show'
+
 import Login from '@pages/Auth/Login'
 import Register from '@pages/Auth/Register'
 
 import PrivateRoute from './Route/privateRoute'
+import AuthRoute from './Route/AuthRoute'
 
 const routes = createBrowserRouter(
   createRoutesFromElements(
@@ -41,6 +44,8 @@ const routes = createBrowserRouter(
         <Route index path='/articles' element={<Articles />} />
         <Route index path='/articles/:slug/:id' element={<ShowArticle />} />
 
+        <Route index path='/user/:username' element={<ShowUserPublicPosts />} />
+
         {/* private route */}
         <Route path="/articles/new" element={<PrivateRoute element={<CreateArticle />} />} />
         <Route path="/articles/edit/:id" element={<PrivateRoute element={<EditArticle />} />} />
@@ -54,8 +59,8 @@ const routes = createBrowserRouter(
         <Route path="/me/settings/account/edit" element={<PrivateRoute element={<ProfileEdit />} />} />
         {/* end private route */}
 
-        <Route index path='/auth/login' element={<Login />} />
-        <Route index path='/auth/register' element={<Register />} />
+        <Route path="/auth/login" element={<AuthRoute element={<Login />} />} />
+        <Route path="/auth/register" element={<AuthRoute element={<Register />} />} />
 
         <Route index path='*' element={<NotFound />} />
       </Route>

src/Route/AuthRoute.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent, ReactElement, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useUser } from '@context/userContext'
+
+interface AuthRouteProps {
+  element: ReactElement;
+}
+
+const AuthRoute: FunctionComponent<AuthRouteProps> = ({ element }) => {
+  const navigate = useNavigate();
+
+  const getToken = !!localStorage.getItem("ucType_");
+
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (user && getToken) {
+      navigate('/', { replace: true});
+    }
+  }, [user, getToken, navigate]);
+
+  if (getToken) return null;
+
+  return element;
+}
+
+export default AuthRoute;

src/Route/privateRoute.tsx

@@ -1,8 +1,6 @@
 import { FunctionComponent, ReactElement } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 
-// import { useUser } from '@context/userContext'
-
 interface PrivateRouteProps {
   element: ReactElement;
 }

src/api/axiosInstance.ts

@@ -36,11 +36,8 @@ axiosInstance.interceptors.response.use(
         localStorage.removeItem('ucType_');
         location.href = '/auth/login'
       }
-      throw new Error(error?.response?.data?.message 
-          || error?.response?.status 
-          || error?.message 
-          || 'An unexpected error occurred');
+    return Promise.reject(error);
+
     }
-    return Promise.reject(new Error('An unexpected error occurred'));
   }
 );

src/api/endpoints/userEndpoints.ts

@@ -9,3 +9,5 @@ export const UPLOAD_PROFILE_AVATAR_ENDPOINT = `${API_BASE_URL}/users/accounts/up
 export const UPDATE_PASSWORD_ENDPOINT = `${API_BASE_URL}/users/accounts/update-password`;
 
 export const DELETE_ACCOUNT_ENDPOINT = `${API_BASE_URL}/users/accounts/delete`;
+
+export const PUBLIC_USER_ENDPOINT = `${API_BASE_URL}/users`;

src/api/types/messageResponse.ts

@@ -1,4 +1,3 @@
 export interface MessageResponse {
   message: string;
-  // data: T
 }

src/api/types/user/index.ts

@@ -1,16 +1,18 @@
 export interface UserResponse {
-  id: string | number;
-  fullname: string;
-  email: string;
-  username: string;
-  twitter: string;
-  avatar: string;
-  gitHub: string;
-  website: string;
-  headlines: string;
-  state: string;
-  country: string;
-  bio: string;
+  data: {
+    id: string | number;
+    fullname: string;
+    email: string;
+    username: string;
+    twitter: string;
+    avatar: string;
+    gitHub: string;
+    website: string;
+    profile_headlines: string;
+    state: string;
+    country: string;
+    bio: string;
+  }
 }
 
 export interface UpdateProfileRequest {
@@ -35,16 +37,8 @@ export interface UpdateProfileAvatarRequest {
   avatar: string;
 }
 
-export interface UpdateProfileAvatarResponse {
-  message: string;
-}
-
 export interface UpdatePasswordRequest {
   current_password: string;
   password: string;
   password_confirmation: string;
 }
-
-export interface UpdatePasswordResponse {
-  message: string;
-}

src/components/ArticleCard/Articles.tsx

@@ -14,7 +14,7 @@ import { CiEdit } from 'react-icons/ci'
 import { MdDeleteOutline } from 'react-icons/md'
 
 import truncate from '@helpers/truncate'
-import { stripTags } from '@helpers/stripTags';
+import { stripTags } from '@helpers/stripTags'
 
 interface IProps {
   articleImg: string;
@@ -63,9 +63,9 @@ const ArticlesCard: FunctionComponent<IProps> = ({
             />
           </Box>
 
-          <Box 
-            width={{ base: "100%", md: "65%" }} 
-            p={"5px"} 
+          <Box
+            width={{ base: "100%", md: "65%" }}
+            p={"10px"}
             display={"flex"}
             gap={2}
             justifyContent={"space-between"}
@@ -88,38 +88,36 @@ const ArticlesCard: FunctionComponent<IProps> = ({
                 fontSize={"14px"}
                 lineHeight={"1.7em"}
                 color={"#0009"}
-                dangerouslySetInnerHTML={stripTags(truncate(description, 250))}
+                dangerouslySetInnerHTML={stripTags(truncate(description, 200))}
               />
 
-              <Flex flex="1" gap={2} alignItems="center" flexWrap="wrap" my={"12px"}>
-                {authorUsername && authorAvatar && (
-                  <Link to={`/user/${authorUsername}`}>
-                    <Avatar size={"xs"} name={authorFullname} src={authorAvatar} />
-                  </Link>
-                )}
-
-                <Box>
+              <Flex flex="1" gap={2} my={"12px"} flexDirection={{ base: "column", md: "row" }}>
+                <Box display={"flex"} gap={3} alignItems={"center"}>
                   {authorUsername && (
+                    <Link to={`/user/${authorUsername}`}>
+                      <Avatar size={"xs"} name={authorFullname} src={authorAvatar} />
+                    </Link>
+                  )}
 
+                  {authorUsername && (
                     <Heading size="xs" fontSize={"13px"}>
                       <Link to={`/user/${authorUsername}`}>
                         {authorUsername}
                       </Link>
                     </Heading>
                   )}
+                </Box>
 
-                  <Box display={"flex"} gap={3}>
-                    {authorProfileHeadlines && (
-                      <Text fontSize={"12px"} color={"#0009"}>{truncate(authorProfileHeadlines, 60)}</Text>
-                    )}
+                <Box display={"flex"} gap={3} alignItems={"center"}>
+                  {authorProfileHeadlines && (
+                    <Text fontSize={"12px"} color={"#0009"}>{truncate(authorProfileHeadlines, 60)}</Text>
+                  )}
 
-                    <Text fontSize={"12px"} color={"#0009"}>{read_time}</Text>
-                  </Box>
+                  <Text fontSize={"12px"} color={"#0009"}>{read_time}</Text>
                 </Box>
-
               </Flex>
             </Box>
-            
+
             {isOwner && (
               <Flex p={"5px"} gap={2}>
                 <Box>

src/components/Footer/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@chakra-ui/react'
 import { FaXTwitter } from 'react-icons/fa6'
 import { IoLogoLinkedin } from 'react-icons/io'
+import { FaGithub } from "react-icons/fa";
 
 import { colors } from '../../colors'
 
@@ -122,6 +123,17 @@ const Footer: FunctionComponent = () => {
                   <IoLogoLinkedin style={{ fontSize: "20px" }} />LinkedIn
                 </Link>
               </ListItem>
+              <ListItem>
+                <Link
+                  to="https://github.com/chimobi-justice/learn-hub"
+                  target='_blank'
+                  style={{
+                    display: "flex",
+                    gap: "3px"
+                  }}>
+                  <FaGithub style={{ fontSize: "20px" }} />Github
+                </Link>
+              </ListItem>
             </List>
           </Box>
         </SimpleGrid>

src/components/HeroSection/index.tsx

@@ -99,6 +99,7 @@ const HeroSection: FunctionComponent = () => {
           <Box
             width={{ base: "100%", lg: "50%" }}
             mt={{ base: "25px", lg: "2px" }}
+            display={{ base: "none", md: "block" }}
           >
             <Image
               src={HeroImg}

src/components/NavBar/navBarLg.tsx

@@ -16,13 +16,13 @@ import {
 import { FaRegUser } from 'react-icons/fa'
 import { IoIosArrowUp, IoIosArrowDown } from 'react-icons/io'
 
-import Button from '@components/Button'
+import { Button, Search } from '@components/index'
 import { colors } from '../../colors'
 import { Menu } from '@constant/Menu'
 import { useUser } from '@context/userContext'
 import { useSignOut } from '@hooks/auth/useSignOut'
 
-const NavBarLg: FunctionComponent = () => {  
+const NavBarLg: FunctionComponent = () => {
   const { user } = useUser();
   const { signOutMutation } = useSignOut()
 
@@ -43,16 +43,20 @@ const NavBarLg: FunctionComponent = () => {
           justifyContent="space-between"
           py={"20px"}
         >
-          <Link to="/">
-            <Heading
-              fontStyle={"italic"}
-              fontWeight={"bold"}
-              as="h4"
-              color={colors.primary}
-            >
-              Learn <Text as="span" color={"#000"}>Hub</Text>
-            </Heading>
-          </Link>
+          <Box display={"flex"} gap={4} alignItems={"center"}>
+            <Link to="/">
+              <Heading
+                fontStyle={"italic"}
+                fontWeight={"bold"}
+                as="h4"
+                color={colors.primary}
+              >
+                Learn <Text as="span" color={"#000"}>Hub</Text>
+              </Heading>
+            </Link>
+
+            <Search />
+          </Box>
 
           <Box
             display={"inline-flex"}
@@ -84,6 +88,7 @@ const NavBarLg: FunctionComponent = () => {
                           <Avatar
                             size={"sm"}
                             name={user?.data?.fullname}
+                            src={user?.data?.avatar}
                           />
                           <Box>
                             <Text

src/components/NavBar/navBarSm.tsx

@@ -26,7 +26,7 @@ import {
 } from 'react-icons/io'
 
 import { colors } from '../../colors'
-import { Button } from '@components/index'
+import { Button, Search } from '@components/index'
 import { Menu } from '@constant/Menu'
 import { useUser } from '@context/userContext'
 import { useSignOut } from '@hooks/auth/useSignOut'
@@ -119,6 +119,7 @@ const NavBarSm: FunctionComponent = () => {
             </Box>
 
             <Box p={"10px"}>
+              <Search />
               <List alignItems="start" mt="2rem" w="100%">
                 {Menu?.map((menu) => (
                   <ListItem w="100%" mb="20px" key={menu.id}>
@@ -145,6 +146,7 @@ const NavBarSm: FunctionComponent = () => {
                                 <Avatar
                                   size={"sm"}
                                   name={user?.data?.fullname}
+                                  src={user?.data?.avatar}
                                 />
                                 <Box>
                                   <Text

src/components/ThreadCard/components/ThreadCardHeader.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react'
 import { Link } from 'react-router-dom'
 import { Avatar, Flex, Text } from '@chakra-ui/react'
+import truncate from '@helpers/truncate';
 
 interface ThreadCardHeaderProps {
   author: {
@@ -12,12 +13,12 @@ interface ThreadCardHeaderProps {
 }
 
 const ThreadCardHeader: FunctionComponent<ThreadCardHeaderProps> = ({ author, createdAt }) => (
-  <Flex flex="1" gap={2} alignItems="center" flexWrap="wrap">
-    <Link to={`/user/${author.username}`}>
-      <Avatar size="xs" name={author.fullname} src={author.avatar} />
+  <Flex flex="1" gap={2} alignItems="center" flexWrap="wrap" mt={"15px"}>
+    <Link to={`/user/${author?.username}`}>
+      <Avatar size="xs" name={author?.fullname} src={author?.avatar} />
     </Link>
     <Text fontSize="12px" color="#0009" _hover={{ textDecoration: 'underline' }}>
-      <Link to={`/user/${author.username}`}>By: {author.fullname}</Link>
+      <Link to={`/user/${author?.username}`}>By: {truncate(author?.fullname, 20)}</Link>
     </Text>
     <Text fontSize="12px" fontWeight="300" color="#0009">
       <Text as="span" color="#000" mr="2px">posted</Text> {createdAt}