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
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
+33 -36
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,33 +196,31 @@ 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<
AddProjectProposalMutation,
AddProjectProposalMutationVariables
>(ADD_PROJECT_PROPOSAL, {
onCompleted({ addProjectProposal: proposalData }) {
history.push(`/project/${proposalData.id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info);
setTimeout(() => setError(''), 3000);
},
});
const [addProjectProposal, { loading: addProjectProposalLoading }] =
useMutation<
AddProjectProposalMutation,
AddProjectProposalMutationVariables
>(ADD_PROJECT_PROPOSAL, {
onCompleted({ addProjectProposal: proposalData }) {
navigate(`/project/${proposalData.id}`);
},
onError({ graphQLErrors }) {
setError(graphQLErrors[0].extensions?.info as string);
setTimeout(() => setError(''), 3000);
},
});
const [addProject, { loading: addProjectLoading }] = useMutation<
AddProjectMutation,
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
+39 -44
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,22 +91,20 @@ const Project = () => {
const [fullBuildModal, setFullBuildModal] = useState<boolean>(false);
const [transactionsData, setTransactionsData] = useState<TransactionData>();
const [
getProjectsByClientId,
{ loading: clientProjectsLoading },
] = useLazyQuery<
GetAllProjectsByClientIdQuery,
GetAllProjectsByClientIdQueryVariables
>(GET_ALL_PROJECTS_BY_CLIENT_ID, {
variables: {
id: currentUser?.id!,
},
onCompleted({ getAllProjectsByClientId }) {
if (getAllProjectsByClientId.length > 0)
history.push(`/project/${getAllProjectsByClientId[0].id}`);
},
fetchPolicy: 'network-only',
});
const [getProjectsByClientId, { loading: clientProjectsLoading }] =
useLazyQuery<
GetAllProjectsByClientIdQuery,
GetAllProjectsByClientIdQueryVariables
>(GET_ALL_PROJECTS_BY_CLIENT_ID, {
variables: {
id: currentUser?.id!,
},
onCompleted({ getAllProjectsByClientId }) {
if (getAllProjectsByClientId.length > 0)
navigate(`/project/${getAllProjectsByClientId[0].id}`);
},
fetchPolicy: 'network-only',
});
const [getProjects, { loading: projectsLoading }] = useLazyQuery<
GetAllProjectsQuery,
@@ -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,15 +867,16 @@ const Project = () => {
</Box>
</Box>
)}
{project.template.specification && project.template.features && (
<Box display='none'>
<SpecificationPrint
ref={printRef}
specification={project.template.specification}
features={project.template.features}
/>
</Box>
)}
{project.template.specification &&
project.template.features && (
<Box display='none'>
<SpecificationPrint
ref={printRef}
specification={project.template.specification}
features={project.template.features}
/>
</Box>
)}
</Box>
</Wrapper>
) : (
@@ -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
+82 -68
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
.operatingEnvironment!,
designImplementationConstraints: template.specification
?.overallDescription.designImplementationConstraints!,
userDocumentation: template.specification?.overallDescription
.userDocumentation!,
assemptionsDependencies: template.specification
?.overallDescription.assemptionsDependencies!,
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!,
},
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
.operatingEnvironment!,
designImplementationConstraints: template.specification
?.overallDescription.designImplementationConstraints!,
userDocumentation: template.specification?.overallDescription
.userDocumentation!,
assemptionsDependencies: template.specification
?.overallDescription.assemptionsDependencies!,
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!,
},
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' />
);
};