(
25 |
26 |
34 |
35 | {!!error && (
36 |
37 | {error.message}
38 |
39 | )}
40 |
41 | )}
42 | />
43 | );
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/src/components/hook-form/index.js:
--------------------------------------------------------------------------------
1 | export * from './RHFUpload';
2 | export { default } from './FormProvider';
3 |
4 |
5 | export { default as RHFTextField } from './RHFTextField';
6 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeColorPresets.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useMemo } from 'react';
3 | // @mui
4 | import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
5 | // hooks
6 | import useSettings from '../../hooks/useSettings';
7 | //
8 | import componentsOverride from '../../theme/overrides';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | ThemeColorPresets.propTypes = {
13 | children: PropTypes.node,
14 | };
15 |
16 | export default function ThemeColorPresets({ children }) {
17 | const defaultTheme = useTheme();
18 |
19 | const { setColor } = useSettings();
20 |
21 | const themeOptions = useMemo(
22 | () => ({
23 | ...defaultTheme,
24 | palette: {
25 | ...defaultTheme.palette,
26 | primary: setColor,
27 | },
28 | customShadows: {
29 | ...defaultTheme.customShadows,
30 | primary: `0 8px 16px 0 ${alpha(setColor.main, 0.24)}`,
31 | },
32 | }),
33 | [setColor, defaultTheme]
34 | );
35 |
36 | const theme = createTheme(themeOptions);
37 |
38 | theme.components = componentsOverride(theme);
39 |
40 | return {children};
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeContrast.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useMemo } from 'react';
3 | // @mui
4 | import { CssBaseline } from '@mui/material';
5 | import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
6 | // hooks
7 | import useSettings from '../../hooks/useSettings';
8 | //
9 | import componentsOverride from '../../theme/overrides';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | ThemeContrast.propTypes = {
14 | children: PropTypes.node,
15 | };
16 |
17 | export default function ThemeContrast({ children }) {
18 | const defaultTheme = useTheme();
19 |
20 | const { themeContrast } = useSettings();
21 |
22 | const isLight = defaultTheme.palette.mode === 'light';
23 |
24 | const shadowColor = isLight ? defaultTheme.palette.grey[500] : defaultTheme.palette.common.black;
25 |
26 | const styles = {
27 | bgDefault: defaultTheme.palette.background.default,
28 | bgBold: isLight ? defaultTheme.palette.grey[100] : defaultTheme.palette.grey[900],
29 | cardDefault: defaultTheme.components?.MuiCard?.styleOverrides?.root,
30 | cardBold: {
31 | zIndex: 0,
32 | position: 'relative',
33 | borderRadius: Number(defaultTheme.shape.borderRadius) * 2,
34 | boxShadow: `0 0 1px 0 ${alpha(shadowColor, 0.48)}, 0 2px 4px -1px ${alpha(shadowColor, 0.24)}`,
35 | },
36 | };
37 |
38 | const themeOptions = useMemo(
39 | () => ({
40 | ...defaultTheme,
41 | palette: {
42 | ...defaultTheme.palette,
43 | background: {
44 | ...defaultTheme.palette.background,
45 | default: themeContrast === 'bold' ? styles.bgBold : styles.bgDefault,
46 | },
47 | },
48 | components: {
49 | MuiCard: {
50 | styleOverrides: {
51 | root: themeContrast === 'bold' ? styles.cardBold : styles.cardDefault,
52 | },
53 | },
54 | },
55 | }),
56 |
57 | [defaultTheme, themeContrast, styles.bgBold, styles.bgDefault, styles.cardBold, styles.cardDefault]
58 | );
59 |
60 | const theme = createTheme(themeOptions);
61 |
62 | theme.components = {
63 | ...componentsOverride(theme),
64 | MuiCard: themeOptions.components?.MuiCard,
65 | };
66 |
67 | return (
68 |
69 |
70 | {children}
71 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeLocalization.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
4 | // hooks
5 | import useLocales from '../../hooks/useLocales';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | ThemeLocalization.propTypes = {
10 | children: PropTypes.node.isRequired,
11 | };
12 |
13 | export default function ThemeLocalization({ children }) {
14 | const defaultTheme = useTheme();
15 |
16 | const { currentLang } = useLocales();
17 |
18 | const theme = createTheme(defaultTheme, currentLang.systemValue);
19 |
20 | return {children};
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeRtlLayout.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useEffect } from 'react';
3 | // rtl
4 | import rtlPlugin from 'stylis-plugin-rtl';
5 | // emotion
6 | import createCache from '@emotion/cache';
7 | import { CacheProvider } from '@emotion/react';
8 | // @mui
9 | import { useTheme } from '@mui/material/styles';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | ThemeRtlLayout.propTypes = {
14 | children: PropTypes.node,
15 | };
16 |
17 | export default function ThemeRtlLayout({ children }) {
18 | const theme = useTheme();
19 |
20 | useEffect(() => {
21 | document.dir = theme.direction;
22 | }, [theme.direction]);
23 |
24 | const cacheRtl = createCache({
25 | key: theme.direction === 'rtl' ? 'rtl' : 'css',
26 | stylisPlugins: theme.direction === 'rtl' ? [rtlPlugin] : [],
27 | });
28 |
29 | return {children};
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/BoxMask.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { Radio, FormControlLabel } from '@mui/material';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | BoxMask.propTypes = {
8 | value: PropTypes.string,
9 | };
10 |
11 | export default function BoxMask({ value }) {
12 | return (
13 | }
17 | sx={{
18 | m: 0,
19 | top: 0,
20 | right: 0,
21 | bottom: 0,
22 | left: 0,
23 | position: 'absolute',
24 | }}
25 | />
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingColorPresets.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { alpha, styled } from '@mui/material/styles';
3 | import { Box, Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import BoxMask from './BoxMask';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
12 | height: 48,
13 | display: 'flex',
14 | alignItems: 'center',
15 | justifyContent: 'center',
16 | color: theme.palette.text.disabled,
17 | border: `solid 1px ${theme.palette.grey[500_12]}`,
18 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
19 | }));
20 |
21 | // ----------------------------------------------------------------------
22 |
23 | export default function SettingColorPresets() {
24 | const { themeColorPresets, onChangeColor, colorOption } = useSettings();
25 |
26 | return (
27 |
28 |
29 | {colorOption.map((color) => {
30 | const colorName = color.name;
31 | const colorValue = color.value;
32 | const isSelected = themeColorPresets === colorName;
33 |
34 | return (
35 |
36 |
45 |
53 | theme.transitions.create('all', {
54 | easing: theme.transitions.easing.easeInOut,
55 | duration: theme.transitions.duration.shorter,
56 | }),
57 | ...(isSelected && { transform: 'none' }),
58 | }}
59 | />
60 |
61 |
62 |
63 |
64 | );
65 | })}
66 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingContrast.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 | import BoxMask from './BoxMask';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
13 | height: 72,
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | color: theme.palette.text.disabled,
18 | border: `solid 1px ${theme.palette.grey[500_12]}`,
19 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
20 | }));
21 |
22 | // ----------------------------------------------------------------------
23 |
24 | export default function SettingContrast() {
25 | const { themeContrast, onChangeContrast } = useSettings();
26 |
27 | return (
28 |
29 |
30 | {['default', 'bold'].map((contrast, index) => {
31 | const isSelected = themeContrast === contrast;
32 |
33 | return (
34 |
35 | theme.customShadows.z20,
40 | }),
41 | }}
42 | >
43 |
44 |
45 |
46 |
47 | );
48 | })}
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingDirection.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 | import BoxMask from './BoxMask';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
13 | height: 72,
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | color: theme.palette.text.disabled,
18 | border: `solid 1px ${theme.palette.grey[500_12]}`,
19 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
20 | }));
21 |
22 | // ----------------------------------------------------------------------
23 |
24 | export default function SettingDirection() {
25 | const { themeDirection, onChangeDirection } = useSettings();
26 |
27 | return (
28 |
29 |
30 | {['ltr', 'rtl'].map((direction, index) => {
31 | const isSelected = themeDirection === direction;
32 |
33 | return (
34 |
35 | theme.customShadows.z20,
40 | }),
41 | }}
42 | >
43 |
48 |
49 |
50 |
51 | );
52 | })}
53 |
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingFullscreen.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | // @mui
3 | import { alpha } from '@mui/material/styles';
4 | import { Button } from '@mui/material';
5 | //
6 | import Iconify from '../../Iconify';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | export default function SettingFullscreen() {
11 | const [fullscreen, setFullscreen] = useState(false);
12 |
13 | const toggleFullScreen = () => {
14 | if (!document.fullscreenElement) {
15 | document.documentElement.requestFullscreen();
16 | setFullscreen(true);
17 | } else if (document.exitFullscreen) {
18 | document.exitFullscreen();
19 | setFullscreen(false);
20 | }
21 | };
22 |
23 | return (
24 | }
30 | onClick={toggleFullScreen}
31 | sx={{
32 | fontSize: 14,
33 | ...(fullscreen && {
34 | bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
35 | }),
36 | }}
37 | >
38 | {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingMode.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 | import BoxMask from './BoxMask';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
13 | height: 72,
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | color: theme.palette.text.disabled,
18 | border: `solid 1px ${theme.palette.grey[500_12]}`,
19 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
20 | }));
21 |
22 | // ----------------------------------------------------------------------
23 |
24 | export default function SettingMode() {
25 | const { themeMode, onChangeMode } = useSettings();
26 |
27 | return (
28 |
29 |
30 | {['light', 'dark'].map((mode, index) => {
31 | const isSelected = themeMode === mode;
32 |
33 | return (
34 |
35 | theme.customShadows.z20,
41 | }),
42 | }}
43 | >
44 |
45 |
46 |
47 |
48 | );
49 | })}
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingStretch.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { CardActionArea, Stack } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
12 | padding: theme.spacing(2),
13 | color: theme.palette.text.disabled,
14 | border: `solid 1px ${theme.palette.grey[500_12]}`,
15 | backgroundColor: theme.palette.background.neutral,
16 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
17 | }));
18 |
19 | // ----------------------------------------------------------------------
20 |
21 | export default function SettingStretch() {
22 | const { themeStretch, onToggleStretch } = useSettings();
23 |
24 | const ICON_SIZE = {
25 | width: themeStretch ? 24 : 18,
26 | height: themeStretch ? 24 : 18,
27 | };
28 |
29 | return (
30 | theme.palette.primary.main,
35 | }),
36 | }}
37 | >
38 | theme.customShadows.z12,
51 | transition: (theme) => theme.transitions.create('width'),
52 | ...(themeStretch && {
53 | width: 1,
54 | color: 'primary.main',
55 | }),
56 | }}
57 | >
58 |
59 |
60 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/ToggleButton.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { alpha, styled } from '@mui/material/styles';
4 | import { Tooltip } from '@mui/material';
5 | // utils
6 | import cssStyles from '../../../utils/cssStyles';
7 | //
8 | import Iconify from '../../Iconify';
9 | import { IconButtonAnimate } from '../../animate';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | const RootStyle = styled('span')(({ theme }) => ({
14 | ...cssStyles(theme).bgBlur({ opacity: 0.64 }),
15 | right: 0,
16 | top: '50%',
17 | position: 'fixed',
18 | marginTop: theme.spacing(-3),
19 | padding: theme.spacing(0.5),
20 | zIndex: theme.zIndex.drawer + 2,
21 | borderRadius: '24px 0 20px 24px',
22 | boxShadow: `-12px 12px 32px -4px ${alpha(
23 | theme.palette.mode === 'light' ? theme.palette.grey[600] : theme.palette.common.black,
24 | 0.36
25 | )}`,
26 | }));
27 |
28 | const DotStyle = styled('span')(({ theme }) => ({
29 | top: 8,
30 | width: 8,
31 | height: 8,
32 | right: 10,
33 | borderRadius: '50%',
34 | position: 'absolute',
35 | backgroundColor: theme.palette.error.main,
36 | }));
37 |
38 | // ----------------------------------------------------------------------
39 |
40 | ToggleButton.propTypes = {
41 | notDefault: PropTypes.bool,
42 | onToggle: PropTypes.func,
43 | open: PropTypes.bool,
44 | };
45 |
46 | export default function ToggleButton({ notDefault, open, onToggle }) {
47 | return (
48 |
49 | {notDefault && !open && }
50 |
51 |
52 | theme.transitions.create('all'),
58 | '&:hover': {
59 | color: 'primary.main',
60 | bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
61 | },
62 | }}
63 | >
64 |
65 |
66 |
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/settings/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | //
3 | import SettingsDrawer from './drawer';
4 | //
5 | import ThemeContrast from './ThemeContrast';
6 | import ThemeRtlLayout from './ThemeRtlLayout';
7 | import ThemeColorPresets from './ThemeColorPresets';
8 | import ThemeLocalization from './ThemeLocalization';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | ThemeSettings.propTypes = {
13 | children: PropTypes.node.isRequired,
14 | };
15 |
16 | export default function ThemeSettings({ children }) {
17 | return (
18 |
19 |
20 |
21 |
22 | {children}
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/upload/index.js:
--------------------------------------------------------------------------------
1 | export { default as AvatarPreview } from './preview/AvatarPreview';
2 | export { default as UploadAvatar } from './UploadAvatar';
3 |
--------------------------------------------------------------------------------
/src/components/upload/preview/AvatarPreview.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | //
3 | import Image from '../../Image';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | AvatarPreview.propTypes = {
8 | file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
9 | };
10 |
11 | export default function AvatarPreview({ file }) {
12 | if (!file) {
13 | return null;
14 | }
15 |
16 | const imgUrl = typeof file === 'string' ? file : file.preview;
17 |
18 | return (
19 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { enUS, frFR, zhCN, viVN, arSD } from '@mui/material/locale';
3 |
4 | // routes
5 | import { PATH_DASHBOARD } from "./routes/paths";
6 |
7 | export const BASE_URL = "https://api.chat.codingmonk.in/";
8 |
9 | export const S3_BUCKET_NAME = 'codingmonk';
10 | export const AWS_ACCESS_KEY = 'AKIARPJQ4HSYLBIK2TDE';
11 | export const AWS_SECRET_ACCESS_KEY = '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';
12 | export const AWS_S3_REGION = 'ap-south-1'; // eg. ap-south-1
13 |
14 | export const defaultSettings = {
15 | themeMode: "light",
16 | themeDirection: "ltr",
17 | themeContrast: "default",
18 | themeLayout: "horizontal",
19 | themeColorPresets: "default",
20 | themeStretch: false,
21 | };
22 |
23 | export const NAVBAR = {
24 | BASE_WIDTH: 260,
25 | DASHBOARD_WIDTH: 280,
26 | DASHBOARD_COLLAPSE_WIDTH: 88,
27 | //
28 | DASHBOARD_ITEM_ROOT_HEIGHT: 48,
29 | DASHBOARD_ITEM_SUB_HEIGHT: 40,
30 | DASHBOARD_ITEM_HORIZONTAL_HEIGHT: 32,
31 | };
32 |
33 | export const allLangs = [
34 | {
35 | label: 'English',
36 | value: 'en',
37 | systemValue: enUS,
38 | icon: '/assets/icons/flags/ic_flag_en.svg',
39 | },
40 | {
41 | label: 'French',
42 | value: 'fr',
43 | systemValue: frFR,
44 | icon: '/assets/icons/flags/ic_flag_fr.svg',
45 | },
46 | {
47 | label: 'Vietnamese',
48 | value: 'vn',
49 | systemValue: viVN,
50 | icon: '/assets/icons/flags/ic_flag_vn.svg',
51 | },
52 | {
53 | label: 'Chinese',
54 | value: 'cn',
55 | systemValue: zhCN,
56 | icon: '/assets/icons/flags/ic_flag_cn.svg',
57 | },
58 | {
59 | label: 'Arabic (Sudan)',
60 | value: 'ar',
61 | systemValue: arSD,
62 | icon: '/assets/icons/flags/ic_flag_sa.svg',
63 | },
64 | ];
65 |
66 | export const defaultLang = allLangs[0]; // English
67 |
68 |
69 |
70 | // DEFAULT ROOT PATH
71 | export const DEFAULT_PATH = PATH_DASHBOARD.general.app; // as '/app'
72 |
--------------------------------------------------------------------------------
/src/hooks/useEventListener.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useLayoutEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
6 |
7 | function useEventListener(eventName, handler, element, options) {
8 | // Create a ref that stores handler
9 | const savedHandler = useRef(handler);
10 |
11 | useIsomorphicLayoutEffect(() => {
12 | savedHandler.current = handler;
13 | }, [handler]);
14 |
15 | useEffect(() => {
16 | // Define the listening target
17 | const targetElement = element?.current || window;
18 | if (!(targetElement && targetElement.addEventListener)) {
19 | return;
20 | }
21 |
22 | // Create event listener that calls handler function stored in ref
23 | const eventListener = (event) => savedHandler.current(event);
24 |
25 | targetElement.addEventListener(eventName, eventListener, options);
26 |
27 | // Remove event listener on cleanup
28 | // eslint-disable-next-line consistent-return
29 | return () => {
30 | targetElement.removeEventListener(eventName, eventListener);
31 | };
32 | }, [eventName, element, options]);
33 | }
34 |
35 | export default useEventListener;
36 |
--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useLocalStorage(key, defaultValue) {
6 | const [value, setValue] = useState(() => {
7 | const storedValue = localStorage.getItem(key);
8 |
9 | return storedValue === null ? defaultValue : JSON.parse(storedValue);
10 | });
11 |
12 | useEffect(() => {
13 | const listener = (e) => {
14 | if (e.storageArea === localStorage && e.key === key) {
15 | setValue(JSON.parse(e.newValue));
16 | }
17 | };
18 | window.addEventListener('storage', listener);
19 |
20 | return () => {
21 | window.removeEventListener('storage', listener);
22 | };
23 | }, [key, defaultValue]);
24 |
25 | const setValueInLocalStorage = (newValue) => {
26 | setValue((currentValue) => {
27 | const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
28 |
29 | localStorage.setItem(key, JSON.stringify(result));
30 |
31 | return result;
32 | });
33 | };
34 |
35 | return [value, setValueInLocalStorage];
36 | }
37 |
--------------------------------------------------------------------------------
/src/hooks/useLocales.js:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import useSettings from './useSettings';
3 | // config
4 | import { allLangs, defaultLang } from '../config';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export default function useLocales() {
9 | const { i18n, t: translate } = useTranslation();
10 |
11 | const { onChangeDirectionByLang } = useSettings();
12 |
13 | const langStorage = localStorage.getItem('i18nextLng');
14 |
15 | const currentLang = allLangs.find((_lang) => _lang.value === langStorage) || defaultLang;
16 |
17 | const handleChangeLanguage = (newlang) => {
18 | i18n.changeLanguage(newlang);
19 | onChangeDirectionByLang(newlang);
20 | };
21 |
22 | return {
23 | onChangeLang: handleChangeLanguage,
24 | translate: (text, options) => translate(text, options),
25 | currentLang,
26 | allLangs,
27 | };
28 | }
29 |
--------------------------------------------------------------------------------
/src/hooks/useResponsive.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { useTheme } from '@mui/material/styles';
3 | import useMediaQuery from '@mui/material/useMediaQuery';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | export default function useResponsive(query, key, start, end) {
8 | const theme = useTheme();
9 |
10 | const mediaUp = useMediaQuery(theme.breakpoints.up(key));
11 |
12 | const mediaDown = useMediaQuery(theme.breakpoints.down(key));
13 |
14 | const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
15 |
16 | const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
17 |
18 | if (query === 'up') {
19 | return mediaUp;
20 | }
21 |
22 | if (query === 'down') {
23 | return mediaDown;
24 | }
25 |
26 | if (query === 'between') {
27 | return mediaBetween;
28 | }
29 |
30 | if (query === 'only') {
31 | return mediaOnly;
32 | }
33 | return null;
34 | }
35 |
--------------------------------------------------------------------------------
/src/hooks/useSettings.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import {SettingsContext} from '../contexts/SettingsContext';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | const useSettings = () => useContext(SettingsContext);
7 |
8 | export default useSettings;
9 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import { BrowserRouter } from 'react-router-dom';
4 | import { HelmetProvider } from "react-helmet-async";
5 | import App from "./App";
6 | import reportWebVitals from "./reportWebVitals";
7 |
8 | import { Provider as ReduxProvider } from 'react-redux';
9 |
10 | // contexts
11 | import SettingsProvider from "./contexts/SettingsContext";
12 | import { store } from "./redux/store";
13 |
14 | const root = ReactDOM.createRoot(document.getElementById("root"));
15 |
16 | root.render(
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 |
30 | // If you want to start measuring performance in your app, pass a function
31 | // to log results (for example: reportWebVitals(console.log))
32 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
33 | reportWebVitals();
34 |
--------------------------------------------------------------------------------
/src/layouts/auth/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Container, Stack } from "@mui/material";
3 | import { Navigate, Outlet } from "react-router-dom";
4 |
5 | import Logo from "../../assets/Images/logo.ico";
6 | import { useSelector } from "react-redux";
7 |
8 | const AuthLayout = () => {
9 | const { isLoggedIn } = useSelector((state) => state.auth);
10 |
11 | if (isLoggedIn) {
12 | return ;
13 | }
14 |
15 | return (
16 | <>
17 |
18 |
19 |
24 | 
25 |
26 |
27 |
28 |
29 |
30 | );
31 | };
32 |
33 | export default AuthLayout;
34 |
--------------------------------------------------------------------------------
/src/layouts/dashboard/BottomNav.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useTheme } from "@mui/material/styles";
3 | import { Box, IconButton, Stack } from "@mui/material";
4 | import ProfileMenu from "./ProfileMenu";
5 | import { Nav_Buttons } from "../../data";
6 |
7 | const BottomNav = () => {
8 | const theme = useTheme();
9 |
10 | const [selectedTab, setSelectedTab] = React.useState(0);
11 |
12 | const handleChangeTab = (index) => {
13 | setSelectedTab(index);
14 | };
15 |
16 | return (
17 |
28 |
36 | {Nav_Buttons.map((el) => {
37 | return el.index === selectedTab ? (
38 |
39 |
40 | {el.icon}
41 |
42 |
43 | ) : (
44 | {
46 | handleChangeTab(el.index);
47 | }}
48 | sx={{
49 | width: "max-content",
50 | color:
51 | theme.palette.mode === "light"
52 | ? "#080707"
53 | : theme.palette.text.primary,
54 | }}
55 | >
56 | {el.icon}
57 |
58 | );
59 | })}
60 |
61 |
62 |
63 | );
64 | };
65 |
66 | export default BottomNav;
67 |
--------------------------------------------------------------------------------
/src/layouts/dashboard/ProfileMenu.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Avatar, Box, Fade, Menu, MenuItem, Stack } from "@mui/material";
3 |
4 | import { faker } from "@faker-js/faker";
5 |
6 | import { Profile_Menu } from "../../data";
7 | import { useDispatch, useSelector } from "react-redux";
8 | import { LogoutUser } from "../../redux/slices/auth";
9 | import { socket } from "../../socket";
10 | import { useNavigate } from "react-router-dom";
11 | import { AWS_S3_REGION, S3_BUCKET_NAME } from "../../config";
12 |
13 | const ProfileMenu = () => {
14 | const {user} = useSelector((state) => state.app);
15 | const navigate = useNavigate();
16 | const dispatch = useDispatch();
17 | const [anchorEl, setAnchorEl] = React.useState(null);
18 | const openMenu = Boolean(anchorEl);
19 | const handleClick = (event) => {
20 | setAnchorEl(event.currentTarget);
21 | };
22 | const handleClose = () => {
23 | setAnchorEl(null);
24 | };
25 |
26 | const user_id = window.localStorage.getItem("user_id");
27 |
28 | const user_name = user?.firstName;
29 | const user_img = `https://${S3_BUCKET_NAME}.s3.${AWS_S3_REGION}.amazonaws.com/${user?.avatar}`;
30 |
31 | return (
32 | <>
33 |
42 |
91 |
92 | );
93 | };
94 |
95 | export default ProfileMenu;
96 |
--------------------------------------------------------------------------------
/src/layouts/main/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector } from "react-redux";
3 | import { Navigate, Outlet } from "react-router-dom";
4 |
5 | const MainLayout = () => {
6 |
7 | const {isLoggedIn} = useSelector((state) => state.auth);
8 |
9 | if (!isLoggedIn) {
10 | return ;
11 | }
12 | return (
13 | <>
14 | Main Layout
15 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default MainLayout;
22 |
--------------------------------------------------------------------------------
/src/pages/Page404.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Page404 = () => {
4 | return <>404;
5 | };
6 |
7 |
8 | export default Page404;
--------------------------------------------------------------------------------
/src/pages/auth/Login.js:
--------------------------------------------------------------------------------
1 | import { Link as RouterLink } from "react-router-dom";
2 | // sections
3 | import { Stack, Typography, Link } from "@mui/material";
4 | import AuthSocial from "../../sections/auth/AuthSocial";
5 | import Login from "../../sections/auth/LoginForm";
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | export default function LoginPage() {
10 | return (
11 | <>
12 |
13 | Login to Tawk
14 |
15 |
16 | New user?
17 |
18 |
23 | Create an account
24 |
25 |
26 |
27 | {/* Form */}
28 |
29 |
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/pages/auth/NewPassword.js:
--------------------------------------------------------------------------------
1 | import { Stack, Typography, Link } from "@mui/material";
2 | import { Link as RouterLink } from "react-router-dom";
3 | import React from "react";
4 | import { CaretLeft } from "phosphor-react";
5 | import NewPasswordForm from "../../sections/auth/NewPasswordForm";
6 |
7 | const NewPassword = () => {
8 | return (
9 | <>
10 |
11 |
12 | Reset Password
13 |
14 |
15 |
16 | Please set your new password.
17 |
18 |
19 |
20 | {/* NewPasswordForm */}
21 |
22 |
23 |
24 |
36 |
37 | Return to sign in
38 |
39 |
40 | );
41 | };
42 |
43 | export default NewPassword;
44 |
--------------------------------------------------------------------------------
/src/pages/auth/Register.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link as RouterLink } from 'react-router-dom';
3 | // @mui
4 | import { Stack, Typography, Link } from '@mui/material';
5 |
6 | import RegisterForm from "../../sections/auth/RegisterForm";
7 | import AuthSocial from '../../sections/auth/AuthSocial';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function Register() {
12 | return (
13 | <>
14 |
15 | Get started with Tawk.
16 |
17 |
18 | Already have an account?
19 |
20 |
21 | Sign in
22 |
23 |
24 |
25 | {/* Form */}
26 |
27 |
28 |
32 | {'By signing up, I agree to '}
33 |
34 | Terms of Service
35 |
36 | {' and '}
37 |
38 | Privacy Policy
39 |
40 | .
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/auth/ResetPassword.js:
--------------------------------------------------------------------------------
1 | import { Stack, Typography, Link } from "@mui/material";
2 | import { Link as RouterLink } from "react-router-dom";
3 | import React from "react";
4 | import { CaretLeft } from "phosphor-react";
5 | import AuthResetPasswordForm from "../../sections/auth/ResetPasswordForm";
6 |
7 | const ResetPassword = () => {
8 | return (
9 | <>
10 |
11 |
12 | Forgot your password?
13 |
14 |
15 |
16 | Please enter the email address associated with your account and We
17 | will email you a link to reset your password.
18 |
19 |
20 |
21 | {/* Reset Password Form */}
22 |
23 |
24 |
36 |
37 | Return to sign in
38 |
39 |
40 | );
41 | };
42 |
43 | export default ResetPassword;
44 |
--------------------------------------------------------------------------------
/src/pages/auth/Verify.js:
--------------------------------------------------------------------------------
1 | import { Link as RouterLink } from "react-router-dom";
2 | // sections
3 | import { Stack, Typography, Link } from "@mui/material";
4 | import AuthSocial from "../../sections/auth/AuthSocial";
5 | import Login from "../../sections/auth/LoginForm";
6 | import VerifyForm from "../../sections/auth/VerifyForm";
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | export default function LoginPage() {
11 | return (
12 | <>
13 |
14 | Please Verify OTP
15 |
16 |
17 |
18 | Sent to email (shreyanshshah242@gmail.com)
19 |
20 |
21 |
22 | {/* Form */}
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/dashboard/GeneralApp.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useTheme } from "@mui/material/styles";
3 | import { Box, Stack, Typography } from "@mui/material";
4 |
5 | import { Link, useSearchParams } from "react-router-dom";
6 | import ChatComponent from "./Conversation";
7 | import Chats from "./Chats";
8 | import Contact from "../../sections/dashboard/Contact";
9 | import NoChat from "../../assets/Illustration/NoChat";
10 | import { useSelector } from "react-redux";
11 | import StarredMessages from "../../sections/dashboard/StarredMessages";
12 | import Media from "../../sections/dashboard/SharedMessages";
13 |
14 | const GeneralApp = () => {
15 | const [searchParams] = useSearchParams();
16 |
17 | const theme = useTheme();
18 |
19 | const { sideBar, room_id, chat_type } = useSelector((state) => state.app);
20 |
21 | return (
22 | <>
23 |
24 |
25 |
42 | {chat_type === "individual" &&
43 | room_id !== null ? (
44 |
45 | ) : (
46 |
52 |
53 |
54 | Select a conversation or start a{" "}
55 |
62 | new one
63 |
64 |
65 |
66 | )}
67 |
68 | {sideBar.open &&
69 | (() => {
70 | switch (sideBar.type) {
71 | case "CONTACT":
72 | return ;
73 |
74 | case "STARRED":
75 | return ;
76 |
77 | case "SHARED":
78 | return ;
79 |
80 | default:
81 | break;
82 | }
83 | })()}
84 |
85 |
86 | );
87 | };
88 |
89 | export default GeneralApp;
90 |
--------------------------------------------------------------------------------
/src/pages/dashboard/Settings/Profile.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { Box, IconButton, Stack, Typography } from "@mui/material";
3 | import { CaretLeft } from "phosphor-react";
4 | import ProfileForm from "../../../sections/dashboard/Settings/ProfileForm";
5 | import { useDispatch } from "react-redux";
6 | import { FetchUserProfile } from "../../../redux/slices/app";
7 |
8 | const Profile = () => {
9 | const dispatch = useDispatch();
10 |
11 | useEffect(() => {
12 | dispatch(FetchUserProfile());
13 | }, []);
14 |
15 | return (
16 | <>
17 |
18 | {/* Left Pane */}
19 |
26 | theme.palette.mode === "light"
27 | ? "#F8FAFF"
28 | : theme.palette.background,
29 |
30 | boxShadow: "0px 0px 2px rgba(0, 0, 0, 0.25)",
31 | }}
32 | >
33 |
34 | {/* Header */}
35 |
36 |
37 |
38 |
39 |
40 | Profile
41 |
42 |
43 | {/* Profile Edit Form */}
44 |
45 |
46 |
47 |
48 | {/* Right Pane */}
49 |
54 | theme.palette.mode === "light"
55 | ? "#FFF"
56 | : theme.palette.background.paper,
57 | borderBottom: "6px solid #0162C4",
58 | }}
59 | >
60 |
61 |
62 | );
63 | };
64 |
65 | export default Profile;
66 |
--------------------------------------------------------------------------------
/src/redux/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import storage from 'redux-persist/lib/storage';
3 | // slices
4 | import appReducer from './slices/app';
5 | import audioCallReducer from './slices/audioCall';
6 | import videoCallReducer from './slices/videoCall';
7 | import authReducer from './slices/auth';
8 | import conversationReducer from './slices/conversation';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const rootPersistConfig = {
13 | key: 'root',
14 | storage,
15 | keyPrefix: 'redux-',
16 | // whitelist: [],
17 | // blacklist: [],
18 | };
19 |
20 | const rootReducer = combineReducers({
21 | app: appReducer,
22 | auth: authReducer,
23 | conversation: conversationReducer,
24 | audioCall: audioCallReducer,
25 | videoCall: videoCallReducer,
26 | });
27 |
28 | export { rootPersistConfig, rootReducer };
29 |
--------------------------------------------------------------------------------
/src/redux/slices/videoCall.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { socket } from "../../socket";
3 | import axios from "../../utils/axios";
4 |
5 | const initialState = {
6 | open_video_dialog: false,
7 | open_video_notification_dialog: false,
8 | call_queue: [], // can have max 1 call at any point of time
9 | incoming: false,
10 | };
11 |
12 | const slice = createSlice({
13 | name: "videoCall",
14 | initialState,
15 | reducers: {
16 | pushToVideoCallQueue(state, action) {
17 | // check video_call_queue in redux store
18 |
19 | if (state.call_queue.length === 0) {
20 | state.call_queue.push(action.payload.call);
21 | if (action.payload.incoming) {
22 | state.open_video_notification_dialog = true; // this will open up the call dialog
23 | state.incoming = true;
24 | }
25 | else {
26 | state.open_video_dialog = true;
27 | state.incoming = false;
28 | }
29 | } else {
30 | // if queue is not empty then emit user_is_busy => in turn server will send this event to sender of call
31 | socket.emit("user_is_busy_video_call", { ...action.payload });
32 | }
33 |
34 | // Ideally queue should be managed on server side
35 | },
36 | resetVideoCallQueue(state, action) {
37 | state.call_queue = [];
38 | state.open_video_notification_dialog = false;
39 | state.incoming = false;
40 | },
41 | closeNotificationDialog(state, action) {
42 | state.open_video_notification_dialog = false;
43 | },
44 | updateCallDialog(state, action) {
45 | state.open_video_dialog = action.payload.state;
46 | state.open_video_notification_dialog = false;
47 | },
48 | },
49 | });
50 |
51 | // Reducer
52 | export default slice.reducer;
53 |
54 | // ----------------------------------------------------------------------
55 |
56 | export const StartVideoCall = (id) => {
57 | return async (dispatch, getState) => {
58 | dispatch(slice.actions.resetVideoCallQueue());
59 | axios
60 | .post(
61 | "/user/start-video-call",
62 | { id },
63 | {
64 | headers: {
65 | "Content-Type": "application/json",
66 | Authorization: `Bearer ${getState().auth.token}`,
67 | },
68 | }
69 | )
70 | .then((response) => {
71 | console.log(response);
72 | dispatch(
73 | slice.actions.pushToVideoCallQueue({
74 | call: response.data.data,
75 | incoming: false,
76 | })
77 | );
78 | })
79 | .catch((err) => {
80 | console.log(err);
81 | });
82 | };
83 | };
84 |
85 | export const PushToVideoCallQueue = (call) => {
86 | return async (dispatch, getState) => {
87 | dispatch(slice.actions.pushToVideoCallQueue({call, incoming: true}));
88 | };
89 | };
90 |
91 | export const ResetVideoCallQueue = () => {
92 | return async (dispatch, getState) => {
93 | dispatch(slice.actions.resetVideoCallQueue());
94 | };
95 | };
96 |
97 | export const CloseVideoNotificationDialog = () => {
98 | return async (dispatch, getState) => {
99 | dispatch(slice.actions.closeNotificationDialog());
100 | };
101 | };
102 |
103 | export const UpdateVideoCallDialog = ({ state }) => {
104 | return async (dispatch, getState) => {
105 | dispatch(slice.actions.updateCallDialog({ state }));
106 | };
107 | };
108 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import { useDispatch as useAppDispatch, useSelector as useAppSelector } from 'react-redux';
3 | import { persistStore, persistReducer } from 'redux-persist';
4 | import { rootPersistConfig, rootReducer } from './rootReducer';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const store = configureStore({
9 | reducer: persistReducer(rootPersistConfig, rootReducer),
10 | middleware: (getDefaultMiddleware) =>
11 | getDefaultMiddleware({
12 | serializableCheck: false,
13 | immutableCheck: false,
14 | }),
15 | });
16 |
17 | const persistor = persistStore(store);
18 |
19 | const { dispatch } = store;
20 |
21 | const useSelector = useAppSelector;
22 |
23 | const useDispatch = () => useAppDispatch();
24 |
25 | export { store, persistor, dispatch, useSelector, useDispatch };
26 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
1 | import { Suspense, lazy } from "react";
2 | import { Navigate, useRoutes } from "react-router-dom";
3 |
4 | // layouts
5 | import DashboardLayout from "../layouts/dashboard";
6 | import AuthLayout from "../layouts/auth";
7 |
8 | // config
9 | import { DEFAULT_PATH } from "../config";
10 | import LoadingScreen from "../components/LoadingScreen";
11 |
12 | const Loadable = (Component) => (props) => {
13 | return (
14 | }>
15 |
16 |
17 | );
18 | };
19 |
20 | export default function Router() {
21 | return useRoutes([
22 | {
23 | path: "/auth",
24 | element: ,
25 | children: [
26 | { path: "login", element: },
27 | { path: "register", element: },
28 | { path: "reset-password", element: },
29 | { path: "new-password", element: },
30 | {path: "verify", element: },
31 | ],
32 | },
33 | {
34 | path: "/",
35 | element: ,
36 | children: [
37 | { element: , index: true },
38 | { path: "app", element: },
39 | { path: "group", element: },
40 | { path: "settings", element: },
41 | { path: "conversation", element: },
42 | { path: "chats", element: },
43 | { path: "contact", element: },
44 | { path: "profile", element: },
45 |
46 | {path: "call", element: },
47 |
48 | { path: "404", element: },
49 | { path: "*", element: },
50 | ],
51 | },
52 |
53 | { path: "*", element: },
54 | ]);
55 | }
56 |
57 | const GeneralApp = Loadable(
58 | lazy(() => import("../pages/dashboard/GeneralApp"))
59 | );
60 | const Conversation = Loadable(
61 | lazy(() => import("../pages/dashboard/Conversation"))
62 | );
63 | const Chats = Loadable(lazy(() => import("../pages/dashboard/Chats")));
64 | const Group = Loadable(lazy(() => import("../pages/dashboard/Group")));
65 | const CallPage = Loadable(lazy(() => import("../pages/dashboard/Call")));
66 | const Contact = Loadable(lazy(() => import("../sections/dashboard/Contact")));
67 | const Page404 = Loadable(lazy(() => import("../pages/Page404")));
68 |
69 | const LoginPage = Loadable(lazy(() => import("../pages/auth/Login")));
70 | const VerifyPage = Loadable(lazy(() => import("../pages/auth/Verify")));
71 | const RegisterPage = Loadable(lazy(() => import("../pages/auth/Register")));
72 | const ResetPasswordPage = Loadable(
73 | lazy(() => import("../pages/auth/ResetPassword"))
74 | );
75 | const NewPasswordPage = Loadable(
76 | lazy(() => import("../pages/auth/NewPassword"))
77 | );
78 |
79 | // Settings
80 | const Settings = Loadable(lazy(() => import("../pages/dashboard/Settings")));
81 | const Profile = Loadable(
82 | lazy(() => import("../pages/dashboard/Settings/Profile"))
83 | );
84 |
--------------------------------------------------------------------------------
/src/routes/paths.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | function path(root, sublink) {
4 | return `${root}${sublink}`;
5 | }
6 |
7 | const ROOTS_DASHBOARD = "/";
8 |
9 | export const PATH_DASHBOARD = {
10 | root: ROOTS_DASHBOARD,
11 | general: {
12 | app: path(ROOTS_DASHBOARD, "app"),
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/Audio/CallNotification.js:
--------------------------------------------------------------------------------
1 | import { faker } from "@faker-js/faker";
2 | import {
3 | Avatar,
4 | Button,
5 | Dialog,
6 | DialogActions,
7 | DialogContent,
8 | Slide,
9 | Stack,
10 | } from "@mui/material";
11 | import React from "react";
12 | import { useDispatch, useSelector } from "react-redux";
13 | import {
14 | ResetAudioCallQueue,
15 | UpdateAudioCallDialog,
16 | } from "../../../redux/slices/audioCall";
17 | import { socket } from "../../../socket";
18 | import { AWS_S3_REGION, S3_BUCKET_NAME } from "../../../config";
19 |
20 | const Transition = React.forwardRef(function Transition(props, ref) {
21 | return ;
22 | });
23 |
24 | const CallNotification = ({ open, handleClose }) => {
25 | const dispatch = useDispatch();
26 |
27 | const { user } = useSelector((state) => state.app);
28 | const [call_details] = useSelector((state) => state.audioCall.call_queue);
29 |
30 | const handleAccept = () => {
31 | socket.emit("audio_call_accepted", { ...call_details });
32 | dispatch(UpdateAudioCallDialog({ state: true }));
33 | };
34 |
35 | const handleDeny = () => {
36 | //
37 | socket.emit("audio_call_denied", { ...call_details });
38 | dispatch(ResetAudioCallQueue());
39 | handleClose();
40 | };
41 |
42 | return (
43 | <>
44 |
76 |
77 | );
78 | };
79 |
80 | export default CallNotification;
81 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/CreateGroup.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Yup from "yup";
3 | import {
4 | Button,
5 | Dialog,
6 | DialogContent,
7 | DialogTitle,
8 | Slide,
9 | Stack,
10 | } from "@mui/material";
11 |
12 | import { yupResolver } from "@hookform/resolvers/yup";
13 | import { useForm } from "react-hook-form";
14 | import FormProvider from "../../components/hook-form/FormProvider";
15 | import { RHFTextField } from "../../components/hook-form";
16 | import RHFAutocomplete from "../../components/hook-form/RHFAutocomplete";
17 |
18 | const Transition = React.forwardRef(function Transition(props, ref) {
19 | return ;
20 | });
21 |
22 | const TAGS_OPTION = [
23 | "Toy Story 3",
24 | "Logan",
25 | "Full Metal Jacket",
26 | "Dangal",
27 | "The Sting",
28 | "2001: A Space Odyssey",
29 | "Singin' in the Rain",
30 | "Toy Story",
31 | "Bicycle Thieves",
32 | "The Kid",
33 | "Inglourious Basterds",
34 | "Snatch",
35 | "3 Idiots",
36 | ];
37 |
38 | const CreateGroupForm = ({ handleClose }) => {
39 | const NewGroupSchema = Yup.object().shape({
40 | title: Yup.string().required("Title is required"),
41 |
42 | members: Yup.array().min(2, "Must have at least 2 members"),
43 | });
44 |
45 | const defaultValues = {
46 | title: "",
47 |
48 | tags: [],
49 | };
50 |
51 | const methods = useForm({
52 | resolver: yupResolver(NewGroupSchema),
53 | defaultValues,
54 | });
55 |
56 | const {
57 | reset,
58 | watch,
59 | setValue,
60 | handleSubmit,
61 | formState: { isSubmitting, isValid },
62 | } = methods;
63 |
64 | const onSubmit = async (data) => {
65 | try {
66 | // API Call
67 | console.log("DATA", data);
68 | } catch (error) {
69 | console.error(error);
70 | }
71 | };
72 |
73 | return (
74 |
75 |
76 |
77 | option)}
83 | ChipProps={{ size: "medium" }}
84 | />
85 |
91 |
92 |
95 |
96 |
97 |
98 | );
99 | };
100 |
101 | const CreateGroup = ({ open, handleClose }) => {
102 | return (
103 |
120 | );
121 | };
122 |
123 | export default CreateGroup;
124 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/Friends.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { Dialog, DialogContent, Slide, Stack, Tab, Tabs } from "@mui/material";
3 | import { useDispatch, useSelector } from "react-redux";
4 | import {
5 | FetchFriendRequests,
6 | FetchFriends,
7 | FetchUsers,
8 | } from "../../redux/slices/app";
9 | import { FriendElement, FriendRequestElement, UserElement } from "../../components/UserElement";
10 |
11 | const Transition = React.forwardRef(function Transition(props, ref) {
12 | return ;
13 | });
14 |
15 | const UsersList = () => {
16 | const dispatch = useDispatch();
17 |
18 | const { users } = useSelector((state) => state.app);
19 |
20 | useEffect(() => {
21 | dispatch(FetchUsers());
22 | }, []);
23 |
24 | return (
25 | <>
26 | {users.map((el, idx) => {
27 | return ;
28 | })}
29 |
30 | );
31 | };
32 |
33 | const FriendsList = () => {
34 | const dispatch = useDispatch();
35 |
36 | const { friends } = useSelector((state) => state.app);
37 |
38 | useEffect(() => {
39 | dispatch(FetchFriends());
40 | }, []);
41 |
42 | return (
43 | <>
44 | {friends.map((el, idx) => {
45 | return ;
46 | })}
47 |
48 | );
49 | };
50 |
51 | const RequestsList = () => {
52 | const dispatch = useDispatch();
53 |
54 | const { friendRequests } = useSelector((state) => state.app);
55 |
56 | useEffect(() => {
57 | dispatch(FetchFriendRequests());
58 | }, []);
59 |
60 | return (
61 | <>
62 | {friendRequests.map((el, idx) => {
63 | return ;
64 | })}
65 |
66 | );
67 | };
68 |
69 | const Friends = ({ open, handleClose }) => {
70 | const [value, setValue] = React.useState(0);
71 |
72 | const handleChange = (event, newValue) => {
73 | setValue(newValue);
74 | };
75 |
76 | return (
77 |
117 | );
118 | };
119 |
120 | export default Friends;
121 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/Settings/ProfileForm.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from "react";
2 | import * as Yup from "yup";
3 | // form
4 | import { useForm } from "react-hook-form";
5 | import { yupResolver } from "@hookform/resolvers/yup";
6 | import FormProvider from "../../../components/hook-form/FormProvider";
7 | import { RHFTextField, RHFUploadAvatar } from "../../../components/hook-form";
8 | import { Stack } from "@mui/material";
9 | import { LoadingButton } from "@mui/lab";
10 | import { useDispatch, useSelector } from "react-redux";
11 | import { UpdateUserProfile } from "../../../redux/slices/app";
12 | import { AWS_S3_REGION, S3_BUCKET_NAME } from "../../../config";
13 |
14 | const ProfileForm = () => {
15 | const dispatch = useDispatch();
16 | const [file, setFile] = useState();
17 | const { user } = useSelector((state) => state.app);
18 |
19 | const ProfileSchema = Yup.object().shape({
20 | firstName: Yup.string().required("Name is required"),
21 | about: Yup.string().required("About is required"),
22 | avatar: Yup.string().required("Avatar is required").nullable(true),
23 | });
24 |
25 | const defaultValues = {
26 | firstName: user?.firstName,
27 | about: user?.about,
28 | avatar: `https://${S3_BUCKET_NAME}.s3.${AWS_S3_REGION}.amazonaws.com/${user?.avatar}`,
29 | };
30 |
31 | const methods = useForm({
32 | resolver: yupResolver(ProfileSchema),
33 | defaultValues,
34 | });
35 |
36 | const {
37 | reset,
38 | watch,
39 | control,
40 | setValue,
41 | handleSubmit,
42 | formState: { isSubmitting, isSubmitSuccessful },
43 | } = methods;
44 |
45 | const values = watch();
46 |
47 | const onSubmit = async (data) => {
48 | try {
49 | // Send API request
50 | console.log("DATA", data);
51 | dispatch(
52 | UpdateUserProfile({
53 | firstName: data?.firstName,
54 | about: data?.about,
55 | avatar: file,
56 | })
57 | );
58 | } catch (error) {
59 | console.error(error);
60 | }
61 | };
62 |
63 | const handleDrop = useCallback(
64 | (acceptedFiles) => {
65 | const file = acceptedFiles[0];
66 |
67 | setFile(file);
68 |
69 | const newFile = Object.assign(file, {
70 | preview: URL.createObjectURL(file),
71 | });
72 |
73 | if (file) {
74 | setValue("avatar", newFile, { shouldValidate: true });
75 | }
76 | },
77 | [setValue]
78 | );
79 |
80 | return (
81 |
82 |
83 |
84 |
85 |
90 |
91 |
92 |
93 |
100 | Save
101 |
102 |
103 |
104 |
105 | );
106 | };
107 |
108 | export default ProfileForm;
109 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/Settings/ThemeDialog.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Dialog,
4 | Slide,
5 | Button,
6 | DialogActions,
7 | DialogContent,
8 | DialogTitle,
9 | Radio,
10 | RadioGroup,
11 | FormControl,
12 | FormControlLabel,
13 | } from "@mui/material";
14 |
15 | const Transition = React.forwardRef(function Transition(props, ref) {
16 | return ;
17 | });
18 |
19 | const ThemeDialog = ({ open, handleClose }) => {
20 | return (
21 | <>
22 |
59 |
60 | );
61 | };
62 |
63 | export default ThemeDialog;
64 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/StarredMessages.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useTheme } from "@mui/material/styles";
3 | import { Box, IconButton, Stack, Typography } from "@mui/material";
4 | import { ArrowLeft } from "phosphor-react";
5 | import useResponsive from "../../hooks/useResponsive";
6 | import { useDispatch } from "react-redux";
7 | import { UpdateSidebarType } from "../../redux/slices/app";
8 | import { Conversation } from "../../pages/dashboard/Conversation";
9 |
10 | const StarredMessages = () => {
11 | const dispatch = useDispatch();
12 |
13 | const theme = useTheme();
14 |
15 | const isDesktop = useResponsive("up", "md");
16 |
17 | return (
18 |
19 |
20 |
30 |
36 | {
38 | dispatch(UpdateSidebarType("CONTACT"));
39 | }}
40 | >
41 |
42 |
43 | Starred Messages
44 |
45 |
46 |
55 |
56 |
57 |
58 |
59 | );
60 | };
61 |
62 | export default StarredMessages;
63 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/StartCall.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogTitle,
6 | Slide,
7 | Stack,
8 | } from "@mui/material";
9 | import {
10 | Search,
11 | SearchIconWrapper,
12 | StyledInputBase,
13 | } from "../../components/Search";
14 | import { MagnifyingGlass } from "phosphor-react";
15 | import { CallElement } from "../../components/CallElement";
16 | import { CallList } from "../../data";
17 | import { useDispatch, useSelector } from "react-redux";
18 | import { FetchAllUsers } from "../../redux/slices/app";
19 | import {faker} from "@faker-js/faker";
20 |
21 | const Transition = React.forwardRef(function Transition(props, ref) {
22 | return ;
23 | });
24 |
25 | const StartCall = ({ open, handleClose }) => {
26 | const {all_users} = useSelector((state) => state.app);
27 | const dispatch = useDispatch();
28 | useEffect(() => {
29 | dispatch(FetchAllUsers());
30 | }, []);
31 |
32 | console.log(CallList, all_users, "Call List Info");
33 |
34 | const list = all_users.map((el) => ({
35 | id: el?._id,
36 | name: `${el?.firstName} ${el?.lastName}`,
37 | image: faker.image.avatar(),
38 | }));
39 |
40 | return (
41 |
73 | );
74 | };
75 |
76 | export default StartCall;
77 |
--------------------------------------------------------------------------------
/src/sections/Dashboard/video/CallNotification.js:
--------------------------------------------------------------------------------
1 | import { faker } from "@faker-js/faker";
2 | import {
3 | Avatar,
4 | Button,
5 | Dialog,
6 | DialogActions,
7 | DialogContent,
8 | Slide,
9 | Stack,
10 | } from "@mui/material";
11 | import React from "react";
12 | import { useDispatch, useSelector } from "react-redux";
13 | import {
14 | ResetVideoCallQueue,
15 | UpdateVideoCallDialog,
16 | } from "../../../redux/slices/videoCall";
17 | import { socket } from "../../../socket";
18 | import { AWS_S3_REGION, S3_BUCKET_NAME } from "../../../config";
19 |
20 | const Transition = React.forwardRef(function Transition(props, ref) {
21 | return ;
22 | });
23 |
24 | const CallNotification = ({ open, handleClose }) => {
25 | const dispatch = useDispatch();
26 | const { user } = useSelector((state) => state.app);
27 | const [call_details] = useSelector((state) => state.videoCall.call_queue);
28 |
29 | const handleAccept = () => {
30 | socket.emit("video_call_accepted", { ...call_details });
31 | dispatch(UpdateVideoCallDialog({ state: true }));
32 | };
33 |
34 | const handleDeny = () => {
35 | //
36 | socket.emit("video_call_denied", { ...call_details });
37 | dispatch(ResetVideoCallQueue());
38 | handleClose();
39 | };
40 |
41 | return (
42 | <>
43 |
75 |
76 | );
77 | };
78 |
79 | export default CallNotification;
80 |
--------------------------------------------------------------------------------
/src/sections/auth/AuthSocial.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Divider, IconButton, Stack } from '@mui/material';
3 | import { GithubLogo, GoogleLogo, TwitterLogo } from 'phosphor-react';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | export default function AuthSocial() {
8 |
9 |
10 | const handleGoogleLogin = async () => {
11 |
12 | };
13 |
14 | const handleGithubLogin = async () => {
15 |
16 | };
17 |
18 | const handleTwitterLogin = async () => {
19 |
20 | };
21 |
22 | return (
23 |
24 |
34 | OR
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |