Fennec/fennec-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: migration mui v4 -> v5.

Browse Source
This commit is contained in:
Ivan Li 2021-10-01 01:19:55 +08:00
parent 5f024f6028
commit 60d7d7fe5c
17 changed files with 1190 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1108
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -7,15 +7,16 @@
"@craco/craco": "^6.3.0",
"@curi/react-dom": "^2.0.4",
"@curi/router": "^2.1.2",
"@date-io/date-fns": "^1.3.13",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@hickory/browser": "^2.1.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "*",
"@material-ui/pickers": "^3.3.10",
"@mui/icons-material": "^5.0.1",
"@mui/lab": "^5.0.0-alpha.49",
"@mui/material": "^5.0.2",
"@mui/styles": "^5.0.1",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",

14
src/commits/commit-list.tsx
View File

@ -13,10 +13,10 @@ import {
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
makeStyles,
useTheme,
withStyles,
} from "@material-ui/core";
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import withStyles from "@mui/styles/withStyles";
import {
Cancel,
CheckCircle,
@ -24,7 +24,7 @@ import {
ShoppingCart,
Stop,
Timer,
} from "@material-ui/icons";
} from "@mui/icons-material";
import { format } from "date-fns";
import { useSnackbar } from "notistack";
import { complement, equals, find, propEq, takeWhile } from "ramda";
@ -133,8 +133,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
}) => {
const [isOpen, setOpen] = useState(() => false);
const [createTask, { loading }] =
useMutation<
const [createTask, { loading }] = useMutation<
{ createPipelineTask: PipelineTask },
{ task: CreatePipelineTaskInput }
>(CREATE_PIPELINE_TASK);
@ -181,6 +180,7 @@ const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
aria-label={pair[2]}
disabled={loading}
onClick={() => handleCreateTask(unit)}
size="large"
>
{pair[1]}
</IconButton>
@ -257,7 +257,7 @@ const TaskItem: FC<{ task: PipelineTask }> = ({ task }) => {
/>
<ListItemSecondaryAction>
{task.status === TaskStatuses.Working && (
<IconButton edge="end" aria-label="stop" onClick={stop}>
<IconButton edge="end" aria-label="stop" onClick={stop} size="large">
<Stop />
</IconButton>
)}

9
src/commons/auth/login.tsx
View File

@ -1,7 +1,9 @@
import { makeStyles } from "@material-ui/core";
import makeStyles from "@mui/styles/makeStyles";
import { FC, Fragment, useEffect, useRef } from "react";
import { useAuth } from "./auth.provider";
const useStyles = makeStyles((theme) => ({
const useStyles = makeStyles((theme) => {
debugger;
return {
iframe: {
height: "300px",
width: "500px",
@ -22,7 +24,8 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: "rgba(0, 0, 0, 0.3)",
zIndex: theme.zIndex.modal,
},
}));
};
});
export const Login: FC = () => {
const iframeRef = useRef<HTMLIFrameElement>(null);

2
src/commons/fallbacks/error-page.tsx
View File

@ -1,4 +1,4 @@
import { Typography } from '@material-ui/core';
import { Typography } from '@mui/material';
import React, { FC } from 'react';
export const ErrorPage: FC = ({children}) => {

2
src/commons/route/router.tsx
View File

@ -4,7 +4,7 @@ import { createRouter, announce } from "@curi/router";
import { browser } from "@hickory/browser";
import { FC, useEffect, useState } from "react";
import routes from "../../routes";
import { LinearProgress } from "@material-ui/core";
import { LinearProgress } from "@mui/material";
const Component: FC = ({ children }) => {
const client = useApolloClient();

343
src/generated/graphql.schema.json
View File

@ -167,178 +167,6 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Configuration",
"description": null,
"fields": [
{
"name": "id",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "ID",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "pipeline",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Pipeline",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "pipelineId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "project",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Project",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "content",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "language",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "ConfigurationLanguage",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "ID",
"description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "ENUM",
"name": "ConfigurationLanguage",
"description": null,
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": [
{
"name": "JavaScript",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "YAML",
"description": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "CreatePipelineInput",
@ -1016,39 +844,6 @@
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "setConfiguration",
"description": null,
"args": [
{
"name": "setConfigurationInput",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
@ -1183,6 +978,16 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "ID",
"description": "The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `\"4\"`) or integer (such as `4`) input value will be accepted as an ID.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "PipelineTask",
@ -1978,59 +1783,6 @@
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "getConfiguration",
"description": null,
"args": [
{
"name": "pipelineId",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "id",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Configuration",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
@ -2038,81 +1790,6 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "SetConfigurationInput",
"description": null,
"fields": null,
"inputFields": [
{
"name": "pipelineId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "content",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "language",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "ConfigurationLanguage",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Subscription",

38
src/generated/graphql.tsx
View File

@ -26,23 +26,6 @@ export type Commit = {
tasks: Array<PipelineTask>;
};
export type Configuration = {
__typename?: 'Configuration';
id: Scalars['ID'];
pipeline: Pipeline;
pipelineId: Scalars['String'];
project: Project;
projectId: Scalars['String'];
content: Scalars['String'];
name: Scalars['String'];
language: ConfigurationLanguage;
};
export enum ConfigurationLanguage {
JavaScript = 'JavaScript',
Yaml = 'YAML'
}
export type CreatePipelineInput = {
projectId: Scalars['String'];
branch: Scalars['String'];
@ -92,7 +75,6 @@ export type Mutation = {
deletePipeline: Scalars['Float'];
createPipelineTask: PipelineTask;
stopPipelineTask: Scalars['Boolean'];
setConfiguration: Configuration;
};
@ -135,11 +117,6 @@ export type MutationStopPipelineTaskArgs = {
id: Scalars['String'];
};
export type MutationSetConfigurationArgs = {
setConfigurationInput: SetConfigurationInput;
};
export type Pipeline = {
__typename?: 'Pipeline';
id: Scalars['ID'];
@ -214,7 +191,6 @@ export type Query = {
commits?: Maybe<Array<Commit>>;
listPipelineTaskByPipelineId: Array<PipelineTask>;
pipelineTask: PipelineTask;
getConfiguration: Configuration;
};
@ -247,20 +223,6 @@ export type QueryPipelineTaskArgs = {
id: Scalars['String'];
};
export type QueryGetConfigurationArgs = {
pipelineId?: Maybe<Scalars['String']>;
projectId?: Maybe<Scalars['String']>;
id?: Maybe<Scalars['String']>;
};
export type SetConfigurationInput = {
pipelineId: Scalars['String'];
projectId: Scalars['String'];
content: Scalars['String'];
language: ConfigurationLanguage;
};
export type Subscription = {
__typename?: 'Subscription';
syncCommits?: Maybe<Scalars['String']>;

26
src/index.tsx
View File

@ -5,28 +5,44 @@ import "fontsource-roboto";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { AppApolloClientProvider } from "./commons/graphql/client";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import zhLocale from "date-fns/locale/zh-CN";
import { ConfirmProvider } from "material-ui-confirm";
import { SnackbarProvider } from "notistack";
import Router from "./commons/route/router";
import { AuthProvider } from "./commons/auth/auth.provider";
import { LocalizationProvider } from "@mui/lab";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import {
ThemeProvider,
Theme,
StyledEngineProvider,
createTheme,
} from "@mui/material/styles";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const theme = createTheme();
ReactDOM.render(
<React.StrictMode>
<ConfirmProvider>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<SnackbarProvider maxSnack={5}>
<AuthProvider>
<AppApolloClientProvider>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Router>
<App />
</Router>
</MuiPickersUtilsProvider>
</LocalizationProvider>
</AppApolloClientProvider>
</AuthProvider>
</SnackbarProvider>
</ThemeProvider>
</StyledEngineProvider>
</ConfirmProvider>
</React.StrictMode>,
document.getElementById("root")

31
src/layouts/default.tsx
View File

@ -1,20 +1,17 @@
import React, { FC, useCallback, useState } from "react";
import clsx from "clsx";
import {
createStyles,
makeStyles,
useTheme,
Theme,
} from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import { useTheme, Theme } from "@mui/material/styles";
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
import Drawer from "@mui/material/Drawer";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { ProjectPanel } from "../projects/project-panel";
import { HeaderContainerProvider } from "./header-container";
const drawerWidth = 240;
@ -127,7 +124,7 @@ export const DefaultLayout: FC = ({ children }) => {
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
size="large">
<MenuIcon />
</IconButton>
<div className={classes.headerContaner} ref={onRefChange}></div>
@ -147,7 +144,7 @@ export const DefaultLayout: FC = ({ children }) => {
}}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose}>
<IconButton onClick={handleDrawerClose} size="large">
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (

3
src/pipeline-tasks/pipeline-task-detail.tsx
View File

@ -1,5 +1,6 @@
import { gql, useQuery, useSubscription } from "@apollo/client";
import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
import { LinearProgress, Typography } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { format } from "date-fns";
import { FC, useState } from "react";
import { ErrorPage } from "../commons/fallbacks/error-page";

22
src/pipelines/pipeline-editor.tsx
View File

@ -1,16 +1,8 @@
import { gql, Reference, useMutation } from "@apollo/client";
import { useRouter } from "@curi/react-dom";
import {
Button,
Grid,
IconButton,
LinearProgress,
makeStyles,
Paper,
Portal,
Typography,
} from "@material-ui/core";
import { Delete } from "@material-ui/icons";
import { Button, Grid, IconButton, LinearProgress, Paper, Portal, Typography } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { Delete } from "@mui/icons-material";
import { FormikHelpers, Formik, Form, Field } from "formik";
import { TextField, TextFieldProps } from "formik-material-ui";
import { useConfirm } from "material-ui-confirm";
@ -176,16 +168,12 @@ export const PipelineEditor: FC<Props> = ({ pipeline }) => {
return (
<Paper className={classes.root}>
<Portal container={headerContainer}>
<Grid container justify="space-between" alignItems="center">
<Grid container justifyContent="space-between" alignItems="center">
<Typography variant="h6" component="h1">
{isCreate ? "Create" : "Edit"} Pipeline
</Typography>
{isCreate ? null : (
<IconButton
color="inherit"
onClick={handleDelete}
disabled={deleting}
>
<IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
<Delete />
</IconButton>
)}

43
src/pipelines/pipeline-list.tsx
View File

@ -7,10 +7,14 @@ import {
ListItemText,
ListItemSecondaryAction,
IconButton,
} from "@material-ui/core";
import { FC, MouseEventHandler, useMemo } from "react";
Menu,
MenuItem,
PopoverPosition,
} from "@mui/material";
import { FC, MouseEventHandler, useMemo, useState } from "react";
import { Pipeline, Project } from "../generated/graphql";
import { CallMerge, Edit } from "@material-ui/icons";
import { CallMerge, Edit } from "@mui/icons-material";
import { any, values } from "ramda";
interface Props {
projectId: string;
@ -42,18 +46,49 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
project: data?.project,
}));
}, [data]);
const [contextMenu, setContextMenu] = useState<PopoverPosition>();
const handleContextMenu: MouseEventHandler = (event) => {
event.preventDefault();
setContextMenu({ top: event.clientY - 4, left: event.clientX - 2 });
};
const handleClose = () => {
setContextMenu(undefined);
};
return (
<>
<List>
{pipelines?.map((pipeline) => (
<Link
name="pipeline-commits"
params={{ pipelineId: pipeline.id, projectId: projectId }}
key={pipeline.id}
onContextMenu={handleContextMenu}
>
<Item pipeline={pipeline} />
</Link>
))}
</List>
<Menu
keepMounted
open={!!contextMenu}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
contextMenu && any(Boolean, values(contextMenu))
? contextMenu
: undefined
}
>
<MenuItem onClick={handleClose}>Copy</MenuItem>
<MenuItem onClick={handleClose}>Print</MenuItem>
<MenuItem onClick={handleClose}>Highlight</MenuItem>
<MenuItem onClick={handleClose}>Email</MenuItem>
</Menu>
</>
);
};
@ -80,7 +115,7 @@ const Item = ({ pipeline }: { pipeline: Pipeline }) => {
}
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="edit" onClick={modify}>
<IconButton edge="end" aria-label="edit" onClick={modify} size="large">
<Edit />
</IconButton>
</ListItemSecondaryAction>

21
src/projects/project-detail.tsx
View File

@ -1,20 +1,13 @@
import { Project } from "../generated/graphql";
import React, { FC, Fragment } from "react";
import {
IconButton,
Grid,
makeStyles,
Paper,
Portal,
Typography,
Box,
} from "@material-ui/core";
import { IconButton, Grid, Paper, Portal, Typography, Box } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { useHeaderContainer } from "../layouts";
import { PipelineList } from "../pipelines/pipeline-list";
import { Edit } from '@material-ui/icons';
import { Edit } from '@mui/icons-material';
import { Link } from '@curi/react-dom';
import { Button } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";
import { Button } from "@mui/material";
import { AddBox } from "@mui/icons-material";
interface Props {
project: Project;
@ -45,7 +38,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
container
spacing={3}
direction="row"
justify="space-between"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
@ -58,7 +51,7 @@ export const ProjectDetail: FC<Props> = ({ project, children }) => {
</Grid>
<Grid item>
<Link name="edit-project" params={{ projectId: project.id }}>
<IconButton color="inherit">{<Edit />}</IconButton>
<IconButton color="inherit" size="large">{<Edit />}</IconButton>
</Link>
</Grid>
</Grid>

22
src/projects/project-editor.tsx
View File

@ -1,14 +1,6 @@
import { gql, Reference, useMutation } from "@apollo/client";
import {
Button,
LinearProgress,
makeStyles,
Paper,
Portal,
Typography,
Grid,
IconButton,
} from "@material-ui/core";
import { Button, LinearProgress, Paper, Portal, Typography, Grid, IconButton } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { Form, Formik, Field, FormikHelpers } from "formik";
import { TextField } from "formik-material-ui";
import { not } from "ramda";
@ -17,7 +9,7 @@ import { Project } from "../generated/graphql";
import * as Yup from "yup";
import { useRouter } from "@curi/react-dom";
import { useHeaderContainer } from "../layouts";
import DeleteIcon from "@material-ui/icons/Delete";
import DeleteIcon from "@mui/icons-material/Delete";
import { useConfirm } from "material-ui-confirm";
import { useSnackbar } from "notistack";
@ -178,16 +170,12 @@ export const ProjectEditor: FC<Props> = ({ project }) => {
return (
<Paper className={classes.root}>
<Portal container={headerContainer}>
<Grid container justify="space-between" alignItems="center">
<Grid container justifyContent="space-between" alignItems="center">
<Typography variant="h6" component="h1">
{isCreate ? "Create" : "Edit"} Project
</Typography>
{isCreate ? null : (
<IconButton
color="inherit"
onClick={handleDelete}
disabled={deleting}
>
<IconButton color="inherit" onClick={handleDelete} disabled={deleting} size="large">
<DeleteIcon />
</IconButton>
)}

9
src/projects/project-panel.tsx
View File

@ -1,11 +1,12 @@
import { gql, useQuery } from "@apollo/client";
import { Link } from "@curi/react-dom";
import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
import { Box, List, ListItem, Theme } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { FC } from "react";
import { Project } from "../generated/graphql";
import { ListItemText } from "@material-ui/core";
import { Button } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";
import { ListItemText } from "@mui/material";
import { Button } from "@mui/material";
import { AddBox } from "@mui/icons-material";
import { ActiveLink } from "../commons/route/active-link";
const PROJECTS = gql`