Feedback Slice, Feedback Quote bubble component, and Perf related

package.json

@@ -25,7 +25,9 @@
     "@types/nprogress": "^0.2.3",
     "@types/react-avatar-editor": "^13.0.2",
     "axios": "^1.6.8",
+    "colors": "^1.4.0",
     "framer-motion": "^11.0.8",
+    "good-logs": "^1.2.3",
     "gsap": "^3.12.5",
     "markdown-to-jsx": "^7.4.1",
     "notistack": "^3.0.1",

src/component/form/app-form.tsx

@@ -14,17 +14,18 @@ export default function AppForm({ isLogin, size = 'sm', children, ...props }: Ap
     <Box
       sx={{
         display: 'flex',
-        backgroundImage: `url(${ASSET.PATTERN_BG})`,
+        // backgroundImage: `url(${ASSET.PATTERN_BG})`,
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'cover',
+        backgroundColor: 'common.black',
         margin: 'auto',
         fontSize: '1.2rem',
         color: 'common.white'
       }}>
       <Container maxWidth={size} sx={{ width: isLogin ? 500 : 'auto' }}>
         <Box sx={{ height: '100vh', alignContent: 'center' }}>
           <Paper
-            background="dark"
+            background='dark'
             sx={{
               py: { xs: 4, md: 8 },
               px: { xs: 3, md: 6 },

src/component/navbar/app-appbar.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react'
-import { Link as RouterLink, useParams, useLocation } from 'react-router-dom'
+import { useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useSelector } from 'react-redux'
-import { createSelector } from 'reselect'
 import { m } from 'framer-motion'
 import { Box, Link, IconButton, Stack } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
-import { Button } from 'component'
 import AppBar from './appbar'
 import { MotionLazyContainer, MotionText, varFade } from 'component/motion'
 import { SToolbar, SBox } from 'theme/style'
@@ -15,8 +13,9 @@ import { NavDrawer } from 'component/navbar'
 import { Logo } from 'component/logo'
 import { AccountPopover } from 'component/navbar'
 import { GLOBAL } from 'config'
-import { BUTTON } from 'constant'
+import { BUTTON, BUTTON_VARIANT, FLEX, TYPOGRAPHY, VARIANT } from 'constant'
 import { RootPath, AuthPath } from 'route/path'
+import { SRegisterButton } from './style'
 
 const rightLink = {
   fontSize: 12,
@@ -51,7 +50,7 @@ function AppNavBar(): JSX.Element {
           <Logo width={40} onMouseEnter={() => setIsLogoHovered(true)} onMouseLeave={() => setIsLogoHovered(false)} />
 
           <Link
-            variant='body1'
+            variant={TYPOGRAPHY.BODY1}
             underline='none'
             href={RootPath.DASHBOARD}
             sx={{
@@ -112,33 +111,18 @@ function AppNavBar(): JSX.Element {
                   sx={{
                     py: 1,
                     flex: 1,
-                    display: 'flex',
-                    justifyContent: 'flex-end'
+                    display: FLEX.FLEX,
+                    justifyContent: FLEX.FLEX_END
                   }}></Box>
               ) : (
                 <AnimatedButton to={AuthPath.LOG_IN} text={BUTTON.LOG_IN} style={rightLink} />
               )}
               <Box>
                 {!user && !isRegisterRoute && (
-                  <Link variant='h6' underline='none' href={AuthPath.REGISTER} sx={{ ...rightLink, color: 'secondary.main' }}>
-                    <Button
-                      variant='contained'
-                      color='primary'
-                      sx={{
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        padding: '.1em 1em',
-                        borderRadius: 0,
-                        textTransform: 'none',
-                        border: '1px solid transparent',
-                        '&:hover': {
-                          bgcolor: 'secondary.main',
-                          color: 'common.black',
-                          border: '1px solid'
-                        }
-                      }}>
+                  <Link variant={TYPOGRAPHY.H6} underline='none' href={AuthPath.REGISTER} sx={{ ...rightLink, color: 'secondary.main' }}>
+                    <SRegisterButton variant={BUTTON_VARIANT.CONTAINED} color='primary'>
                       {BUTTON.REGISTER}
-                    </Button>
+                    </SRegisterButton>
                   </Link>
                 )}
               </Box>

src/component/navbar/style.tsx

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material/styles'
+import { Button } from '@mui/material'
+
+export const SRegisterButton = styled(Button)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 'bold',
+  padding: '.1em 1em',
+  borderRadius: 0,
+  textTransform: 'none',
+  border: '1px solid transparent',
+  '&:hover': {
+    bgcolor: theme.palette.secondary.main,
+    color: theme.palette.common.black,
+    border: '1px solid'
+  }
+}))

src/constant/label.ts

@@ -1,6 +1,7 @@
 import { KEY } from 'constant'
 
 const LABEL = {
+  APPLY_FOR_COURSE: 'Apply for this Course',
   GO_BACK: 'Go Back',
   LOG_IN: 'Log In',
   LOG_OUT: 'Log Out',
@@ -14,9 +15,11 @@ const LABEL = {
   REGISTER: 'Register',
   RESET_PASSWORD: 'Reset Password',
   COURSE_COVERED: 'Course certifications covered',
+  FEEDBACKS: 'Feedbacks',
   HOME: 'Home',
   LOCATION: 'Location',
   CAREER: 'Careers',
+  TAGS: ' Tags: ',
   CONTACT: 'Contact',
   ALREADY_MEMBER: `Already a member? `,
   NOT_A_MEMBER: `Not a member yet? `,

src/constant/placeholder.ts

@@ -16,6 +16,7 @@ enum PLACEHOLDER {
   NO_MINIMUM_SKILL = 'No minimum skill required',
   NO_COURSE_AVAILABLE = 'No course available',
   NO_LOCATION = 'No location provided',
+  NO_FEEDBACK = 'No feedbacks for this bootcamp',
   NO_CAREER = 'No career provided',
 
   // @bootcamp search form

src/constant/routing/routing.ts

@@ -15,6 +15,7 @@ enum ROUTING {
   REGISTER = 'register',
   ACCOUNT = 'account',
   USER = 'user',
+  FEEDBACK = 'feedback',
   FORGOT_PASSWORD = 'forgot-password',
   RESET_PASSWORD = 'reset-password',
   RESET_TOKEN = 'reset-token',

src/page/app/main.tsx

@@ -15,7 +15,7 @@ const Main: FC<MainProps> = ({ children, isDesktop }) => {
         pt: `${HEADER.H_MOBILE + SPACING.SM}px`,
         pb: `${HEADER.H_MOBILE + SPACING.SM}px`,
         ...(isDesktop && {
-          px: 2,
+          // px: 2,
           pb: `${HEADER.H_DASHBOARD_DESKTOP + SPACING.SM}px`
         })
       }}>

src/page/auth/log-in/log-in.tsx

@@ -81,14 +81,13 @@ function LogIn() {
         throw new Error(RESPONSE.error.INVALID_CREDENTIAL)
       }
     } catch (error: any) {
-      console.error('error : ', error || '')
       snack(error?.data?.message, { variant: COLOR.ERROR })
       reset()
-      if (error.message === RESPONSE.error.INVALID_CREDENTIAL) {
+      if (error?.data?.message === RESPONSE.error.INVALID_CREDENTIAL) {
         setError(KEY.EMAIL, { message: RESPONSE.error.EMAIL_INVALID })
         setError(KEY.PASSWORD, { message: RESPONSE.error.PASSWORD_INVALID })
       } else {
-        snack(error.message, {
+        snack(error?.data?.message, {
           variant: COLOR.ERROR
         })
         setError(KEY.EMAIL, { message: error.message })

src/page/bootcamp/bootcamp.tsx

@@ -1,21 +1,24 @@
-import { useState } from 'react'
+import { memo } from 'react'
+import { useSelector } from 'react-redux'
+import { dispatch } from 'store'
 import { m } from 'framer-motion'
 import { Pagination, Box, Grid } from '@mui/material'
 import { SCard } from 'theme/style'
 import { useGetAllBootcampQuery } from 'store/slice/bootcamp'
+import { setCurrentPage } from 'store/slice/bootcamp/bootcamp'
 import { BootcampSearch, BootcampCard } from 'section/bootcamp'
 import { MotionLazyContainer } from 'component/motion'
 import { SkeletonLoader } from 'component/skeleton'
 import { Typography } from 'component/typography'
 import { ASSET } from 'config'
-import { FLEX, KEY, LABEL, PLACEHOLDER } from 'constant'
+import { FLEX, KEY, LABEL, TYPOGRAPHY } from 'constant'
 
 function Bootcamp() {
-  const [currentPage, setCurrentPage] = useState(1)
+  const { currentPage } = useSelector((state: any) => state.bootcamp)
   const { data, error, isLoading } = useGetAllBootcampQuery()
 
   const handlePageChange = (event: any, value: any) => {
-    setCurrentPage(value)
+    dispatch(setCurrentPage(value))
   }
 
   return (
@@ -37,7 +40,7 @@ function Bootcamp() {
             }}>
             <img src={ASSET.TCCP_ICON} alt='logo' width={100} />
           </Box>
-          <Typography variant='h2' marked='center' align='center' component='h2'>
+          <Typography variant={TYPOGRAPHY.H2} marked='center' align='center' component='h2'>
             {LABEL.BOOTCAMP_PAGE_TITLE}
           </Typography>
         </Box>
@@ -56,12 +59,7 @@ function Bootcamp() {
               color='primary'
               sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}
             />
-            <SCard
-              sx={{
-                width: '100%',
-                display: 'flex',
-                bgcolor: 'transparent'
-              }}>
+            <SCard sx={{}}>
               <Grid container flexDirection='column' flex={1} sx={{ backgroundColor: 'transparent' }}>
                 {isLoading ? (
                   <SkeletonLoader cards={8} />
@@ -88,4 +86,4 @@ function Bootcamp() {
   )
 }
 
-export default Bootcamp
+export default memo(Bootcamp)

src/route/path.ts

@@ -12,6 +12,7 @@ export class ServerPath {
   static SERVER = GLOBAL.APP_SERVER
   static BOOTCAMP = ROUTING.BOOTCAMP
   static BOOTCAMP_ID = (bootcampId: string) => conNex(ROUTING.BOOTCAMP, bootcampId)
+  static BOOTCAMP_FEEDBACK = (bootcampId: string) => conNex(ROUTING.BOOTCAMP, bootcampId, ROUTING.FEEDBACK)
   static COURSE = ROUTING.COURSE
   static COURSE_ID = (courseId: string) => conNex(ROUTING.COURSE, courseId)
   static COURSE_BY_BOOTCAMP = (bootcampId: string) => conNex(ROUTING.BOOTCAMP, bootcampId, ROUTING.COURSE)
@@ -21,6 +22,8 @@ export class ServerPath {
   static AUTH_USER = conNex(ROUTING.AUTH, ROUTING.USER)
   static AUTH_SINGLE_USER = (userId: string) => conNex(ROUTING.AUTH, ROUTING.USER, userId)
   static AUTH_ACCOUNT = conNex(ROUTING.AUTH, ROUTING.ACCOUNT)
+  static FEEDBACK = ROUTING.FEEDBACK
+  static FEEDBACK_ID = (feedbackId: string) => conNex(ROUTING.FEEDBACK, feedbackId)
 }
 
 export class RootPath {

src/section/bootcamp/index.ts

@@ -1,4 +1,3 @@
-export { default as Bootcamp } from './bootcamp'
 export { default as BootcampSearch } from './bootcamp-search'
 export { default as BootcampCard } from './bootcamp-card'
 export { default as BootcampCareer } from './bootcamp-career'