Skip to content

Commit dbd1e29

Browse files
HadriChanHadriChan
committed
more TS conversion
1 parent 2be2f64 commit dbd1e29

File tree

10 files changed

+175
-130
lines changed

10 files changed

+175
-130
lines changed

‎__tests__/projects.test.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
const { Mongoose } = require('mongoose');
66
const request = require('supertest');
77
// initializes the project to be sent to server/DB
8-
import mockData from '../mockData'
9-
import app from ('../server/server');
10-
const http = require('http')
11-
const {state, projectToSave } = mockData
8+
import mockData from '../mockData';
9+
import app from '../server/server';
10+
const http = require('http');
11+
const { state, projectToSave } = mockData;
1212

1313
// save and get projects endpoint testing
1414
describe('Project endpoints tests', () => {

‎app/src/components/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import localforage from 'localforage';
1616
import { saveProject } from '../helperFunctions/projectGetSaveDel';
1717

1818
// Intermediary component to wrap main App component with higher order provider components
19-
export const App = (): JSX.Element => {
19+
export const App: React.FC = (): JSX.Element => {
2020
// const state = useSelector((store: RootState) => store.appState);
2121

2222
const dispatch = useDispatch();

‎app/src/components/left/RoomsContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { io } from 'socket.io-client';
2323
import store from '../../redux/store';
2424
//pasted from navbarbuttons
2525
import debounce from '../../../../node_modules/lodash/debounce.js';
26-
import { deepEqual } from 'assert';
2726

2827
// // for websockets
2928
// // Part - join room and room code functionality

‎app/src/components/right/DeleteProjects.tsx

Lines changed: 83 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import {
1616
} from '../../helperFunctions/projectGetSaveDel';
1717
import localforage from 'localforage';
1818
import { useSelector, useDispatch } from 'react-redux';
19-
import { setInitialState, initialState } from '../../redux/reducers/slice/appStateSlice';
19+
import {
20+
setInitialState,
21+
initialState
22+
} from '../../redux/reducers/slice/appStateSlice';
2023
import { RootState } from '../../redux/store';
2124
import MuiAlert, { AlertProps } from '@mui/material/Alert';
2225
import Snackbar from '@mui/material/Snackbar';
@@ -30,7 +33,7 @@ export interface ProjectDialogProps {
3033
function ProjectsDialog(props: ProjectDialogProps) {
3134
const classes = useStyles();
3235
const { onClose, open, projects, deleteAlert } = props;
33-
const state = useSelector((store:RootState) => store.appState);
36+
const state = useSelector((store: RootState) => store.appState);
3437
const dispatch = useDispatch();
3538

3639
// If no projects selected, keep the name of the current displayed
@@ -43,58 +46,72 @@ function ProjectsDialog(props: ProjectDialogProps) {
4346
const handleDelete = (value: string) => {
4447
const selectedProject = projects.filter(
4548
(project: any) => project._id === value
46-
)[0];
47-
deleteProject(selectedProject);
48-
// localforage.removeItem(window.localStorage.getItem('ssid'));
49-
dispatch(setInitialState(initialState))
50-
deleteAlert()
51-
onClose()
49+
)[0];
50+
deleteProject(selectedProject);
51+
// localforage.removeItem(window.localStorage.getItem('ssid'));
52+
dispatch(setInitialState(initialState));
53+
deleteAlert();
54+
onClose();
5255
};
53-
56+
5457
return (
5558
<>
56-
<Dialog
57-
onClose={handleClose}
58-
aria-labelledby="project-dialog-title"
59-
open={open}
60-
>
61-
<DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">DELETE PROJECTS</DialogTitle>
62-
<DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
63-
<List style={{ color: "#000" }}>
64-
{projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
65-
<ListItem
66-
button
67-
onClick={() => handleDelete(project._id)}
68-
key={index}
69-
>
70-
<ListItemAvatar>
71-
<Avatar className={classes.avatar}>
72-
<DeleteRoundedIcon />
73-
</Avatar>
74-
</ListItemAvatar>
75-
<ListItemText primary={project.name} />
76-
</ListItem>
77-
))}
78-
</List>
79-
<DialogTitle style={{ color: "#000" }} id="project-dialog-title"> Marketplace Projects</DialogTitle>
80-
<List style={{ color: "#000" }}>
81-
{projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
82-
<ListItem
83-
button
84-
onClick={() => handleDelete(project._id)}
85-
key={index}
86-
>
87-
<ListItemAvatar>
88-
<Avatar className={classes.avatar}>
89-
<DeleteRoundedIcon />
90-
</Avatar>
91-
</ListItemAvatar>
92-
<ListItemText primary={project.name} />
93-
</ListItem>
94-
))}
95-
</List>
96-
</Dialog>
97-
</>
59+
<Dialog
60+
onClose={handleClose}
61+
aria-labelledby="project-dialog-title"
62+
open={open}
63+
>
64+
<DialogTitle style={{ color: '#297ac2' }} id="project-dialog-title">
65+
DELETE PROJECTS
66+
</DialogTitle>
67+
<DialogTitle style={{ color: '#000' }} id="project-dialog-title">
68+
User Projects
69+
</DialogTitle>
70+
<List style={{ color: '#000' }}>
71+
{projects
72+
.filter(
73+
(project: any) =>
74+
project.forked === undefined || project.forked === false
75+
)
76+
.map((project: any, index: number) => (
77+
<ListItem
78+
button
79+
onClick={() => handleDelete(project._id)}
80+
key={index}
81+
>
82+
<ListItemAvatar>
83+
<Avatar className={classes.avatar}>
84+
<DeleteRoundedIcon />
85+
</Avatar>
86+
</ListItemAvatar>
87+
<ListItemText primary={project.name} />
88+
</ListItem>
89+
))}
90+
</List>
91+
<DialogTitle style={{ color: '#000' }} id="project-dialog-title">
92+
{' '}
93+
Marketplace Projects
94+
</DialogTitle>
95+
<List style={{ color: '#000' }}>
96+
{projects
97+
.filter((project: any) => project.forked === true)
98+
.map((project: any, index: number) => (
99+
<ListItem
100+
button
101+
onClick={() => handleDelete(project._id)}
102+
key={index}
103+
>
104+
<ListItemAvatar>
105+
<Avatar className={classes.avatar}>
106+
<DeleteRoundedIcon />
107+
</Avatar>
108+
</ListItemAvatar>
109+
<ListItemText primary={project.name} />
110+
</ListItem>
111+
))}
112+
</List>
113+
</Dialog>
114+
</>
98115
);
99116
}
100117

@@ -103,7 +120,7 @@ export default function ProjectsFolder(props) {
103120
const [projects, setProjects] = useState([{ hello: 'cat' }]);
104121

105122
const handleClickOpen = () => {
106-
getProjects().then(data => {
123+
getProjects().then((data) => {
107124
if (data) {
108125
setProjects(data);
109126
setOpen(true);
@@ -115,19 +132,21 @@ export default function ProjectsFolder(props) {
115132
setOpen(false);
116133
};
117134

118-
119135
const keyBindDeleteProject = useCallback((e) => {
120-
if(e.key === 'Backspace' && e.metaKey || e.key === 'Backspace' && e.ctrlKey) {
136+
if (
137+
(e.key === 'Backspace' && e.metaKey) ||
138+
(e.key === 'Backspace' && e.ctrlKey)
139+
) {
121140
e.preventDefault();
122141
handleClickOpen();
123142
}
124143
}, []);
125-
144+
126145
useEffect(() => {
127146
document.addEventListener('keydown', keyBindDeleteProject);
128147
return () => {
129-
document.removeEventListener('keydown', keyBindDeleteProject)
130-
}
148+
document.removeEventListener('keydown', keyBindDeleteProject);
149+
};
131150
}, []);
132151

133152
return (
@@ -136,11 +155,16 @@ export default function ProjectsFolder(props) {
136155
color="primary"
137156
onClick={handleClickOpen}
138157
endIcon={<DeleteRoundedIcon />}
139-
sx={{fontSize: '9px'}}
158+
sx={{ fontSize: '9px' }}
140159
>
141160
Delete Project
142161
</Button>
143-
<ProjectsDialog open={open} onClose={handleClose} projects={projects} deleteAlert={props.deleteAlert}/>
162+
<ProjectsDialog
163+
open={open}
164+
onClose={handleClose}
165+
projects={projects}
166+
deleteAlert={props.deleteAlert}
167+
/>
144168
</div>
145169
);
146170
}

‎app/src/components/right/OpenProjects.tsx

Lines changed: 63 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export interface ProjectDialogProps {
2525
function ProjectsDialog(props: ProjectDialogProps) {
2626
const classes = useStyles();
2727
const { onClose, open, projects, openAlert } = props;
28-
const state = useSelector((store:RootState) => store.appState);
28+
const state = useSelector((store: RootState) => store.appState);
2929
const dispatch = useDispatch();
3030
// If no projects selected, keep the name of the current displayed
3131
const handleClose = () => {
@@ -37,8 +37,8 @@ function ProjectsDialog(props: ProjectDialogProps) {
3737
(project: any) => project._id === value
3838
)[0];
3939
// dispatch({ type: 'OPEN PROJECT', payload: selectedProject });
40-
dispatch(openProject(selectedProject))
41-
openAlert()
40+
dispatch(openProject(selectedProject));
41+
openAlert();
4242
onClose();
4343
};
4444

@@ -48,53 +48,64 @@ function ProjectsDialog(props: ProjectDialogProps) {
4848
aria-labelledby="project-dialog-title"
4949
open={open}
5050
>
51-
<DialogTitle style={{ color: "#297ac2" }} id="project-dialog-title">SAVED PROJECTS</DialogTitle>
52-
<DialogTitle style={{ color: "#000" }} id="project-dialog-title">User Projects</DialogTitle>
53-
<List style={{ color: "#000" }}>
54-
{projects.filter((project: any) => project.forked === undefined || project.forked === false).map((project: any, index: number) => (
55-
<ListItem
56-
button
57-
onClick={() => handleListItemClick(project._id)}
58-
key={index}
59-
>
60-
<ListItemAvatar>
61-
<Avatar className={classes.avatar}>
62-
<FolderOpenIcon />
63-
</Avatar>
64-
</ListItemAvatar>
65-
<ListItemText primary={project.name} />
66-
</ListItem>
67-
)
68-
)}
51+
<DialogTitle style={{ color: '#297ac2' }} id="project-dialog-title">
52+
SAVED PROJECTS
53+
</DialogTitle>
54+
<DialogTitle style={{ color: '#000' }} id="project-dialog-title">
55+
User Projects
56+
</DialogTitle>
57+
<List style={{ color: '#000' }}>
58+
{projects
59+
.filter(
60+
(project: any) =>
61+
project.forked === undefined || project.forked === false
62+
)
63+
.map((project: any, index: number) => (
64+
<ListItem
65+
button
66+
onClick={() => handleListItemClick(project._id)}
67+
key={index}
68+
>
69+
<ListItemAvatar>
70+
<Avatar className={classes.avatar}>
71+
<FolderOpenIcon />
72+
</Avatar>
73+
</ListItemAvatar>
74+
<ListItemText primary={project.name} />
75+
</ListItem>
76+
))}
6977
</List>
7078
{/* this section handles the projects cloned from the marketplace */}
71-
<DialogTitle style={{ color: "#000" }} id="project-dialog-title">Marketplace Projects</DialogTitle>
72-
<List style={{ color: "#000" }}>
73-
{projects.filter((project: any) => project.forked === true).map((project: any, index: number) => (
74-
<ListItem
75-
button
76-
onClick={() => handleListItemClick(project._id)}
77-
key={index}
78-
>
79-
<ListItemAvatar>
80-
<Avatar className={classes.avatar}>
81-
<FolderOpenIcon />
82-
</Avatar>
83-
</ListItemAvatar>
84-
<ListItemText primary={project.name} />
85-
</ListItem>
86-
)
87-
)}
79+
<DialogTitle style={{ color: '#000' }} id="project-dialog-title">
80+
Marketplace Projects
81+
</DialogTitle>
82+
<List style={{ color: '#000' }}>
83+
{projects
84+
.filter((project: any) => project.forked === true)
85+
.map((project: any, index: number) => (
86+
<ListItem
87+
button
88+
onClick={() => handleListItemClick(project._id)}
89+
key={index}
90+
>
91+
<ListItemAvatar>
92+
<Avatar className={classes.avatar}>
93+
<FolderOpenIcon />
94+
</Avatar>
95+
</ListItemAvatar>
96+
<ListItemText primary={project.name} />
97+
</ListItem>
98+
))}
8899
</List>
89100
</Dialog>
90101
);
91102
}
92-
export default function ProjectsFolder(props) {
103+
export default function ProjectsFolder(props: any) {
93104
const [open, setOpen] = useState(false);
94-
const [projects, setProjects] = useState([{ hello: 'cat' }])
105+
const [projects, setProjects] = useState([{ hello: 'cat' }]);
95106

96107
const handleClickOpen = () => {
97-
getProjects().then(data => {
108+
getProjects().then((data) => {
98109
if (data) {
99110
setProjects(data);
100111
setOpen(true);
@@ -105,17 +116,17 @@ export default function ProjectsFolder(props) {
105116
setOpen(false);
106117
};
107118
const keyBindOpenProject = useCallback((e) => {
108-
if(e.key === 'o' && e.metaKey || e.key === 'o' && e.ctrlKey) {
119+
if ((e.key === 'o' && e.metaKey) || (e.key === 'o' && e.ctrlKey)) {
109120
e.preventDefault();
110121
handleClickOpen();
111122
}
112123
}, []);
113-
124+
114125
useEffect(() => {
115126
document.addEventListener('keydown', keyBindOpenProject);
116127
return () => {
117-
document.removeEventListener('keydown', keyBindOpenProject)
118-
}
128+
document.removeEventListener('keydown', keyBindOpenProject);
129+
};
119130
}, []);
120131
return (
121132
<div>
@@ -124,11 +135,16 @@ export default function ProjectsFolder(props) {
124135
id="openProject"
125136
onClick={handleClickOpen}
126137
endIcon={<FolderOpenIcon />}
127-
sx={{fontSize: '9px'}}
138+
sx={{ fontSize: '9px' }}
128139
>
129140
Open Project
130141
</Button>
131-
<ProjectsDialog open={open} onClose={handleClose} projects={projects} openAlert={props.openAlert}/>
142+
<ProjectsDialog
143+
open={open}
144+
onClose={handleClose}
145+
projects={projects}
146+
openAlert={props.openAlert}
147+
/>
132148
</div>
133149
);
134150
}

0 commit comments

Comments
 (0)