Calling page, Profile Page and navigate

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

README.md

@@ -1,3 +1,6 @@
+![Project Image](https://github.com/foverokavindz/chat-app-1/blob/main/public/projectImage.png?raw=true)
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

package.json

@@ -7,30 +7,39 @@
     "@emoji-mart/react": "^1.0.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@hookform/resolvers": "^3.3.1",
     "@iconify/react": "^4.0.0",
     "@mui/material": "^5.10.8",
+    "@reduxjs/toolkit": "^1.9.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "emoji-mart": "^5.2.2",
+    "axios": "^1.7.9",
+    "emoji-mart": "^5.5.2",
     "framer-motion": "^7.5.3",
     "phosphor-react": "^1.4.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
+    "react-hook-form": "^7.47.0",
     "react-i18next": "^11.18.6",
+    "react-redux": "^8.1.2",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
     "simplebar-react": "^2.4.3",
     "stylis-plugin-rtl": "^2.0.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "install": "npm install --legacy-peer-deps"
   },
   "eslintConfig": {
     "extends": [
@@ -51,6 +60,7 @@
     ]
   },
   "devDependencies": {
-    "@faker-js/faker": "^7.5.0"
+    "@faker-js/faker": "^7.5.0",
+    "visualize-react-component": "^1.0.43"
   }
 }

src/App.js

@@ -1,5 +1,5 @@
 // routes
-import Router from "./routes";
+import Router from './routes';
 // theme
 import ThemeProvider from './theme';
 // components
@@ -9,8 +9,7 @@ function App() {
   return (
     <ThemeProvider>
       <ThemeSettings>
-        {" "}
-        <Router />{" "}
+        <Router />
       </ThemeSettings>
     </ThemeProvider>
   );

src/components/AntSwitch.js

@@ -1,47 +1,50 @@
-import { Switch } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Switch } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const AntSwitch = styled(Switch)(({ theme }) => ({
   width: 40,
   height: 20,
   padding: 0,
-  display: "flex",
-  "&:active": {
-    "& .MuiSwitch-thumb": {
+  display: 'flex',
+  '&:active': {
+    '& .MuiSwitch-thumb': {
       width: 15,
     },
-    "& .MuiSwitch-switchBase.Mui-checked": {
-      transform: "translateX(9px)",
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      transform: 'translateX(1px)',
     },
   },
-  "& .MuiSwitch-switchBase": {
+  '& .MuiSwitch-switchBase': {
     padding: 2,
-    "&.Mui-checked": {
-      transform: "translateX(20px)",
-      color: "#fff",
-      "& + .MuiSwitch-track": {
+    '&.Mui-checked': {
+      transform: 'translateX(20px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
         opacity: 1,
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? '#177ddc'
+            : theme.palette.primary.main,
       },
     },
   },
-  "& .MuiSwitch-thumb": {
-    boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
+  '& .MuiSwitch-thumb': {
+    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
     width: 16,
     height: 16,
     borderRadius: 8,
-    transition: theme.transitions.create(["width"], {
-      duration: 200,
+    transition: theme.transitions.create(['width'], {
+      duration: 300,
     }),
   },
-  "& .MuiSwitch-track": {
+  '& .MuiSwitch-track': {
     borderRadius: 20 / 2,
     opacity: 1,
     backgroundColor:
-      theme.palette.mode === "dark"
-        ? "rgba(255,255,255,.35)"
-        : "rgba(0,0,0,.25)",
-    boxSizing: "border-box",
+      theme.palette.mode === 'dark'
+        ? 'rgba(255,255,255,.35)'
+        : 'rgba(0,0,0,.25)',
+    boxSizing: 'border-box',
   },
 }));
 

src/components/CallElement.js

@@ -0,0 +1,112 @@
+import { faker } from '@faker-js/faker';
+import { Avatar, Box, IconButton, Stack, Typography } from '@mui/material';
+import React from 'react';
+import StyledBadge from './StyledBadge';
+import { ArrowDownLeft, Phone, VideoCamera } from 'phosphor-react';
+
+const CallElement = ({ img, name, online, incoming, missed }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          borderRadius: 1,
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? '#fff'
+              : theme.palette.background.default,
+        }}
+        p={2}
+      >
+        {' '}
+        <Stack
+          direction="row"
+          alignItems={'center'}
+          justifyContent={'space-between'}
+        >
+          <Stack direction="row" spacing={2} alignItems={'center'}>
+            {online ? (
+              <StyledBadge
+                overlap="circular"
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                variant="dot"
+              >
+                <Avatar src={img} alt={name} />
+              </StyledBadge>
+            ) : (
+              <Avatar src={img} alt={name} />
+            )}
+
+            <Stack spacing={0.3}>
+              <Typography variant="subtitle2">{name}</Typography>
+              <Stack direction={'row'} spacing={1} alignItems={'center'}>
+                {incoming ? (
+                  <ArrowDownLeft color={missed ? 'red' : 'green'} />
+                ) : (
+                  <ArrowDownLeft color={missed ? 'red' : 'green'} />
+                )}
+                <Typography variant="caption">Yesterday 21:24</Typography>
+              </Stack>
+            </Stack>
+          </Stack>
+          <IconButton>
+            <Phone color="green" />
+          </IconButton>
+        </Stack>
+      </Box>
+    </>
+  );
+};
+
+const CallLogElement = ({ name, img, online }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          borderRadius: 1,
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? '#fff'
+              : theme.palette.background.default,
+        }}
+        p={2}
+      >
+        {' '}
+        <Stack
+          direction="row"
+          alignItems={'center'}
+          justifyContent={'space-between'}
+        >
+          <Stack direction="row" spacing={2} alignItems={'center'}>
+            {online ? (
+              <StyledBadge
+                overlap="circular"
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                variant="dot"
+              >
+                <Avatar src={img} alt={name} />
+              </StyledBadge>
+            ) : (
+              <Avatar src={img} alt={name} />
+            )}
+
+            <Stack spacing={0.3}>
+              <Typography variant="subtitle2">{name}</Typography>
+            </Stack>
+          </Stack>
+          <Stack direction={'row'} spacing={1} alignItems={'center'}>
+            <IconButton>
+              <Phone color="green" />
+            </IconButton>
+            <IconButton>
+              <VideoCamera color="green" />
+            </IconButton>
+          </Stack>
+        </Stack>
+      </Box>
+    </>
+  );
+};
+
+export { CallElement, CallLogElement };

src/components/ChatElement.js

@@ -0,0 +1,62 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { faker } from '@faker-js/faker';
+import StyledBadge from './StyledBadge';
+
+const ChatElement = ({ id, name, img, msg, time, unread, online }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        borderRadius: 1,
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? '#fff'
+            : theme.palette.background.default,
+      }}
+      p={2}
+    >
+      <Stack
+        direction="row"
+        alignItems={'center'}
+        justifyContent={'space-between'}
+      >
+        <Stack direction="row" spacing={2}>
+          {online ? (
+            <StyledBadge
+              overlap="circular"
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              variant="dot"
+            >
+              <Avatar src={faker.image.avatar()} />
+            </StyledBadge>
+          ) : (
+            <Avatar src={faker.image.avatar()} />
+          )}
+
+          <Stack spacing={0.3}>
+            <Typography variant="subtitle2">{name}</Typography>
+            <Typography variant="caption">{msg}</Typography>
+          </Stack>
+        </Stack>
+        <Stack spacing={2} alignItems={'center'}>
+          <Typography sx={{ fontWeight: 600 }} variant="caption">
+            {time}
+          </Typography>
+          <Badge color="primary" badgeContent={unread} />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default ChatElement;