Skip to content

Commit 3ba26c6

Browse files
aadams0aadams0
committed
edge case of .swell file export fixed
1 parent 43b4c9c commit 3ba26c6

File tree

3 files changed

+124
-7
lines changed

3 files changed

+124
-7
lines changed

‎src/client/components-v2/App.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
11
import React, { useState, useEffect } from 'react';
22
import { HashRouter } from 'react-router-dom';
3+
// Import controllers
34
import historyController from '../controllers/historyController';
45
import collectionsController from '../controllers/collectionsController';
5-
import UpdatePopUpContainer from '../components/containers/UpdatePopUpContainer';
6-
import { WindowExt } from '../../types'
7-
import '../../assets/style/App.scss';
6+
// Import local components
7+
import UpdatePopUpContainer from './legacy-components/UpdatePopUpContainer';
8+
import HistoryOrWorkspaceContainer from './workspace/HistoryOrWorkspaceContainer';
89
import NavBarContainer from './navbar/NavBarContainer';
910
import MainContainer from './main/MainContainer';
10-
import HistoryOrWorkspaceContainer from './workspace/HistoryOrWorkspaceContainer';
11-
11+
import { WindowExt } from '../../types'
12+
// Import MUI components
1213
import { Box, Divider } from '@mui/material';
14+
// Import styling
15+
/**
16+
* Note to future devs:
17+
* Our team is finishing our work on this app, and part of our stretch goals were to migrate
18+
* all of the existing components to use Material UI. We made this decision for a few reasons:
19+
* (1) There are a toooon of people who work on this application. It needs consistent styling,
20+
* and making changes to the SASS files can really complicate development of the app.
21+
* (2) Material UI is very easy to use and very supported. If you know React and a touch of CSS, you'll be able
22+
* to quickly make visually-compatible components without touching CSS files, which will speed up
23+
* development.
24+
* - AA 18 May, 2022
25+
*/
26+
import '../../assets/style/App.scss';
1327

1428

1529
const { api } = window as unknown as WindowExt;
1630

1731
const App = () => {
32+
{/* */}
1833
const [message, setMessage] = useState(null);
19-
2034
// currentWorkspace is the current Workspace's UUID. It is only altered in WorkspaceSelect.tsx, which is rendered by CurrentWorskpaceDisplay.tsx
2135
const [currentWorkspaceId, setWorkspace] = React.useState('');
2236

@@ -27,7 +41,7 @@ const App = () => {
2741
}, []);
2842

2943
return (
30-
<div id="app" className="is-tall">
44+
<div id="app" className="git brais-tall">
3145
<HashRouter>
3246
<NavBarContainer />
3347
<Divider orientation="horizontal"/>

src/client/components/containers/UpdatePopUpContainer.jsx renamed to src/client/components-v2/legacy-components/UpdatePopUpContainer.jsx

File renamed without changes.

‎src/client/components-v2/workspace/HistoryOrWorkspaceContainer.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import * as React from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import Tabs from '@mui/material/Tabs';
4+
import Tab from '@mui/material/Tab';
5+
import Typography from '@mui/material/Typography';
6+
import Button from '@mui/material/Button';
7+
import Box from '@mui/material/Box';
8+
import BarGraph from '../../components/display/BarGraph';
9+
import ScheduleContainer from '../../components/containers/ScheduleContainer';
10+
import WorkspaceContainer from "./WorkspaceContainer";
11+
import HistoryContainer from '../../components/containers/HistoryContainer';
12+
import AccessTimeIcon from '@mui/icons-material/AccessTime';
13+
import WorkIcon from '@mui/icons-material/Work';
14+
import ScheduleSendRoundedIcon from '@mui/icons-material/ScheduleSendRounded';
15+
16+
interface TabPanelProps {
17+
children?: React.ReactNode;
18+
index: number;
19+
value: number;
20+
}
21+
22+
function TabPanel(props: TabPanelProps) {
23+
const { children, value, index, ...other } = props;
24+
25+
return (
26+
<div
27+
role="tabpanel"
28+
hidden={value !== index}
29+
id={`simple-tabpanel-${index}`}
30+
aria-labelledby={`simple-tab-${index}`}
31+
{...other}
32+
>
33+
{value === index && (
34+
<Box sx={{ p: 1 }}>
35+
<Box>{children}</Box>
36+
</Box>
37+
)}
38+
</div>
39+
);
40+
}
41+
42+
function a11yProps(index: number) {
43+
return {
44+
id: `simple-tab-${index}`,
45+
'aria-controls': `simple-tabpanel-${index}`,
46+
};
47+
}
48+
49+
export default function HistoryOrWorkspaceContainer(props) {
50+
const [showGraph, setShowGraph] = React.useState(false);
51+
const [value, setValue] = React.useState(0);
52+
53+
const currentResponse = useSelector((store: any) => store.business.currentResponse);
54+
55+
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
56+
setValue(newValue);
57+
};
58+
59+
return (
60+
<Box sx={{ minWidth: '25%', overflow: 'auto', maxHeight: '100%', overflowX: 'auto', overflowY: 'scroll' }}>
61+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
62+
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
63+
<Tab icon={<WorkIcon fontSize='small'/>} {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
64+
<Tab icon={<ScheduleSendRoundedIcon fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
65+
<Tab icon={<AccessTimeIcon fontSize='small'/>} {...a11yProps(2)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
66+
</Tabs>
67+
</Box>
68+
{value === 1 && (<Box
69+
sx={{
70+
display: 'flex',
71+
flexDirection: 'column',
72+
px: 1,
73+
py: 1
74+
}}
75+
>
76+
<Button
77+
className={`is-flex is-align-items-center is-justify-content-center is-graph-footer is-clickable`}
78+
variant='outlined'
79+
onClick={() => setShowGraph(showGraph === false)}
80+
>
81+
{showGraph && 'Hide Response Metrics'}
82+
{!showGraph && 'View Response Metrics'}
83+
</Button>
84+
{( showGraph && <Box sx={{
85+
py: 1
86+
}}>
87+
<BarGraph />
88+
</Box>
89+
)}
90+
</Box>
91+
)}
92+
<TabPanel value={value} index={0}>
93+
<WorkspaceContainer {...props} />
94+
</TabPanel>
95+
<TabPanel value={value} index={1}>
96+
<ScheduleContainer />
97+
</TabPanel>
98+
<TabPanel value={value} index={2}>
99+
<HistoryContainer />
100+
</TabPanel>
101+
</Box>
102+
);
103+
}

0 commit comments

Comments
 (0)