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
+231 -69
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'> } />
<Route
path='/project'
element={
<Protected>
<Project /> <Project />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/project/:id'> }
/>
<Route
path='/project/:id'
element={
<Protected>
<Project /> <Project />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/payments/:id'> }
/>
<Route
path='/payments/:id'
element={
<Protected>
<Payments /> <Payments />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/add-project'> }
/>
<Route
path='/add-project'
element={
<Protected>
<AddProject /> <AddProject />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/project-settings/:id'> }
/>
<Route
path='/project-settings/:id'
element={
<Protected>
<UpdateProject /> <UpdateProject />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/support-messaging/:project'> }
/>
<Route
path='/support-messaging/:project'
element={
<Protected>
<SupportMessaging /> <SupportMessaging />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/support-messaging/:project/:id'> }
/>
<Route
path='/support-messaging/:project/:id'
element={
<Protected>
<SupportMessaging /> <SupportMessaging />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/template'> }
/>
<Route
path='/template'
element={
<Protected>
<Template /> <Template />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/template/:id'> }
/>
<Route
path='/template/:id'
element={
<Protected>
<Template /> <Template />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/add-template'> }
/>
<Route
path='/add-template'
element={
<Protected>
<AddTemplate /> <AddTemplate />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/template-settings/:id'> }
/>
<Route
path='/template-settings/:id'
element={
<Protected>
<TemplateSettings /> <TemplateSettings />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/add-template'> }
/>
<Route
path='/add-template'
element={
<Protected>
<AddTemplate /> <AddTemplate />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/feature'> }
/>
<Route
path='/feature'
element={
<Protected>
<Feature /> <Feature />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/feature/:id'> }
/>
<Route
path='/feature/:id'
element={
<Protected>
<Feature /> <Feature />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/add-feature'> }
/>
<Route
path='/add-feature'
element={
<Protected>
<AddFeature /> <AddFeature />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/feature-settings/:id'> }
/>
<Route
path='/feature-settings/:id'
element={
<Protected>
<FeatureSettings /> <FeatureSettings />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/category'> }
/>
<Route
path='/category'
element={
<Protected>
<Category /> <Category />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/category/:id'> }
/>
<Route
path='/category/:id'
element={
<Protected>
<Category /> <Category />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/add-category'> }
/>
<Route
path='/add-category'
element={
<Protected>
<AddCategory /> <AddCategory />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/category-settings/:id'> }
/>
<Route
path='/category-settings/:id'
element={
<Protected>
<CategorySettings /> <CategorySettings />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/prototype/:id'> }
/>
<Route
path='/prototype/:id'
element={
<Protected>
<Prototype /> <Prototype />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/clients'> }
/>
<Route
path='/clients'
element={
<Protected>
<Users /> <Users />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/product-owners'> }
/>
<Route
path='/product-owners'
element={
<Protected>
<Users /> <Users />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/developers'> }
/>
<Route
path='/developers'
element={
<Protected>
<Users /> <Users />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/create-user/:role'> }
/>
<Route
path='/create-user/:role'
element={
<Protected>
<CreateUser /> <CreateUser />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/user-settings/:id'> }
/>
<Route
path='/user-settings/:id'
element={
<Protected>
<UserSettings /> <UserSettings />
</ProtectedRoute> </Protected>
<ProtectedRoute path='/settings'> }
/>
<Route
path='/settings'
element={
<Protected>
<Settings /> <Settings />
</ProtectedRoute> </Protected>
<PublicRoute path='/login'> }
/>
<Route
path='/login'
element={
<Public>
<Login /> <Login />
</PublicRoute> </Public>
<PublicRoute path='/signup'> }
/>
<Route
path='/signup'
element={
<Public>
<Signup /> <Signup />
</PublicRoute> </Public>
<ProtectedRoute path='/additional-info'> }
/>
<Route
path='/additional-info'
element={
<Protected>
<AdditionalInfo /> <AdditionalInfo />
</ProtectedRoute> </Protected>
<PublicRoute path='/forgot-password'> }
/>
<Route
path='/forgot-password'
element={
<Public>
<ForgotPassword /> <ForgotPassword />
</PublicRoute> </Public>
<PublicRoute path='/recover-account'> }
/>
<Route
path='/recover-account'
element={
<Public>
<RecoverAccount /> <RecoverAccount />
</PublicRoute> </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,