Feedback Slice, QuoteBubble and some Redux stuff

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/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

@@ -15,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

@@ -12,8 +12,8 @@ const Main: FC<MainProps> = ({ children, isDesktop }) => {
     <Box
       component='main'
       sx={{
-        // pt: `${HEADER.H_MOBILE + SPACING.SM}px`,
-        // pb: `${HEADER.H_MOBILE + SPACING.SM}px`,
+        pt: `${HEADER.H_MOBILE + SPACING.SM}px`,
+        pb: `${HEADER.H_MOBILE + SPACING.SM}px`,
         ...(isDesktop && {
           // px: 2,
           pb: `${HEADER.H_DASHBOARD_DESKTOP + SPACING.SM}px`

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'

src/section/bootcamp/style.tsx

@@ -1,6 +1,7 @@
+import { FC } from 'react'
 import { styled } from '@mui/material/styles'
 import { m } from 'framer-motion'
-import { TableRow, TableContainer, TableCell, Collapse, Grid } from '@mui/material'
+import { Avatar, Box, TableRow, TableContainer, TableCell, Collapse, Grid } from '@mui/material'
 import { KEY } from 'constant'
 
 export const SRoot = styled(m.div)({
@@ -47,3 +48,50 @@ export const SCollapseGrid = styled(Grid)(({ theme }) => ({
   height: '100%',
   overflow: KEY.AUTO
 }))
+
+interface QuoteBubbleProps {
+  color: string
+  children?: any
+}
+
+// export const SRootBox: FC<QuoteBubbleProps> = styled(({ color, ...other }: { color: string }) => <Box {...other} />)(
+//   ({ color }: { color: string }) => ({
+//     maxWidth: '400px',
+//     margin: '0 auto',
+//     padding: '16px',
+//     position: 'relative',
+//     borderRadius: '4px',
+//     background: '#000'
+//   })
+// )
+
+export const SRootBox = styled(Box)(({ theme }) => ({
+  maxWidth: '400px',
+  margin: '0 auto',
+  padding: '16px',
+  position: 'relative',
+  borderRadius: '4px',
+  background: theme.palette.common.black
+}))
+
+export const SQuoteBox = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  padding: 16
+}))
+
+export const SAvatar = styled(Avatar)(({ theme }) => ({
+  marginRight: 8
+}))
+
+export const SQuoteArrowBox: FC<QuoteBubbleProps> = styled(({ color, ...other }: { color: string }) => <Box {...other} />)(
+  ({ color }: { color: string }) => ({
+    width: 0,
+    height: 0,
+    borderLeft: '10px solid transparent',
+    borderRight: '10px solid transparent',
+    borderTop: `10px solid ${color}`,
+    margin: '0 auto',
+    position: 'relative',
+    right: '50px'
+  })
+)