crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix router

Browse Source
This commit is contained in:
Hazem Krimi
2023-03-28 22:13:03 +01:00
parent f31c6de4dc
commit 4b6d5ac4a0
6 changed files with 305 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+263 -101
View File
@@ -1,10 +1,10 @@
import jwtDecode from 'jwt-decode'; import jwtDecode from 'jwt-decode';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Routes, Navigate } from 'react-router-dom'; import { Routes, Route, Navigate } from 'react-router-dom';
import { useLazyQuery, useReactiveVar } from '@apollo/client'; import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { import {
ProtectedRoute, Protected,
PublicRoute, Public,
Navbar, Navbar,
Sidebar, Sidebar,
Spinner, Spinner,
@@ -91,109 +91,271 @@ const App = () => {
</> </>
)} )}
<Routes> <Routes>
<ProtectedRoute path='/'> <Route path='/' element={
<Protected>
{role !== 'admin' ? ( {role !== 'admin' ? (
<Navigate to='/project' /> <Navigate to='/project' />
) : ( ) : (
<Navigate to='/clients' /> <Navigate to='/clients' />
)} )}
</ProtectedRoute> </Protected>
<ProtectedRoute path='/project'> } />
<Project /> <Route
</ProtectedRoute> path='/project'
<ProtectedRoute path='/project/:id'> element={
<Project /> <Protected>
</ProtectedRoute> <Project />
<ProtectedRoute path='/payments/:id'> </Protected>
<Payments /> }
</ProtectedRoute> />
<ProtectedRoute path='/add-project'> <Route
<AddProject /> path='/project/:id'
</ProtectedRoute> element={
<ProtectedRoute path='/project-settings/:id'> <Protected>
<UpdateProject /> <Project />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/support-messaging/:project'> }
<SupportMessaging /> />
</ProtectedRoute> <Route
<ProtectedRoute path='/support-messaging/:project/:id'> path='/payments/:id'
<SupportMessaging /> element={
</ProtectedRoute> <Protected>
<ProtectedRoute path='/template'> <Payments />
<Template /> </Protected>
</ProtectedRoute> }
<ProtectedRoute path='/template/:id'> />
<Template /> <Route
</ProtectedRoute> path='/add-project'
<ProtectedRoute path='/add-template'> element={
<AddTemplate /> <Protected>
</ProtectedRoute> <AddProject />
<ProtectedRoute path='/template-settings/:id'> </Protected>
<TemplateSettings /> }
</ProtectedRoute> />
<ProtectedRoute path='/add-template'> <Route
<AddTemplate /> path='/project-settings/:id'
</ProtectedRoute> element={
<ProtectedRoute path='/feature'> <Protected>
<Feature /> <UpdateProject />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/feature/:id'> }
<Feature /> />
</ProtectedRoute> <Route
<ProtectedRoute path='/add-feature'> path='/support-messaging/:project'
<AddFeature /> element={
</ProtectedRoute> <Protected>
<ProtectedRoute path='/feature-settings/:id'> <SupportMessaging />
<FeatureSettings /> </Protected>
</ProtectedRoute> }
<ProtectedRoute path='/category'> />
<Category /> <Route
</ProtectedRoute> path='/support-messaging/:project/:id'
<ProtectedRoute path='/category/:id'> element={
<Category /> <Protected>
</ProtectedRoute> <SupportMessaging />
<ProtectedRoute path='/add-category'> </Protected>
<AddCategory /> }
</ProtectedRoute> />
<ProtectedRoute path='/category-settings/:id'> <Route
<CategorySettings /> path='/template'
</ProtectedRoute> element={
<ProtectedRoute path='/prototype/:id'> <Protected>
<Prototype /> <Template />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/clients'> }
<Users /> />
</ProtectedRoute> <Route
<ProtectedRoute path='/product-owners'> path='/template/:id'
<Users /> element={
</ProtectedRoute> <Protected>
<ProtectedRoute path='/developers'> <Template />
<Users /> </Protected>
</ProtectedRoute> }
<ProtectedRoute path='/create-user/:role'> />
<CreateUser /> <Route
</ProtectedRoute> path='/add-template'
<ProtectedRoute path='/user-settings/:id'> element={
<UserSettings /> <Protected>
</ProtectedRoute> <AddTemplate />
<ProtectedRoute path='/settings'> </Protected>
<Settings /> }
</ProtectedRoute> />
<PublicRoute path='/login'> <Route
<Login /> path='/template-settings/:id'
</PublicRoute> element={
<PublicRoute path='/signup'> <Protected>
<Signup /> <TemplateSettings />
</PublicRoute> </Protected>
<ProtectedRoute path='/additional-info'> }
<AdditionalInfo /> />
</ProtectedRoute> <Route
<PublicRoute path='/forgot-password'> path='/add-template'
<ForgotPassword /> element={
</PublicRoute> <Protected>
<PublicRoute path='/recover-account'> <AddTemplate />
<RecoverAccount /> </Protected>
</PublicRoute> }
/>
<Route
path='/feature'
element={
<Protected>
<Feature />
</Protected>
}
/>
<Route
path='/feature/:id'
element={
<Protected>
<Feature />
</Protected>
}
/>
<Route
path='/add-feature'
element={
<Protected>
<AddFeature />
</Protected>
}
/>
<Route
path='/feature-settings/:id'
element={
<Protected>
<FeatureSettings />
</Protected>
}
/>
<Route
path='/category'
element={
<Protected>
<Category />
</Protected>
}
/>
<Route
path='/category/:id'
element={
<Protected>
<Category />
</Protected>
}
/>
<Route
path='/add-category'
element={
<Protected>
<AddCategory />
</Protected>
}
/>
<Route
path='/category-settings/:id'
element={
<Protected>
<CategorySettings />
</Protected>
}
/>
<Route
path='/prototype/:id'
element={
<Protected>
<Prototype />
</Protected>
}
/>
<Route
path='/clients'
element={
<Protected>
<Users />
</Protected>
}
/>
<Route
path='/product-owners'
element={
<Protected>
<Users />
</Protected>
}
/>
<Route
path='/developers'
element={
<Protected>
<Users />
</Protected>
}
/>
<Route
path='/create-user/:role'
element={
<Protected>
<CreateUser />
</Protected>
}
/>
<Route
path='/user-settings/:id'
element={
<Protected>
<UserSettings />
</Protected>
}
/>
<Route
path='/settings'
element={
<Protected>
<Settings />
</Protected>
}
/>
<Route
path='/login'
element={
<Public>
<Login />
</Public>
}
/>
<Route
path='/signup'
element={
<Public>
<Signup />
</Public>
}
/>
<Route
path='/additional-info'
element={
<Protected>
<AdditionalInfo />
</Protected>
}
/>
<Route
path='/forgot-password'
element={
<Public>
<ForgotPassword />
</Public>
}
/>
<Route
path='/recover-account'
element={
<Public>
<RecoverAccount />
</Public>
}
/>
</Routes> </Routes>
</> </>
) : ( ) : (
src/components/Protected/index.tsx
+19
View File
@@ -0,0 +1,19 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
type Props = {
children: React.ReactNode;
};
const Protected = ({ children }: Props) => {
const token = useReactiveVar(tokenVar);
return (
<>
{token ? children : <Navigate to='/login' />}
</>
);
};
export default Protected;
src/components/ProtectedRoute/index.tsx
-13
View File
@@ -1,13 +0,0 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate, Route, RouteProps } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
const ProtectedRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
const token = useReactiveVar(tokenVar);
return (
<Route {...rest} element={token ? children : <Navigate to='/login' />} />
);
};
export default ProtectedRoute;
src/components/Public/index.tsx
+19
View File
@@ -0,0 +1,19 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
type Props = {
children: React.ReactNode;
};
const Public = ({ children }: Props) => {
const token = useReactiveVar(tokenVar);
return (
<>
{!token ? children : <Navigate to='/' />}
</>
);
};
export default Public;
src/components/PublicRoute/index.tsx
-11
View File
@@ -1,11 +0,0 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate, Route, RouteProps } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
const PublicRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
const token = useReactiveVar(tokenVar);
return <Route {...rest} element={!token ? children : <Navigate to='/' />} />;
};
export default PublicRoute;
src/components/index.tsx
+4 -4
View File
@@ -15,8 +15,8 @@ import CheckBox from './CheckBox';
import Menu from './Menu'; import Menu from './Menu';
import Navbar from './Navbar'; import Navbar from './Navbar';
import Sidebar from './Sidebar'; import Sidebar from './Sidebar';
import ProtectedRoute from './ProtectedRoute'; import Protected from './Protected';
import PublicRoute from './PublicRoute'; import Public from './Public';
import SectionSelector from './SectionSelector'; import SectionSelector from './SectionSelector';
import Modal from './Modal'; import Modal from './Modal';
import SidebarItem from './SidebarItem'; import SidebarItem from './SidebarItem';
@@ -48,8 +48,8 @@ export {
CheckBox, CheckBox,
Navbar, Navbar,
Sidebar, Sidebar,
ProtectedRoute, Protected,
PublicRoute, Public,
SectionSelector, SectionSelector,
Modal, Modal,
SidebarItem, SidebarItem,