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

Update dependencies and use Vite instead of CRA

Browse Source
This commit is contained in:
Hazem Krimi
2023-03-25 01:26:03 +01:00
parent 20d74fe2ff
commit f31c6de4dc
63 changed files with 5300 additions and 13080 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -0,0 +1 @@
.eslintrc.js
.eslintrc.js
+1 -12
View File
@@ -5,6 +5,7 @@ module.exports = {
'plugin:jest/recommended',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended'
],
plugins: ['react', '@typescript-eslint', 'jest', 'prettier'],
env: {
@@ -54,18 +55,6 @@ module.exports = {
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/no-explicit-any': 0,
'linebreak-style': 'off',
'jsx-a11y/label-has-associated-control': [
'error',
{
labelComponents: [],
labelAttributes: [],
controlComponents: [],
assert: 'either',
depth: 25,
},
],
'jsx-a11y/control-has-associated-label': 0,
'jsx-a11y/anchor-is-valid': 0,
'prettier/prettier': [
'error',
{
__tests__/Alert.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Alert test suite', () => {});
__tests__/Avatar.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Avatar test suite', () => {});
__tests__/Box.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Box test suite', () => {});
__tests__/Button.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Button test suite', () => {});
__tests__/CheckBox.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('CheckBox test suite', () => {});
__tests__/Input.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Input test suite', () => {});
__tests__/Link.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Link test suite', () => {});
__tests__/Menu.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Modal test suite', () => {});
__tests__/Modal.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Modal test suite', () => {});
__tests__/Search.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Search test suite', () => {});
__tests__/Spinner.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Spinner test suite', () => {});
__tests__/Text.test.tsx
-1
View File
@@ -1 +0,0 @@
describe('Text test suite', () => {});
index.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using vite"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Astrobuild</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
package.json
+47 -42
View File
@@ -3,40 +3,43 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.3.14",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@apollo/client": "^3.7.10",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.0",
"@types/jwt-decode": "^3.1.0",
"@types/node": "^12.0.0",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"@types/react-router-dom": "^5.1.7",
"@types/styled-components": "^5.1.9",
"formik": "^2.2.6",
"graphql": "^15.5.0",
"@types/node": "^18.15.7",
"@types/react": "^18.0.29",
"@types/react-dom": "^18.0.11",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.26",
"formik": "^2.2.9",
"graphql": "^16.6.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"localforage": "^1.10.0",
"match-sorter": "^6.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-elastic-carousel": "^0.11.5",
"react-flow-renderer": "^9.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-to-print": "^2.12.6",
"styled-components": "^5.2.3",
"react-router-dom": "^6.9.0",
"react-to-print": "^2.14.12",
"sort-by": "^1.2.0",
"styled-components": "^5.3.9",
"subscriptions-transport-ws": "^0.9.19",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
"typescript": "^5.0.2",
"vite-plugin-svgr": "^2.4.0",
"web-vitals": "^3.3.0",
"yup": "^1.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "vite",
"build": "vite build",
"generate-main": "graphql-codegen --config codegen-main.yml",
"generate-support": "graphql-codegen --config codegen-support.yml"
"generate-support": "graphql-codegen --config codegen-support.yml",
"lint": "yarn run eslint src --ext .ts,.tsx",
"fix": "yarn lint --fix"
},
"browserslist": {
"production": [
@@ -51,21 +54,23 @@
]
},
"devDependencies": {
"@graphql-codegen/cli": "^1.21.3",
"@graphql-codegen/introspection": "^1.18.2",
"@graphql-codegen/typescript": "^1.22.0",
"@graphql-codegen/typescript-operations": "^1.17.16",
"@typescript-eslint/eslint-plugin": "^4.21.0",
"@typescript-eslint/parser": "^4.21.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jest": "^24.3.4",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "1.7.0",
"prettier": "^2.2.1"
"@graphql-codegen/cli": "^3.2.2",
"@graphql-codegen/introspection": "^3.0.1",
"@graphql-codegen/typescript": "^3.0.2",
"@graphql-codegen/typescript-operations": "^3.0.2",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitejs/plugin-react": "^3.1.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"prettier": "^2.8.7",
"vite": "^4.2.1"
}
}
public/index.html
-49
View File
@@ -1,49 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Astrobuild</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
src/App.tsx
+43 -43
View File
@@ -1,10 +1,10 @@
import jwtDecode from 'jwt-decode';
import { useEffect } from 'react';
import { Redirect, Switch } from 'react-router-dom';
import { Routes, Navigate } from 'react-router-dom';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import {
ProtectedRoute,
AuthRoute,
PublicRoute,
Navbar,
Sidebar,
Spinner,
@@ -90,111 +90,111 @@ const App = () => {
<Sidebar />
</>
)}
<Switch>
<ProtectedRoute path='/' exact>
<Routes>
<ProtectedRoute path='/'>
{role !== 'admin' ? (
<Redirect to='/project' />
<Navigate to='/project' />
) : (
<Redirect to='/clients' />
<Navigate to='/clients' />
)}
</ProtectedRoute>
<ProtectedRoute path='/project' exact>
<ProtectedRoute path='/project'>
<Project />
</ProtectedRoute>
<ProtectedRoute path='/project/:id' exact>
<ProtectedRoute path='/project/:id'>
<Project />
</ProtectedRoute>
<ProtectedRoute path='/payments/:id' exact>
<ProtectedRoute path='/payments/:id'>
<Payments />
</ProtectedRoute>
<ProtectedRoute path='/add-project' exact>
<ProtectedRoute path='/add-project'>
<AddProject />
</ProtectedRoute>
<ProtectedRoute path='/project-settings/:id' exact>
<ProtectedRoute path='/project-settings/:id'>
<UpdateProject />
</ProtectedRoute>
<ProtectedRoute path='/support-messaging/:project' exact>
<ProtectedRoute path='/support-messaging/:project'>
<SupportMessaging />
</ProtectedRoute>
<ProtectedRoute path='/support-messaging/:project/:id' exact>
<ProtectedRoute path='/support-messaging/:project/:id'>
<SupportMessaging />
</ProtectedRoute>
<ProtectedRoute path='/template' exact>
<ProtectedRoute path='/template'>
<Template />
</ProtectedRoute>
<ProtectedRoute path='/template/:id' exact>
<ProtectedRoute path='/template/:id'>
<Template />
</ProtectedRoute>
<ProtectedRoute path='/add-template' exact>
<ProtectedRoute path='/add-template'>
<AddTemplate />
</ProtectedRoute>
<ProtectedRoute path='/template-settings/:id' exact>
<ProtectedRoute path='/template-settings/:id'>
<TemplateSettings />
</ProtectedRoute>
<ProtectedRoute path='/add-template' exact>
<ProtectedRoute path='/add-template'>
<AddTemplate />
</ProtectedRoute>
<ProtectedRoute path='/feature' exact>
<ProtectedRoute path='/feature'>
<Feature />
</ProtectedRoute>
<ProtectedRoute path='/feature/:id' exact>
<ProtectedRoute path='/feature/:id'>
<Feature />
</ProtectedRoute>
<ProtectedRoute path='/add-feature' exact>
<ProtectedRoute path='/add-feature'>
<AddFeature />
</ProtectedRoute>
<ProtectedRoute path='/feature-settings/:id' exact>
<ProtectedRoute path='/feature-settings/:id'>
<FeatureSettings />
</ProtectedRoute>
<ProtectedRoute path='/category' exact>
<ProtectedRoute path='/category'>
<Category />
</ProtectedRoute>
<ProtectedRoute path='/category/:id' exact>
<ProtectedRoute path='/category/:id'>
<Category />
</ProtectedRoute>
<ProtectedRoute path='/add-category' exact>
<ProtectedRoute path='/add-category'>
<AddCategory />
</ProtectedRoute>
<ProtectedRoute path='/category-settings/:id' exact>
<ProtectedRoute path='/category-settings/:id'>
<CategorySettings />
</ProtectedRoute>
<ProtectedRoute path='/prototype/:id' exact>
<ProtectedRoute path='/prototype/:id'>
<Prototype />
</ProtectedRoute>
<ProtectedRoute path='/clients' exact>
<ProtectedRoute path='/clients'>
<Users />
</ProtectedRoute>
<ProtectedRoute path='/product-owners' exact>
<ProtectedRoute path='/product-owners'>
<Users />
</ProtectedRoute>
<ProtectedRoute path='/developers' exact>
<ProtectedRoute path='/developers'>
<Users />
</ProtectedRoute>
<ProtectedRoute path='/create-user/:role' exact>
<ProtectedRoute path='/create-user/:role'>
<CreateUser />
</ProtectedRoute>
<ProtectedRoute path='/user-settings/:id' exact>
<ProtectedRoute path='/user-settings/:id'>
<UserSettings />
</ProtectedRoute>
<ProtectedRoute path='/settings' exact>
<ProtectedRoute path='/settings'>
<Settings />
</ProtectedRoute>
<AuthRoute path='/login' exact>
<PublicRoute path='/login'>
<Login />
</AuthRoute>
<AuthRoute path='/signup' exact>
</PublicRoute>
<PublicRoute path='/signup'>
<Signup />
</AuthRoute>
<ProtectedRoute path='/additional-info' exact>
</PublicRoute>
<ProtectedRoute path='/additional-info'>
<AdditionalInfo />
</ProtectedRoute>
<AuthRoute path='/forgot-password' exact>
<PublicRoute path='/forgot-password'>
<ForgotPassword />
</AuthRoute>
<AuthRoute path='/recover-account' exact>
</PublicRoute>
<PublicRoute path='/recover-account'>
<RecoverAccount />
</AuthRoute>
</Switch>
</PublicRoute>
</Routes>
</>
) : (
<Spinner fullScreen color={role || 'client'} />
src/components/AuthRoute/index.tsx
-13
View File
@@ -1,13 +0,0 @@
import { useReactiveVar } from '@apollo/client';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
const AuthRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
const token = useReactiveVar(tokenVar);
return (
<Route {...rest} render={() => (!token ? children : <Redirect to='/' />)} />
);
};
export default AuthRoute;
src/components/Button/index.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ type ButtonProps = {
size?: 'small' | 'big';
variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
type?: 'submit' | 'button' | 'reset';
iconLeft?: React.SVGProps<SVGSVGElement>;
iconRight?: React.SVGProps<SVGSVGElement>;
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
fullWidth?: boolean;
loading?: boolean;
disabled?: boolean;
src/components/Button/styles.ts
+2 -2
View File
@@ -4,8 +4,8 @@ type WrapperProps = {
color: 'client' | 'productOwner' | 'developer' | 'admin' | 'error';
size?: 'small' | 'big';
variant?: 'primary-action' | 'secondary-action' | 'outlined' | 'text';
iconLeft?: React.SVGProps<SVGSVGElement>;
iconRight?: React.SVGProps<SVGSVGElement>;
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
iconRight?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
load?: boolean;
disabled?: boolean;
fullWidth?: boolean;
src/components/ContextMenu/index.tsx
+3 -3
View File
@@ -25,9 +25,9 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
ref.current?.addEventListener('mouseleave', closeMenu);
return () => {
(document.querySelector(
`#${component}`
) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
(
document.querySelector(`#${component}`) as HTMLElement
)?.removeEventListener('mouseenter', openMenu);
wrapper?.removeEventListener('mouseleave', closeMenu);
};
src/components/IconButton/index.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { Wrapper } from './styles';
type IconButtonProps = {
color?: 'client' | 'productOwner' | 'developer' | 'admin';
size?: 'small' | 'medium' | 'big';
icon?: React.SVGProps<SVGSVGElement>;
icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
onClick: () => void;
};
src/components/IconButton/styles.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
type WrapperProps = {
color?: 'client' | 'productOwner' | 'developer' | 'admin';
size?: 'small' | 'medium' | 'big';
icon?: React.SVGProps<SVGSVGElement>;
icon?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
};
export const Wrapper = styled.button<WrapperProps>`
src/components/Link/index.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ type LinkProps = {
| string;
selected?: boolean;
className?: string;
iconLeft?: React.SVGProps<SVGSVGElement>;
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
onClick?: () => void;
target?: '_self' | '_blank';
};
src/components/Menu/index.tsx
+4 -4
View File
@@ -5,7 +5,7 @@ import { Text } from '..';
type MenuProps = {
className?: string;
items: Array<{
icon: React.SVGProps<SVGSVGElement>;
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
avoid?: boolean;
label: string;
action?: () => void;
@@ -30,9 +30,9 @@ const Menu = ({ items, component, className }: MenuProps) => {
ref.current?.addEventListener('mouseleave', closeMenu);
return () => {
(document.querySelector(
`#${component}`
) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
(
document.querySelector(`#${component}`) as HTMLElement
)?.removeEventListener('mouseenter', openMenu);
wrapper?.addEventListener('mouseleave', closeMenu);
};
src/components/MessagingSidebar/index.tsx
+4 -6
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import { useNavigate, useLocation } from 'react-router';
import { useReactiveVar } from '@apollo/client';
import { roleVar } from '../../graphql/state';
import { Box, Button, Text } from '..';
@@ -20,7 +20,7 @@ type MessagingSidebarProps = {
const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
const role = useReactiveVar(roleVar);
const location = useLocation();
const history = useHistory();
const navigate = useNavigate();
const [projectThreads, setProjectThreads] = useState<Array<ThreadObject>>();
useEffect(() => {
@@ -65,9 +65,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
iconLeft={<Add />}
onClick={() => {
onClose();
history.push(
`/support-messaging/${location.pathname.split('/')[2]}`
);
navigate(`/support-messaging/${location.pathname.split('/')[2]}`);
}}
/>
</Box>
@@ -87,7 +85,7 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
borderRadius='10px'
onClick={() => {
onClose();
history.push(
navigate(
`/support-messaging/${location.pathname.split('/')[2]}/${
thread.id
}`
src/components/Navbar/index.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { useReactiveVar } from '@apollo/client';
import { useHistory, useLocation } from 'react-router';
import { useNavigate, useLocation } from 'react-router';
import { roleVar, tokenVar, userVar } from '../../graphql/state';
import { Wrapper } from './styles';
import { Avatar, Link, Menu, Text } from '..';
@@ -8,7 +8,7 @@ import { Settings, Logout, Logo } from '../../assets';
const Navbar = () => {
const user = useReactiveVar(userVar);
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const location = useLocation();
return (
@@ -151,7 +151,7 @@ const Navbar = () => {
{
icon: <Settings />,
label: 'Settings',
action: () => history.push('/settings'),
action: () => navigate('/settings'),
},
{
icon: <Logout />,
@@ -159,7 +159,7 @@ const Navbar = () => {
action: () => {
tokenVar(undefined);
localStorage.removeItem('token');
history.push('/login');
navigate('/login');
},
avoid: true,
},
src/components/ProtectedRoute/index.tsx
+2 -5
View File
@@ -1,15 +1,12 @@
import { useReactiveVar } from '@apollo/client';
import { Redirect, Route, RouteProps } from 'react-router-dom';
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}
render={() => (token ? children : <Redirect to='/login' />)}
/>
<Route {...rest} element={token ? children : <Navigate to='/login' />} />
);
};
src/components/PublicRoute/index.tsx
+11
View File
@@ -0,0 +1,11 @@
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/SectionSelector/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Wrapper } from './styles';
type SectionSelectorProps = {
icon: React.SVGProps<SVGSVGElement>;
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
text: string;
color: 'client' | 'productOwner' | 'developer' | 'admin';
selected?: boolean;
src/components/SectionSelector/styles.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import styled, { css } from 'styled-components';
type WrapperProps = {
icon: React.SVGProps<SVGSVGElement>;
icon: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
color: 'client' | 'productOwner' | 'developer' | 'admin';
selected: boolean;
disabled: boolean;
src/components/Sidebar/index.tsx
+12 -13
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import { useNavigate, useLocation } from 'react-router';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { roleVar, userVar } from '../../graphql/state';
import {
@@ -39,14 +39,13 @@ const Sidebar = () => {
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
const location = useLocation();
const history = useHistory();
const navigate = useNavigate();
const [projects, setProjects] = useState<Array<ProjectOutput>>();
const [templates, setTemplates] = useState<Array<TemplateOutput>>();
const [features, setFeatures] = useState<Array<FeatureOutput>>();
const [categories, setCategories] = useState<Array<CategoryOutput>>();
const [messagingSidebarOpen, setMessagingSidebarOpen] = useState<boolean>(
false
);
const [messagingSidebarOpen, setMessagingSidebarOpen] =
useState<boolean>(false);
const [getProjectsByClientId] = useLazyQuery<
GetAllProjectsByClientIdQuery,
@@ -143,7 +142,7 @@ const Sidebar = () => {
location.pathname
)}
text={project.name[0]}
onClick={() => history.push(`/project/${project.id}`)}
onClick={() => navigate(`/project/${project.id}`)}
/>
</div>
<ContextMenu
@@ -163,7 +162,7 @@ const Sidebar = () => {
(index === 0 && location.pathname === '/template')
}
text={template.name[0]}
onClick={() => history.push(`/template/${template.id}`)}
onClick={() => navigate(`/template/${template.id}`)}
/>
</div>
<ContextMenu
@@ -183,7 +182,7 @@ const Sidebar = () => {
(index === 0 && location.pathname === '/feature')
}
text={feature.name[0]}
onClick={() => history.push(`/feature/${feature.id}`)}
onClick={() => navigate(`/feature/${feature.id}`)}
/>
</div>
<ContextMenu
@@ -203,7 +202,7 @@ const Sidebar = () => {
(index === 0 && location.pathname === '/category')
}
text={category.name[0]}
onClick={() => history.push(`/category/${category.id}`)}
onClick={() => navigate(`/category/${category.id}`)}
/>
</div>
<ContextMenu
@@ -220,16 +219,16 @@ const Sidebar = () => {
color={role}
onClick={() => {
if (/project/i.test(location.pathname)) {
history.push('/add-project');
navigate('/add-project');
}
if (/template/i.test(location.pathname)) {
history.push('/add-template');
navigate('/add-template');
}
if (/feature/i.test(location.pathname)) {
history.push('/add-feature');
navigate('/add-feature');
}
if (/category/i.test(location.pathname)) {
history.push('/add-category');
navigate('/add-category');
}
}}
/>
src/components/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import Menu from './Menu';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import ProtectedRoute from './ProtectedRoute';
import AuthRoute from './AuthRoute';
import PublicRoute from './PublicRoute';
import SectionSelector from './SectionSelector';
import Modal from './Modal';
import SidebarItem from './SidebarItem';
@@ -49,7 +49,7 @@ export {
Navbar,
Sidebar,
ProtectedRoute,
AuthRoute,
PublicRoute,
SectionSelector,
Modal,
SidebarItem,
src/graphql/types.support.ts
+61 -67
View File
@@ -1,7 +1,13 @@
export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
export type Exact<T extends { [key: string]: unknown }> = {
[K in keyof T]: T[K];
};
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
[SubKey in K]?: Maybe<T[SubKey]>;
};
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
[SubKey in K]: Maybe<T[SubKey]>;
};
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: string;
@@ -11,7 +17,6 @@ export type Scalars = {
Float: number;
};
export type MutationRoot = {
__typename?: 'MutationRoot';
createThread: Scalars['ID'];
@@ -19,27 +24,23 @@ export type MutationRoot = {
sendMsg: Scalars['ID'];
};
export type MutationRootCreateThreadArgs = {
projectId: Scalars['String'];
title: Scalars['String'];
threadDescription: Scalars['String'];
};
export type MutationRootDeleteThreadArgs = {
threadId: Scalars['String'];
};
export type MutationRootSendMsgArgs = {
threadId: Scalars['String'];
username: Scalars['String'];
msg: Scalars['String'];
};
export type MutationType =
| 'CREATED';
export type MutationType = 'CREATED';
export type QueryRoot = {
__typename?: 'QueryRoot';
@@ -48,17 +49,14 @@ export type QueryRoot = {
getThreadById: ThreadObject;
};
export type QueryRootMessagesArgs = {
threadId: Scalars['String'];
};
export type QueryRootGetProjectThreadsArgs = {
projectId: Scalars['String'];
};
export type QueryRootGetThreadByIdArgs = {
threadId: Scalars['String'];
};
@@ -75,7 +73,6 @@ export type SubscriptionRoot = {
connectStream: StreamChanged;
};
export type SubscriptionRootConnectStreamArgs = {
mutationType?: Maybe<MutationType>;
};
@@ -105,48 +102,46 @@ export type GetProjectThreadsQueryVariables = Exact<{
projectId: Scalars['String'];
}>;
export type GetProjectThreadsQuery = (
{ __typename?: 'QueryRoot' }
& { getProjectThreads: Array<(
{ __typename?: 'ThreadObject' }
& Pick<ThreadObject, 'id' | 'title' | 'threadDescription'>
& { userMessages: Array<(
{ __typename?: 'UserMessage' }
& Pick<UserMessage, 'username' | 'text'>
)> }
)> }
);
export type GetProjectThreadsQuery = { __typename?: 'QueryRoot' } & {
getProjectThreads: Array<
{ __typename?: 'ThreadObject' } & Pick<
ThreadObject,
'id' | 'title' | 'threadDescription'
> & {
userMessages: Array<
{ __typename?: 'UserMessage' } & Pick<
UserMessage,
'username' | 'text'
>
>;
}
>;
};
export type GetThreadByIdQueryVariables = Exact<{
threadId: Scalars['String'];
}>;
export type GetThreadByIdQuery = (
{ __typename?: 'QueryRoot' }
& { getThreadById: (
{ __typename?: 'ThreadObject' }
& Pick<ThreadObject, 'id' | 'title' | 'threadDescription'>
& { userMessages: Array<(
{ __typename?: 'UserMessage' }
& Pick<UserMessage, 'username' | 'text'>
)> }
) }
);
export type GetThreadByIdQuery = { __typename?: 'QueryRoot' } & {
getThreadById: { __typename?: 'ThreadObject' } & Pick<
ThreadObject,
'id' | 'title' | 'threadDescription'
> & {
userMessages: Array<
{ __typename?: 'UserMessage' } & Pick<UserMessage, 'username' | 'text'>
>;
};
};
export type MessagesQueryVariables = Exact<{
threadId: Scalars['String'];
}>;
export type MessagesQuery = (
{ __typename?: 'QueryRoot' }
& { messages: Array<(
{ __typename?: 'UserMessage' }
& Pick<UserMessage, 'username' | 'text'>
)> }
);
export type MessagesQuery = { __typename?: 'QueryRoot' } & {
messages: Array<
{ __typename?: 'UserMessage' } & Pick<UserMessage, 'username' | 'text'>
>;
};
export type CreateThreadMutationVariables = Exact<{
projectId: Scalars['String'];
@@ -154,11 +149,10 @@ export type CreateThreadMutationVariables = Exact<{
threadDescription: Scalars['String'];
}>;
export type CreateThreadMutation = (
{ __typename?: 'MutationRoot' }
& Pick<MutationRoot, 'createThread'>
);
export type CreateThreadMutation = { __typename?: 'MutationRoot' } & Pick<
MutationRoot,
'createThread'
>;
export type SendMsgMutationVariables = Exact<{
threadId: Scalars['String'];
@@ -166,25 +160,25 @@ export type SendMsgMutationVariables = Exact<{
msg: Scalars['String'];
}>;
export type SendMsgMutation = (
{ __typename?: 'MutationRoot' }
& Pick<MutationRoot, 'sendMsg'>
);
export type SendMsgMutation = { __typename?: 'MutationRoot' } & Pick<
MutationRoot,
'sendMsg'
>;
export type ConnectStreamSubscriptionVariables = Exact<{
mutationType?: Maybe<MutationType>;
}>;
export type ConnectStreamSubscription = (
{ __typename?: 'SubscriptionRoot' }
& { connectStream: (
{ __typename?: 'StreamChanged' }
& Pick<StreamChanged, 'mutationType' | 'id'>
& { userMessage?: Maybe<(
{ __typename?: 'UserMessageObject' }
& Pick<UserMessageObject, 'id' | 'username' | 'text'>
)> }
) }
);
export type ConnectStreamSubscription = { __typename?: 'SubscriptionRoot' } & {
connectStream: { __typename?: 'StreamChanged' } & Pick<
StreamChanged,
'mutationType' | 'id'
> & {
userMessage?: Maybe<
{ __typename?: 'UserMessageObject' } & Pick<
UserMessageObject,
'id' | 'username' | 'text'
>
>;
};
};
src/graphql/types.ts
+2068 -1521
View File
File diff suppressed because it is too large Load Diff
src/index.tsx
+9 -7
View File
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
import {
ApolloClient,
InMemoryCache,
@@ -18,15 +18,15 @@ import GlobalStyles from './GlobalStyles';
import reportWebVitals from './reportWebVitals';
const httpLinkMain = createHttpLink({
uri: process.env.REACT_APP_GRAPHQL_API,
uri: import.meta.env.VITE_GRAPHQL_API,
});
const httpLinkSupport = createHttpLink({
uri: process.env.REACT_APP_GRAPHQL_SUPPORT_API,
uri: import.meta.env.VITE_GRAPHQL_SUPPORT_API,
});
const wsLink = new WebSocketLink({
uri: `${process.env.REACT_APP_GRAPHQL_SUPPORT_SUBSCRIPTIONS_API}`,
uri: `${import.meta.env.VITE_GRAPHQL_SUPPORT_SUBSCRIPTIONS_API}`,
options: {
reconnect: true,
},
@@ -65,7 +65,10 @@ export const clientSupport = new ApolloClient({
cache: new InMemoryCache(),
});
ReactDOM.render(
const container = document.getElementById('app');
const root = ReactDOMClient.createRoot(container as HTMLElement);
root.render(
<React.StrictMode>
<ApolloProvider client={clientMain}>
<ThemeProvider theme={theme}>
@@ -75,8 +78,7 @@ ReactDOM.render(
</BrowserRouter>
</ThemeProvider>
</ApolloProvider>
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
src/pages/AddCategory/index.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory } from 'react-router';
import { Navigate, useNavigate } from 'react-router';
import { useMutation, useReactiveVar } from '@apollo/client';
import React, { useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -22,7 +22,7 @@ import {
import { ADD_CATEGORY } from '../../graphql/category.api';
const AddCategory = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const [error, setError] = useState<string>('');
@@ -32,10 +32,10 @@ const AddCategory = () => {
AddCategoryMutationVariables
>(ADD_CATEGORY, {
onCompleted({ addCategory: { id } }) {
history.push(`/category/${id}`);
navigate(`/category/${id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -73,7 +73,7 @@ const AddCategory = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -144,7 +144,7 @@ const AddCategory = () => {
formData.append('upload_preset', 'xofll5kc');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -190,9 +190,9 @@ const AddCategory = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/AddFeature/index.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory } from 'react-router';
import { Navigate, useNavigate } from 'react-router';
import { useMutation, useReactiveVar } from '@apollo/client';
import React, { useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -24,7 +24,7 @@ import {
import { ADD_FEATURE } from '../../graphql/feature.api';
const AddFeature = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const [newFeature, setNewFeature] = useState<{
name: string;
@@ -62,10 +62,10 @@ const AddFeature = () => {
AddFeatureMutationVariables
>(ADD_FEATURE, {
onCompleted({ addFeature: { id } }) {
history.push(`/feature/${id}`);
navigate(`/feature/${id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -129,7 +129,7 @@ const AddFeature = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -214,7 +214,7 @@ const AddFeature = () => {
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
`${import.meta.env.VITE_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
@@ -428,7 +428,7 @@ const AddFeature = () => {
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
`${import.meta.env.VITE_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
@@ -479,9 +479,9 @@ const AddFeature = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/AddProject/index.tsx
+24 -27
View File
@@ -2,7 +2,7 @@
import Carousel, { consts } from 'react-elastic-carousel';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useHistory } from 'react-router';
import { useNavigate } from 'react-router';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import { useState, useEffect } from 'react';
import { roleVar, userVar } from '../../graphql/state';
@@ -64,7 +64,7 @@ import { CREATE_USER, GET_ALL_USERS } from '../../graphql/admin.api';
import { GET_COUNTRY_CODES } from '../../graphql/auth.api';
const AddProject = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
const [error, setError] = useState<string>('');
@@ -86,14 +86,10 @@ const AddProject = () => {
const [chosenFeatures, setChosenFeatures] = useState<Array<FeatureOutput>>(
[]
);
const [
chosenDeliverables,
setChosenDeliverables,
] = useState<DelivrableInput>();
const [
chosenPaymentOption,
setChosenPaymentOption,
] = useState<PaymentOptionInput>();
const [chosenDeliverables, setChosenDeliverables] =
useState<DelivrableInput>();
const [chosenPaymentOption, setChosenPaymentOption] =
useState<PaymentOptionInput>();
const [chosenPlatforms, setChosenPlatforms] = useState<Array<string>>([]);
const [selectedFeature, setSelectedFeature] = useState<FeatureOutput>();
const [categories, setCategories] = useState<Array<CategoryOutput>>([]);
@@ -200,23 +196,21 @@ const AddProject = () => {
setStep('project-metadata');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
const [
addProjectProposal,
{ loading: addProjectProposalLoading },
] = useMutation<
const [addProjectProposal, { loading: addProjectProposalLoading }] =
useMutation<
AddProjectProposalMutation,
AddProjectProposalMutationVariables
>(ADD_PROJECT_PROPOSAL, {
onCompleted({ addProjectProposal: proposalData }) {
history.push(`/project/${proposalData.id}`);
navigate(`/project/${proposalData.id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -226,7 +220,7 @@ const AddProject = () => {
AddProjectMutationVariables
>(ADD_PROJECT, {
onCompleted({ addProject: projectData }) {
if (role === 'client') history.push(`/project/${projectData.id}`);
if (role === 'client') navigate(`/project/${projectData.id}`);
else {
addProjectProposal({
variables: {
@@ -242,7 +236,7 @@ const AddProject = () => {
}
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -641,7 +635,7 @@ const AddProject = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -756,7 +750,7 @@ const AddProject = () => {
basicInfoForm.setFieldValue('imageSource', '');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -1055,8 +1049,9 @@ const AddProject = () => {
{
...deliverablesPlatformsForm.values
.selectedDeliverables,
specification: !deliverablesPlatformsForm.values
.selectedDeliverables.specification,
specification:
!deliverablesPlatformsForm.values.selectedDeliverables
.specification,
}
);
}}
@@ -1087,8 +1082,9 @@ const AddProject = () => {
{
...deliverablesPlatformsForm.values
.selectedDeliverables,
design: !deliverablesPlatformsForm.values
.selectedDeliverables.design,
design:
!deliverablesPlatformsForm.values.selectedDeliverables
.design,
}
);
}}
@@ -1149,8 +1145,9 @@ const AddProject = () => {
{
...deliverablesPlatformsForm.values
.selectedDeliverables,
fullBuild: !deliverablesPlatformsForm.values
.selectedDeliverables.fullBuild,
fullBuild:
!deliverablesPlatformsForm.values.selectedDeliverables
.fullBuild,
}
);
}}
src/pages/AddTemplate/index.tsx
+10 -11
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory } from 'react-router';
import { Navigate, useNavigate } from 'react-router';
import {
useLazyQuery,
useMutation,
@@ -38,7 +38,7 @@ import { GET_ALL_CATEGORIES } from '../../graphql/category.api';
import { GET_ALL_FEATURES } from '../../graphql/feature.api';
const AddTemplate = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const [newTemplate, setNewTemplate] = useState<TemplateInput>({
name: '',
@@ -77,9 +77,8 @@ const AddTemplate = () => {
features: [],
});
const [availableFeatures, setAvailableFeatures] = useState<
Array<FeatureOutput>
>();
const [availableFeatures, setAvailableFeatures] =
useState<Array<FeatureOutput>>();
const [selectedSection, setSelectedSection] = useState<
'general' | 'specification' | 'features'
@@ -108,10 +107,10 @@ const AddTemplate = () => {
AddTemplateMutationVariables
>(ADD_TEMPLATE, {
onCompleted({ addTemplate: { id } }) {
history.push(`/template/${id}`);
navigate(`/template/${id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -275,7 +274,7 @@ const AddTemplate = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -368,7 +367,7 @@ const AddTemplate = () => {
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
`${import.meta.env.VITE_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
@@ -814,9 +813,9 @@ const AddTemplate = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'developer' && <Redirect to='/project' />)}
(role === 'developer' && <Navigate to='/project' />)}
</>
);
};
src/pages/Auth/AdditionalInfo/index.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
import {
Box,
@@ -24,7 +24,7 @@ import { GET_COUNTRY_CODES, UPDATE_USER_INFO } from '../../../graphql/auth.api';
import { userVar } from '../../../graphql/state';
const AdditionalInfo = () => {
const history = useHistory();
const navigate = useNavigate();
const [error, setError] = useState<string>('');
const currentUser = useReactiveVar(userVar);
const { data: countryCodes, loading: countryCodesLoading } = useQuery<
@@ -38,10 +38,10 @@ const AdditionalInfo = () => {
>(UPDATE_USER_INFO, {
onCompleted({ updateUserInfo: user }) {
userVar(user);
history.push('/');
navigate('/');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
src/pages/Auth/ForgotPassword/index.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const ForgotPassword = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
src/pages/Auth/Login/index.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useMutation } from '@apollo/client';
import { useHistory } from 'react-router';
import { useNavigate } from 'react-router';
import { useState } from 'react';
import { tokenVar, roleVar, userVar } from '../../../graphql/state';
import { Login as LoginIllustration, Logo } from '../../../assets';
@@ -12,7 +12,7 @@ import { LOGIN } from '../../../graphql/auth.api';
import { LoginMutation, LoginMutationVariables } from '../../../graphql/types';
const Login = () => {
const history = useHistory();
const navigate = useNavigate();
const [error, setError] = useState<string>('');
const [login, { loading }] = useMutation<
@@ -39,10 +39,10 @@ const Login = () => {
tokenVar(token);
userVar(user);
localStorage.setItem('token', token);
history.push('/');
navigate('/');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
src/pages/Auth/RecoverAccount/index.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import * as Yup from 'yup';
import { useMutation } from '@apollo/client';
import { useFormik } from 'formik';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { Login as LoginIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Text, Alert } from '../../../components';
import { CONFIRM_USER_RESET_PASSWORD } from '../../../graphql/auth.api';
@@ -15,7 +15,7 @@ import { Wrapper } from './styles';
const RecoverAccount = () => {
const params = new URLSearchParams(window.location.search);
const history = useHistory();
const navigate = useNavigate();
const [error, setError] = useState<string>('');
const [confirmResetPassword, { loading }] = useMutation<
@@ -23,10 +23,10 @@ const RecoverAccount = () => {
ConfirmUserResetPasswordMutationVariables
>(CONFIRM_USER_RESET_PASSWORD, {
onCompleted() {
history.push('/login');
navigate('/login');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
src/pages/Auth/Signup/index.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import { Signup as SignupIllustration, Logo } from '../../../assets';
import { Box, Button, Input, Link, Text, Alert } from '../../../components';
@@ -15,7 +15,7 @@ import { SIGNUP } from '../../../graphql/auth.api';
import { roleVar, tokenVar, userVar } from '../../../graphql/state';
const Signup = () => {
const history = useHistory();
const navigate = useNavigate();
const [error, setError] = useState<string>('');
const [signup, { loading }] = useMutation<
@@ -27,10 +27,10 @@ const Signup = () => {
tokenVar(token);
userVar(user);
localStorage.setItem('token', token);
history.push('/additional-info');
navigate('/additional-info');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
src/pages/Category/index.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Empty, Settings } from '../../assets';
import { Box, Button, Spinner, Text } from '../../components';
@@ -19,7 +19,7 @@ import {
const Category = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const [category, setCategory] = useState<CategoryOutput>();
@@ -77,7 +77,7 @@ const Category = () => {
text='Settings'
iconLeft={<Settings />}
onClick={() =>
history.push(`/category-settings/${id || category.id}`)
navigate(`/category-settings/${id || category.id}`)
}
/>
</Box>
@@ -109,9 +109,9 @@ const Category = () => {
</>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/CategorySettings/index.tsx
+14 -15
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import React, { useEffect, useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -33,7 +33,7 @@ import {
} from '../../graphql/category.api';
const CategorySettings = () => {
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const role = useReactiveVar(roleVar);
@@ -41,9 +41,8 @@ const CategorySettings = () => {
const [success, setSuccess] = useState<boolean>(false);
const [category, setCategory] = useState<CategoryOutput>();
const [deleteCategoryModal, setDeleteCategoryModal] = useState<boolean>(
false
);
const [deleteCategoryModal, setDeleteCategoryModal] =
useState<boolean>(false);
const [getCategory, { loading: categoryLoading }] = useLazyQuery<
GetCategoryByIdQuery,
@@ -65,7 +64,7 @@ const CategorySettings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -75,16 +74,16 @@ const CategorySettings = () => {
DeleteCategoryMutationVariables
>(DELETE_CATEGORY, {
onCompleted() {
history.push('/category');
navigate('/category');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
useEffect(() => {
getCategory({ variables: { id } });
getCategory({ variables: { id: id as string } });
// eslint-disable-next-line
}, [id]);
@@ -105,7 +104,7 @@ const CategorySettings = () => {
onSubmit: ({ name, description, imageName, imageSource }) => {
updateCategory({
variables: {
id,
id: id as string,
category: {
name,
description,
@@ -126,7 +125,7 @@ const CategorySettings = () => {
description='
If you delete this category you cannot recover it.'
onClose={() => setDeleteCategoryModal(false)}
onConfirm={() => deleteCategory({ variables: { id } })}
onConfirm={() => deleteCategory({ variables: { id: id as string } })}
></Modal>
)}
<Box>
@@ -134,7 +133,7 @@ const CategorySettings = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -212,7 +211,7 @@ const CategorySettings = () => {
form.setFieldValue('imageSource', '');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -273,9 +272,9 @@ const CategorySettings = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/CreateUser/index.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
import { useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -26,7 +26,7 @@ import { GET_COUNTRY_CODES } from '../../graphql/auth.api';
import { CREATE_USER, GET_ALL_USERS } from '../../graphql/admin.api';
const CreateUser = () => {
const history = useHistory();
const navigate = useNavigate();
const { role: newUserRole } = useParams<{
role: 'Client' | 'ProductOwner' | 'Developer';
}>();
@@ -62,7 +62,7 @@ const CreateUser = () => {
country: '',
zip: '',
},
role: newUserRole,
role: newUserRole!,
});
const [selectedSection, setSelectedSection] = useState<
@@ -81,10 +81,10 @@ const CreateUser = () => {
: newUserRole === 'ProductOwner'
? '/product-owners'
: '/developers';
history.push(location);
navigate(location);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
refetchQueries: [{ query: GET_ALL_USERS }],
@@ -179,7 +179,7 @@ const CreateUser = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -471,7 +471,7 @@ const CreateUser = () => {
</Box>
</Wrapper>
) : (
<Redirect to='/' />
<Navigate to='/' />
);
};
src/pages/Feature/index.tsx
+6 -6
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { Navigate } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Empty, Settings } from '../../assets';
import {
@@ -24,7 +24,7 @@ import { GET_ALL_FEATURES, GET_FEATURE_BY_ID } from '../../graphql/feature.api';
const Feature = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const [feature, setFeature] = useState<FeatureOutput>();
@@ -82,7 +82,7 @@ const Feature = () => {
text='Settings'
iconLeft={<Settings />}
onClick={() =>
history.push(`/feature-settings/${id || feature.id}`)
navigate(`/feature-settings/${id || feature.id}`)
}
/>
</Box>
@@ -176,9 +176,9 @@ const Feature = () => {
</>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/FeatureSettings/index.tsx
+17 -15
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import React, { useEffect, useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -35,7 +35,7 @@ import {
} from '../../graphql/feature.api';
const FeatureSettings = () => {
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const role = useReactiveVar(roleVar);
@@ -45,7 +45,7 @@ const FeatureSettings = () => {
const [error, setError] = useState<string>('');
const [success, setSuccess] = useState<boolean>(false);
const [feature, setFeature] = useState<FeatureOutput>({
id,
id: id as string,
name: '',
description: '',
featureType: '',
@@ -79,7 +79,7 @@ const FeatureSettings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -89,16 +89,16 @@ const FeatureSettings = () => {
DeleteFeatureMutationVariables
>(DELETE_FEATURE, {
onCompleted() {
history.push('/feature');
navigate('/feature');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
useEffect(() => {
getFeature({ variables: { id } });
getFeature({ variables: { id: id as string } });
// eslint-disable-next-line
}, [id]);
@@ -134,7 +134,7 @@ const FeatureSettings = () => {
}) => {
updateFeature({
variables: {
id,
id: id as string,
feature: {
name,
description,
@@ -162,7 +162,7 @@ const FeatureSettings = () => {
onSubmit: ({ wireframes }) => {
updateFeature({
variables: {
id,
id: id as string,
feature: {
name: feature.name,
description: feature.description,
@@ -185,7 +185,7 @@ const FeatureSettings = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -247,7 +247,9 @@ const FeatureSettings = () => {
description='
If you delete this feature you cannot recover it.'
onClose={() => setDeleteFeatureModal(false)}
onConfirm={() => deleteFeature({ variables: { id } })}
onConfirm={() =>
deleteFeature({ variables: { id: id as string } })
}
></Modal>
)}
<form onSubmit={generalForm.handleSubmit}>
@@ -287,7 +289,7 @@ const FeatureSettings = () => {
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
`${import.meta.env.VITE_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
@@ -515,7 +517,7 @@ const FeatureSettings = () => {
formData.append('upload_preset', 'xofll5kc');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -564,9 +566,9 @@ const FeatureSettings = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/Payments/index.tsx
+9 -9
View File
@@ -1,9 +1,9 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { Navigate } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Wrapper } from './styles';
import { Alert, Box, Button, Input, Spinner, Text } from '../../components';
@@ -34,7 +34,7 @@ type TransactionData = {
const Payments = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const [project, setProject] = useState<ProjectOutput>();
const [success, setSuccess] = useState<boolean>(false);
@@ -60,7 +60,7 @@ const Payments = () => {
try {
const transactionsResult = await (
await fetch(`${process.env.REACT_APP_PAYMENT_API}/transactions`, {
await fetch(`${import.meta.env.VITE_PAYMENT_API}/transactions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -128,7 +128,7 @@ const Payments = () => {
}
const transactionsResult = await (
await fetch(`${process.env.REACT_APP_PAYMENT_API}/charge`, {
await fetch(`${import.meta.env.VITE_PAYMENT_API}/charge`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -158,7 +158,7 @@ const Payments = () => {
}
} catch (err) {
setPaymentLoading(false);
setError(err);
setError(err as string);
setSelectedChunk(undefined);
resetForm();
setTimeout(() => setError(''), 3000);
@@ -182,7 +182,7 @@ const Payments = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -494,9 +494,9 @@ const Payments = () => {
</>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'developer' ||
(role === 'productOwner' && <Redirect to='/project' />)}
(role === 'productOwner' && <Navigate to='/project' />)}
</>
);
};
src/pages/Project/index.tsx
+20 -25
View File
@@ -1,10 +1,10 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useReactToPrint } from 'react-to-print';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState, useRef } from 'react';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { Navigate } from 'react-router';
import { roleVar, userVar } from '../../graphql/state';
import {
Design,
@@ -80,7 +80,7 @@ type TransactionData = {
const Project = () => {
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
const history = useHistory();
const navigate = useNavigate();
const printRef = useRef<HTMLDivElement>(null);
const { id } = useParams<{ id: string }>();
const [project, setProject] = useState<ProjectOutput>();
@@ -91,10 +91,8 @@ const Project = () => {
const [fullBuildModal, setFullBuildModal] = useState<boolean>(false);
const [transactionsData, setTransactionsData] = useState<TransactionData>();
const [
getProjectsByClientId,
{ loading: clientProjectsLoading },
] = useLazyQuery<
const [getProjectsByClientId, { loading: clientProjectsLoading }] =
useLazyQuery<
GetAllProjectsByClientIdQuery,
GetAllProjectsByClientIdQueryVariables
>(GET_ALL_PROJECTS_BY_CLIENT_ID, {
@@ -103,7 +101,7 @@ const Project = () => {
},
onCompleted({ getAllProjectsByClientId }) {
if (getAllProjectsByClientId.length > 0)
history.push(`/project/${getAllProjectsByClientId[0].id}`);
navigate(`/project/${getAllProjectsByClientId[0].id}`);
},
fetchPolicy: 'network-only',
});
@@ -114,7 +112,7 @@ const Project = () => {
>(GET_ALL_PROJECTS, {
onCompleted({ getAllProjects }) {
if (getAllProjects.length > 0)
history.push(`/project/${getAllProjects[0].id}`);
navigate(`/project/${getAllProjects[0].id}`);
},
fetchPolicy: 'network-only',
});
@@ -146,7 +144,7 @@ const Project = () => {
setProject(changedStateProject);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -161,7 +159,7 @@ const Project = () => {
},
onError({ graphQLErrors }) {
setDesignModal(false);
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -176,7 +174,7 @@ const Project = () => {
},
onError({ graphQLErrors }) {
setMvpModal(false);
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -191,7 +189,7 @@ const Project = () => {
},
onError({ graphQLErrors }) {
setFullBuildModal(false);
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -225,7 +223,7 @@ const Project = () => {
try {
const transactionsResult = await (
await fetch(`${process.env.REACT_APP_PAYMENT_API}/transactions`, {
await fetch(`${import.meta.env.VITE_PAYMENT_API}/transactions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -336,7 +334,7 @@ const Project = () => {
addDesignForm.setFieldValue('fileSource', '');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -384,7 +382,7 @@ const Project = () => {
addMvpForm.setFieldValue('fileSource', '');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
@@ -462,7 +460,7 @@ const Project = () => {
iconLeft={<Design />}
disabled={!prototype}
onClick={() =>
history.push(`/prototype/${project.template.id}`)
navigate(`/prototype/${project.template.id}`)
}
/>
</Box>
@@ -474,9 +472,7 @@ const Project = () => {
text='Payments'
iconLeft={<Payment />}
disabled={transactionsData?.status}
onClick={() =>
history.push(`/payments/${project.id}`)
}
onClick={() => navigate(`/payments/${project.id}`)}
/>
</Box>
)}
@@ -487,9 +483,7 @@ const Project = () => {
variant='primary-action'
text='Settings'
iconLeft={<Settings />}
onClick={() =>
history.push(`/project-settings/${id}`)
}
onClick={() => navigate(`/project-settings/${id}`)}
/>
</Box>
)}
@@ -873,7 +867,8 @@ const Project = () => {
</Box>
</Box>
)}
{project.template.specification && project.template.features && (
{project.template.specification &&
project.template.features && (
<Box display='none'>
<SpecificationPrint
ref={printRef}
@@ -905,7 +900,7 @@ const Project = () => {
)}
</>
) : (
<Redirect to='/clients' />
<Navigate to='/clients' />
);
};
src/pages/Prototype/index.tsx
+8 -8
View File
@@ -11,9 +11,9 @@ import ReactFlow, {
ArrowHeadType,
} from 'react-flow-renderer';
import { useEffect, useState, useRef } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { Navigate } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Empty, ArrowLeft, Edit, CheckCircle } from '../../assets';
import {
@@ -47,7 +47,7 @@ import {
const Prototype = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const [template, setTemplate] = useState<TemplateOutput>();
const [prototype, setPrototype] = useState<Array<ProtoTypeOutput>>();
@@ -86,7 +86,7 @@ const Prototype = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -190,7 +190,7 @@ const Prototype = () => {
updatePrototype({
variables: {
prototype: {
templateId: id,
templateId: id as string,
// @ts-ignore
prototype: prototypeInput,
},
@@ -200,7 +200,7 @@ const Prototype = () => {
addPrototype({
variables: {
prototype: {
templateId: id,
templateId: id as string,
// @ts-ignore
prototype: prototypeInput,
},
@@ -235,7 +235,7 @@ const Prototype = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -364,7 +364,7 @@ const Prototype = () => {
)}
</>
) : (
<>{role === 'admin' && <Redirect to='/clients' />}</>
<>{role === 'admin' && <Navigate to='/clients' />}</>
);
};
src/pages/Settings/index.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useHistory } from 'react-router';
import { useNavigate } from 'react-router';
import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
import { useState } from 'react';
import { roleVar, tokenVar, userVar } from '../../graphql/state';
@@ -35,7 +35,7 @@ import {
} from '../../graphql/auth.api';
const Settings = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
const { data: countryCodes, loading: countryCodesLoading } = useQuery<
@@ -68,7 +68,7 @@ const Settings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -131,7 +131,7 @@ const Settings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -180,11 +180,11 @@ const Settings = () => {
userVar(undefined);
roleVar(undefined);
setDeleteAccountModal(false);
history.push('/signup');
navigate('/signup');
},
onError({ graphQLErrors }) {
setDeleteAccountModal(false);
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -214,7 +214,7 @@ const Settings = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
src/pages/SupportMessaging/index.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useParams, useHistory } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { useReactiveVar } from '@apollo/client';
import { useState, useEffect } from 'react';
import { roleVar, userVar } from '../../graphql/state';
@@ -35,7 +35,7 @@ const SupportMessaging = () => {
const { project, id } = useParams<{ id: string; project: string }>();
const role = useReactiveVar(roleVar);
const currentUser = useReactiveVar(userVar);
const history = useHistory();
const navigate = useNavigate();
const [thread, setThread] = useState<ThreadObject>();
const [messages, setMessages] = useState<Array<UserMessageObject>>([]);
const [addedMessages, setAddedMessages] = useState<Array<UserMessageObject>>(
@@ -117,12 +117,12 @@ const SupportMessaging = () => {
>({
mutation: CREATE_THREAD,
variables: {
projectId: project,
projectId: project as string,
title,
threadDescription: description,
},
});
history.push(
navigate(
`/support-messaging/${project}/${createdThread.data?.createThread}`
);
},
@@ -139,7 +139,7 @@ const SupportMessaging = () => {
await clientSupport.mutate<SendMsgMutation, SendMsgMutationVariables>({
mutation: SEND_MSG,
variables: {
threadId: id,
threadId: id as string,
username: `${currentUser?.firstName} ${currentUser?.lastName}`,
msg,
},
src/pages/Template/index.tsx
+8 -10
View File
@@ -1,8 +1,8 @@
import { useReactToPrint } from 'react-to-print';
import { useEffect, useState, useRef } from 'react';
import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { useHistory, useParams } from 'react-router-dom';
import { Navigate } from 'react-router';
import { useNavigate, useParams } from 'react-router-dom';
import { roleVar } from '../../graphql/state';
import { Design, Empty, Settings, Specification } from '../../assets';
import {
@@ -38,7 +38,7 @@ import { GET_PROTOTYPE_BY_ID } from '../../graphql/prototype.api';
const Template = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const printRef = useRef<HTMLDivElement>(null);
const { id } = useParams<{ id: string }>();
const [template, setTemplate] = useState<TemplateOutput>();
@@ -61,7 +61,7 @@ const Template = () => {
>(GET_ALL_TEMPLATES, {
onCompleted({ getAllTemplates }) {
if (getAllTemplates.length > 0)
history.push(`/template/${getAllTemplates[0].id}`);
navigate(`/template/${getAllTemplates[0].id}`);
},
fetchPolicy: 'network-only',
});
@@ -150,7 +150,7 @@ const Template = () => {
prototype === undefined && role === 'productOwner'
}
onClick={() =>
history.push(`/prototype/${id || template.id}`)
navigate(`/prototype/${id || template.id}`)
}
/>
</Box>
@@ -162,9 +162,7 @@ const Template = () => {
text='Settings'
iconLeft={<Settings />}
onClick={() =>
history.push(
`/template-settings/${id || template.id}`
)
navigate(`/template-settings/${id || template.id}`)
}
/>
</Box>
@@ -269,8 +267,8 @@ const Template = () => {
</>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'client' && <Redirect to='/project' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' && <Navigate to='/project' />}
</>
);
};
src/pages/TemplateSettings/index.tsx
+80 -66
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import {
useLazyQuery,
useMutation,
@@ -47,7 +47,7 @@ import { GET_ALL_CATEGORIES } from '../../graphql/category.api';
import { GET_ALL_FEATURES } from '../../graphql/feature.api';
const TemplateSettings = () => {
const history = useHistory();
const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
const role = useReactiveVar(roleVar);
const [template, setTemplate] = useState<TemplateOutput>({
@@ -88,9 +88,8 @@ const TemplateSettings = () => {
features: [],
});
const [availableFeatures, setAvailableFeatures] = useState<
Array<FeatureOutput>
>();
const [availableFeatures, setAvailableFeatures] =
useState<Array<FeatureOutput>>();
const [selectedSection, setSelectedSection] = useState<
'general' | 'specification' | 'features'
@@ -98,9 +97,8 @@ const TemplateSettings = () => {
const [error, setError] = useState<string>('');
const [success, setSuccess] = useState<boolean>(false);
const [deleteTemplateModal, setDeleteTemplateModal] = useState<boolean>(
false
);
const [deleteTemplateModal, setDeleteTemplateModal] =
useState<boolean>(false);
const { data: categories, loading: categoriesLoading } = useQuery<
GetAllCategoriesQuery,
@@ -139,7 +137,7 @@ const TemplateSettings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -149,16 +147,16 @@ const TemplateSettings = () => {
DeleteTemplateMutationVariables
>(DELETE_TEMPLATE, {
onCompleted() {
history.push('/template');
navigate('/template');
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
useEffect(() => {
getTemplate({ variables: { id } });
getTemplate({ variables: { id: id as string } });
getFeatures();
// eslint-disable-next-line
@@ -189,7 +187,7 @@ const TemplateSettings = () => {
});
updateTemplate({
variables: {
id,
id: id as string,
template: {
name,
description,
@@ -203,35 +201,42 @@ const TemplateSettings = () => {
specification: {
introduction: {
purpose: template.specification?.introduction.purpose!,
documentConventions: template.specification?.introduction
.documentConventions!,
intendedAudience: template.specification?.introduction
.intendedAudience!,
documentConventions:
template.specification?.introduction.documentConventions!,
intendedAudience:
template.specification?.introduction.intendedAudience!,
projectScope: template.specification?.introduction.projectScope!,
},
overallDescription: {
perspective: template.specification?.overallDescription
.perspective!,
userCharacteristics: template.specification?.overallDescription
.userCharacteristics!,
operatingEnvironment: template.specification?.overallDescription
perspective:
template.specification?.overallDescription.perspective!,
userCharacteristics:
template.specification?.overallDescription.userCharacteristics!,
operatingEnvironment:
template.specification?.overallDescription
.operatingEnvironment!,
designImplementationConstraints: template.specification
?.overallDescription.designImplementationConstraints!,
userDocumentation: template.specification?.overallDescription
.userDocumentation!,
assemptionsDependencies: template.specification
?.overallDescription.assemptionsDependencies!,
designImplementationConstraints:
template.specification?.overallDescription
.designImplementationConstraints!,
userDocumentation:
template.specification?.overallDescription.userDocumentation!,
assemptionsDependencies:
template.specification?.overallDescription
.assemptionsDependencies!,
},
nonFunctionalRequirements: {
performanceRequirements: template.specification
?.nonFunctionalRequirements.performanceRequirements!,
safetyRequirements: template.specification
?.nonFunctionalRequirements.safetyRequirements!,
securityRequirements: template.specification
?.nonFunctionalRequirements.securityRequirements!,
softwareQualityAttributes: template.specification
?.nonFunctionalRequirements.softwareQualityAttributes!,
performanceRequirements:
template.specification?.nonFunctionalRequirements
.performanceRequirements!,
safetyRequirements:
template.specification?.nonFunctionalRequirements
.safetyRequirements!,
securityRequirements:
template.specification?.nonFunctionalRequirements
.securityRequirements!,
softwareQualityAttributes:
template.specification?.nonFunctionalRequirements
.softwareQualityAttributes!,
},
otherRequirements: template.specification?.otherRequirements!,
glossary: template.specification?.glossary!,
@@ -375,7 +380,7 @@ const TemplateSettings = () => {
});
updateTemplate({
variables: {
id,
id: id as string,
template: {
name: template.name,
description: template.description,
@@ -425,7 +430,7 @@ const TemplateSettings = () => {
onSubmit: ({ features }) => {
updateTemplate({
variables: {
id,
id: id as string,
template: {
name: template.name,
description: template.description,
@@ -439,35 +444,42 @@ const TemplateSettings = () => {
specification: {
introduction: {
purpose: template.specification?.introduction.purpose!,
documentConventions: template.specification?.introduction
.documentConventions!,
intendedAudience: template.specification?.introduction
.intendedAudience!,
documentConventions:
template.specification?.introduction.documentConventions!,
intendedAudience:
template.specification?.introduction.intendedAudience!,
projectScope: template.specification?.introduction.projectScope!,
},
overallDescription: {
perspective: template.specification?.overallDescription
.perspective!,
userCharacteristics: template.specification?.overallDescription
.userCharacteristics!,
operatingEnvironment: template.specification?.overallDescription
perspective:
template.specification?.overallDescription.perspective!,
userCharacteristics:
template.specification?.overallDescription.userCharacteristics!,
operatingEnvironment:
template.specification?.overallDescription
.operatingEnvironment!,
designImplementationConstraints: template.specification
?.overallDescription.designImplementationConstraints!,
userDocumentation: template.specification?.overallDescription
.userDocumentation!,
assemptionsDependencies: template.specification
?.overallDescription.assemptionsDependencies!,
designImplementationConstraints:
template.specification?.overallDescription
.designImplementationConstraints!,
userDocumentation:
template.specification?.overallDescription.userDocumentation!,
assemptionsDependencies:
template.specification?.overallDescription
.assemptionsDependencies!,
},
nonFunctionalRequirements: {
performanceRequirements: template.specification
?.nonFunctionalRequirements.performanceRequirements!,
safetyRequirements: template.specification
?.nonFunctionalRequirements.safetyRequirements!,
securityRequirements: template.specification
?.nonFunctionalRequirements.securityRequirements!,
softwareQualityAttributes: template.specification
?.nonFunctionalRequirements.softwareQualityAttributes!,
performanceRequirements:
template.specification?.nonFunctionalRequirements
.performanceRequirements!,
safetyRequirements:
template.specification?.nonFunctionalRequirements
.safetyRequirements!,
securityRequirements:
template.specification?.nonFunctionalRequirements
.securityRequirements!,
softwareQualityAttributes:
template.specification?.nonFunctionalRequirements
.softwareQualityAttributes!,
},
otherRequirements: template.specification?.otherRequirements!,
glossary: template.specification?.glossary!,
@@ -487,7 +499,7 @@ const TemplateSettings = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -541,7 +553,9 @@ const TemplateSettings = () => {
description='
If you delete this template you cannot recover it.'
onClose={() => setDeleteTemplateModal(false)}
onConfirm={() => deleteTemplate({ variables: { id } })}
onConfirm={() =>
deleteTemplate({ variables: { id: id as string } })
}
></Modal>
)}
<Box
@@ -599,7 +613,7 @@ const TemplateSettings = () => {
const data = await (
await fetch(
`${process.env.REACT_APP_CLOUDINARY_URL}`,
`${import.meta.env.VITE_CLOUDINARY_URL}`,
{
method: 'POST',
body: formData,
@@ -1064,9 +1078,9 @@ const TemplateSettings = () => {
</Wrapper>
) : (
<>
{role === 'admin' && <Redirect to='/clients' />}
{role === 'admin' && <Navigate to='/clients' />}
{role === 'client' ||
(role === 'developer' && <Redirect to='/project' />)}
(role === 'developer' && <Navigate to='/project' />)}
</>
);
};
src/pages/UpdateProject/index.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useHistory, useParams } from 'react-router';
import { useNavigate, useParams } from 'react-router';
import { useLazyQuery, useMutation, useReactiveVar } from '@apollo/client';
import { useState, useEffect } from 'react';
import { roleVar } from '../../graphql/state';
@@ -18,7 +18,7 @@ import { ArrowLeft } from '../../assets';
import { theme } from '../../themes';
const UpdateProject = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const [error, setError] = useState<string>('');
const [project, setProject] = useState<ProjectOutput>();
@@ -39,10 +39,10 @@ const UpdateProject = () => {
UpdateProjectMutationVariables
>(UPDATE_PROJECT, {
onCompleted() {
history.push(`/project/${id}`);
navigate(`/project/${id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info);
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -69,7 +69,7 @@ const UpdateProject = () => {
onSubmit: ({ name, imageName, imageSource }) => {
updateProject({
variables: {
id,
id: id as string,
name,
image: { name: imageName, src: imageSource },
},
@@ -92,7 +92,7 @@ const UpdateProject = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -157,7 +157,7 @@ const UpdateProject = () => {
basicInfoForm.setFieldValue('imageSource', '');
const data = await (
await fetch(`${process.env.REACT_APP_CLOUDINARY_URL}`, {
await fetch(`${import.meta.env.VITE_CLOUDINARY_URL}`, {
method: 'POST',
body: formData,
})
src/pages/UserSettings/index.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { Redirect, useHistory, useParams } from 'react-router';
import { Navigate, useNavigate, useParams } from 'react-router';
import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
import { useState } from 'react';
import { roleVar } from '../../graphql/state';
@@ -35,7 +35,7 @@ import {
} from '../../graphql/auth.api';
const UserSettings = () => {
const history = useHistory();
const navigate = useNavigate();
const role = useReactiveVar(roleVar);
const [userToEdit, setUserToEdit] = useState<UserOutput>();
const { id } = useParams<{ id: string }>();
@@ -48,7 +48,7 @@ const UserSettings = () => {
GetUserByIdQueryVariables
>(GET_USER_BY_ID, {
variables: {
id,
id: id as string,
},
onCompleted({ getUserById }) {
setUserToEdit(getUserById);
@@ -79,7 +79,7 @@ const UserSettings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -143,7 +143,7 @@ const UserSettings = () => {
setTimeout(() => setSuccess(false), 3000);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -189,7 +189,7 @@ const UserSettings = () => {
text='Back'
color={role || 'client'}
size='small'
onClick={() => history.goBack()}
onClick={() => navigate(-1)}
iconLeft={<ArrowLeft />}
/>
<Text variant='headline' weight='bold'>
@@ -481,7 +481,7 @@ const UserSettings = () => {
</Box>
</Wrapper>
) : (
<Redirect to='/' />
<Navigate to='/' />
);
};
src/pages/Users/index.tsx
+7 -9
View File
@@ -2,7 +2,7 @@ import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useMutation, useLazyQuery, useReactiveVar } from '@apollo/client';
import { useEffect, useState } from 'react';
import { Redirect, useHistory, useLocation } from 'react-router';
import { Navigate, useNavigate, useLocation } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Add, Delete, Edit, Empty } from '../../assets';
import {
@@ -27,7 +27,7 @@ import { DELETE_USER } from '../../graphql/auth.api';
const Users = () => {
const role = useReactiveVar(roleVar);
const history = useHistory();
const navigate = useNavigate();
const location = useLocation();
const [users, setUsers] = useState<Array<UserOutput>>();
const [userToDelete, setUserToDelete] = useState<UserOutput>();
@@ -67,7 +67,7 @@ const Users = () => {
},
onError({ graphQLErrors }) {
setDeleteAccountModal(false);
setError(graphQLErrors[0]?.extensions?.info);
setError(graphQLErrors[0]?.extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
@@ -154,7 +154,7 @@ const Users = () => {
}`}
iconLeft={<Add />}
onClick={() =>
history.push(
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
@@ -220,9 +220,7 @@ const Users = () => {
justifySelf='flex-end'
>
<Box
onClick={() =>
history.push(`/user-settings/${user.id}`)
}
onClick={() => navigate(`/user-settings/${user.id}`)}
marginRight='15px'
cursor='pointer'
>
@@ -273,7 +271,7 @@ const Users = () => {
}`}
iconLeft={<Add />}
onClick={() =>
history.push(
navigate(
`/create-user/${
location.pathname === '/clients'
? 'Client'
@@ -304,7 +302,7 @@ const Users = () => {
)}
</>
) : (
<Redirect to='/clients' />
<Navigate to='/clients' />
);
};
vite.config.ts
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
export default defineConfig({
plugins: [svgr(), react()],
})
yarn.lock
+2680 -10965
View File
File diff suppressed because it is too large Load Diff