dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
6 changed files with 9275 additions and 5527 deletions
Showing only changes of commit 5d310be430 - Show all commits

File diff suppressed because it is too large Load diff

View file

@ -1,28 +1,12 @@
import AppRouter from "./router"; import { BrowserRouter as Router} from 'react-router-dom';
import { useSelector } from "react-redux"; import AppRouter from './router';
import { useMatch, useNavigate, useSearchParams } from "react-router-dom";
import { useEffect } from "react";
import { RootState } from "./redux/store";
import { withCookies, ReactCookieProps } from "react-cookie";
const App: React.FC<ReactCookieProps> = ({ cookies }) => { function App() {
const navigate = useNavigate(); return (
const isPanel = useMatch("/auth/login"); <Router>
const isCookiePresent = !!cookies?.get("authToken"); <AppRouter />
console.log("cookies present:", isCookiePresent); </Router>
const [searchParams] = useSearchParams();
const isAuthenticated = useSelector(
(state: RootState) => state.authReducer.isAuthenticated
); );
useEffect(() => {
if (isPanel && isCookiePresent) {
navigate("/panel/dashboard");
} }
}, [isPanel, isAuthenticated, searchParams]);
return <AppRouter />; export default App;
};
export default withCookies(App);

View file

@ -11,9 +11,6 @@ import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
import MenuButton from '../MenuButton'; import MenuButton from '../MenuButton';
import { Avatar } from '@mui/material'; import { Avatar } from '@mui/material';
import { useDispatch } from 'react-redux';
import { logoutUser } from '../../redux/slices/authSlice';
import { useCookies } from 'react-cookie';
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: '2px 0', margin: '2px 0',
@ -22,20 +19,12 @@ const MenuItem = styled(MuiMenuItem)({
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const dispatch = useDispatch();
const [cookies, setCookie, removeCookie] = useCookies(['authToken']);
const handleClick = (event: React.MouseEvent<HTMLElement>) => { const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
const handleLogout = () => {
dispatch(logoutUser({ removeCookie }));
console.log('click')
handleClose();
};
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <MenuButton
@ -81,7 +70,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
<MenuItem onClick={handleClose}>Settings</MenuItem> <MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider /> <Divider />
<MenuItem <MenuItem
onClick={handleLogout} onClick={handleClose}
sx={{ sx={{
[`& .${listItemIconClasses.root}`]: { [`& .${listItemIconClasses.root}`]: {
ml: 'auto', ml: 'auto',

View file

@ -1,32 +1,29 @@
import React from "react"; import React from 'react';
import ReactDOM from "react-dom/client"; import ReactDOM from 'react-dom/client';
import "./index.css"; import './index.css';
import App from "./App"; import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux"; import App from './App';
import store from "./redux/store"; import { Provider } from 'react-redux';
import { Slide, ToastContainer } from "react-toastify"; import store from './redux/store/store.ts';
import { BrowserRouter as Router } from "react-router-dom"; import { Slide, ToastContainer } from 'react-toastify';
import { CookiesProvider } from "react-cookie";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<CookiesProvider defaultSetOptions={{ path: "/" }}>
<Provider store={store}> <Provider store={store}>
<Router>
<App /> <App />
</Router>
<ToastContainer <ToastContainer
autoClose={2000} autoClose={2000}
hideProgressBar hideProgressBar
theme="dark" theme="dark"
transition={Slide} transition={Slide}
toastStyle={{ border: "1px solid dimgray" }} toastStyle={{ border: '1px solid dimgray' }}
/> />
</Provider> </Provider>
</CookiesProvider>
</React.StrictMode> </React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

View file

@ -1,10 +1,13 @@
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../slices/authSlice.ts'
const store = configureStore({
reducer: {
auth: authReducer,
},
});
import rootReducer from './reducers';
export const store = configureStore({
reducer: rootReducer,
})
export type RootState = ReturnType<typeof store.getState>; export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch; export type AppDispatch = typeof store.dispatch;
export default store; export default store;