Skip to content

Commit 5bc2dc1

Browse files
garrettlchowgarrettlchow
authored
Merge pull request #12 from oslabs-beta/feature/garrett
Feature/garrett
2 parents ba6c07c + 5ee3365 commit 5bc2dc1

22 files changed

+291
-416
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@
188188
"jest-environment-jsdom": "^29.7.0",
189189
"jsondiffpatch": "^0.5.0",
190190
"lodash": "^4.17.21",
191+
"lucide-react": "^0.468.0",
191192
"node": "^18.12.1",
192193
"prettier": "^3.1.1",
193194
"rc-slider": "^10.5.0",

‎src/app/components/Actions/DropDown.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import Select from 'react-select';
22
import React from 'react';
33

4-
const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelection: string; setDropdownSelection: (value: string) => void }): JSX.Element => {
4+
const DropDown = ({
5+
dropdownSelection,
6+
setDropdownSelection,
7+
}: {
8+
dropdownSelection: string;
9+
setDropdownSelection: (value: string) => void;
10+
}): JSX.Element => {
511
const handleChange = (selected: { value: string; label: string }) => {
6-
setDropdownSelection(selected.value);
12+
setDropdownSelection(selected.value);
713
};
814

915
const options = [
@@ -12,12 +18,14 @@ const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelecti
1218
];
1319

1420
return (
15-
<Select
16-
placeholder="Select Hook"
17-
onChange={handleChange}
18-
options={options}
19-
value={options.find((option) => option.value === dropdownSelection)}
20-
/>
21+
<div className='dropdown-container'>
22+
<Select
23+
placeholder='Select Hook'
24+
onChange={handleChange}
25+
options={options}
26+
value={options.find((option) => option.value === dropdownSelection)}
27+
/>
28+
</div>
2129
);
2230
};
2331

‎src/app/components/Actions/RecordButton.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { Switch } from '@mui/material';
3+
4+
const RecordButton = ({ isRecording, onToggle }) => {
5+
return (
6+
<div className='record-button-container'>
7+
<div className='record-label'>
8+
<div
9+
className={`record-icon ${isRecording ? 'recording' : ''}`}
10+
style={{
11+
backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
12+
transition: 'background-color 0.3s ease',
13+
}}
14+
/>
15+
<span>Record</span>
16+
</div>
17+
<Switch
18+
checked={isRecording}
19+
onChange={onToggle}
20+
sx={{
21+
'& .MuiSwitch-switchBase': {
22+
color: '#9ca3af',
23+
},
24+
'& .MuiSwitch-track': {
25+
backgroundColor: '#e5e7eb',
26+
},
27+
'& .MuiSwitch-switchBase.Mui-checked': {
28+
color: '#374151',
29+
},
30+
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
31+
backgroundColor: '#0284c7',
32+
},
33+
}}
34+
/>
35+
</div>
36+
);
37+
};
38+
39+
export default RecordButton;

‎src/app/components/Actions/SwitchApp.tsx

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/app/components/Buttons/StatusDot.tsx

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,7 @@
11
import React from 'react';
2-
import styled from 'styled-components';
3-
4-
const Dot = styled('div')({
5-
borderRadius: '50%',
6-
width: '12px',
7-
height: '12px',
8-
display: 'inline-block',
9-
});
102

113
const StatusDot = ({ status }) => {
12-
let color: 'green' | 'red';
13-
switch (status) {
14-
case 'active':
15-
color = 'green';
16-
break;
17-
case 'inactive':
18-
color = 'red';
19-
break;
20-
default:
21-
color = 'green';
22-
}
23-
return <Dot style={{ backgroundColor: color }} />;
4+
return <span className={`status-dot ${status}`} />;
245
};
256

267
export default StatusDot;

‎src/app/components/Buttons/Tutorial.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
1111
const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
1212
import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../../slices/mainSlice';
1313
import { useDispatch, useSelector } from 'react-redux';
14+
import { HelpCircle } from 'lucide-react';
15+
1416
/*
1517
This is the tutorial displayed when the "How to use" button is clicked
1618
This needs to be a class component to be compatible with updateStepElement from intro.js
@@ -359,13 +361,8 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
359361
onBeforeChange={(currentStepIndex) => onChangeHandler(currentStepIndex)} // Callback called before changing the current step.
360362
ref={(steps) => (this.steps = steps)} // ref allows access to intro.js API
361363
/>
362-
<Button
363-
variant='outlined'
364-
className='howToUse-button'
365-
type='button'
366-
onClick={() => startIntro()}
367-
>
368-
<HelpOutlineIcon className='button-icon' sx={{ pr: 1 }} /> Tutorial
364+
<Button className='howToUse-button' type='button' onClick={() => startIntro()}>
365+
<HelpCircle className='button-icon' size={18} /> Tutorial
369366
</Button>
370367
</>
371368
);

‎src/app/components/StateRoute/ComponentMap/heatMapLegend.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/app/containers/ActionContainer.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* eslint-disable max-len */
22
import React, { useEffect, useState } from 'react';
33
import Action from '../components/Actions/Action';
4-
import SwitchAppDropdown from '../components/Actions/SwitchApp';
54
import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
65
import { useDispatch, useSelector } from 'react-redux';
76
import RouteDescription from '../components/Actions/RouteDescription';
87
import DropDown from '../components/Actions/DropDown';
98
import ProvConContainer from './ProvConContainer';
109
import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
1110
import { Button, Switch } from '@mui/material';
11+
import RecordButton from '../components/Actions/RecordButton';
1212

1313
/*
1414
This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
@@ -193,18 +193,13 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
193193
</div>
194194
{actionView ? (
195195
<div className='action-button-wrapper'>
196-
<a type='button' id='recordBtn' onClick={toggleRecord}>
197-
<i />
198-
<div
199-
className='toggle-record'
200-
style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
201-
>
202-
Record
203-
</div>
204-
{recordingActions ? <Switch defaultChecked /> : <Switch />}
205-
</a>
206-
<SwitchAppDropdown />
207-
{/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
196+
<RecordButton
197+
isRecording={recordingActions}
198+
onToggle={() => {
199+
toggleRecord();
200+
setRecordingActions(!recordingActions);
201+
}}
202+
/>
208203
<DropDown
209204
dropdownSelection={dropdownSelection}
210205
setDropdownSelection={setDropdownSelection}

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@ import { Button } from '@mui/material';
55
//importing necesary material UI components for dialogue popup
66
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
77
import Tutorial from '../components/Buttons/Tutorial';
8-
import LockIcon from '@mui/icons-material/Lock';
9-
import LockOpenIcon from '@mui/icons-material/LockOpen';
10-
import FileDownloadIcon from '@mui/icons-material/FileDownload';
11-
import FileUploadIcon from '@mui/icons-material/FileUpload';
128
import { toggleMode, importSnapshots, startReconnect } from '../slices/mainSlice';
139
import { useDispatch, useSelector } from 'react-redux';
1410
import StatusDot from '../components/Buttons/StatusDot';
15-
import LoopIcon from '@mui/icons-material/Loop';
1611
import CloseIcon from '@mui/icons-material/Close';
1712
import WarningIcon from '@mui/icons-material/Warning';
1813
import { MainState, RootState } from '../FrontendTypes';
14+
import { Lock, Unlock, Download, Upload, RefreshCw, X, AlertTriangle } from 'lucide-react';
1915

2016
function exportHandler(snapshots: []): void {
2117
// function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
@@ -91,38 +87,31 @@ function ButtonsContainer(): JSX.Element {
9187

9288
return (
9389
<div className='buttons-container'>
94-
<Button
95-
className='pause-button'
96-
variant='outlined'
97-
type='button'
98-
onClick={() => dispatch(toggleMode('paused'))}
99-
>
90+
<Button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
10091
{paused ? (
101-
<LockIcon className='button-icon' sx={{ pr: 1 }} />
92+
<Lock className='button-icon' size={18} />
10293
) : (
103-
<LockOpenIcon className='button-icon' sx={{ pr: 1 }} />
94+
<Unlock className='button-icon' size={18} />
10495
)}
10596
{paused ? 'Locked' : 'Unlocked'}
10697
</Button>
10798
<Button
10899
className='export-button'
109-
variant='outlined'
110100
type='button'
111101
//@ts-ignore
112102
onClick={() => exportHandler(tabs[currentTab])}
113103
>
114-
<FileDownloadIcon className='button-icon' sx={{ pr: 1 }} />
104+
<Download className='button-icon' size={18} />
115105
Download
116106
</Button>
117-
<Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
118-
<FileUploadIcon className='button-icon' sx={{ pr: 1 }} />
107+
<Button className='import-button' onClick={() => importHandler(dispatch)}>
108+
<Upload className='button-icon' size={18} />
119109
Upload
120110
</Button>
121111
{/* The component below renders a button for the tutorial walkthrough of Reactime */}
122112
<Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
123113
{/* adding a button for reconnection functionality 10/5/2023 */}
124114
<Button
125-
variant='outlined'
126115
className='reconnect-button'
127116
type='button'
128117
//update onClick functionality to include a popup that contains....
@@ -133,7 +122,7 @@ function ButtonsContainer(): JSX.Element {
133122
</span>
134123
}
135124
>
136-
<LoopIcon className='button-icon' sx={{ pr: 1 }} />
125+
<RefreshCw className='button-icon' size={18} />
137126
Reconnect
138127
</Button>
139128
<Dialog className='dialog-pop-up' open={reconnectDialogOpen} onClose={handleReconnectCancel}>

‎src/app/containers/MainContainer.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
} from '../slices/mainSlice';
2020
import { useDispatch, useSelector } from 'react-redux';
2121
import { MainState, RootState } from '../FrontendTypes';
22-
import HeatMapLegend from '../components/StateRoute/ComponentMap/heatMapLegend';
2322

2423
/*
2524
This is the main container where everything in our application is rendered
@@ -233,9 +232,11 @@ function MainContainer(): JSX.Element {
233232
/>
234233
</div>
235234
) : null}
236-
{/* @ts-ignore */}
237-
<TravelContainer snapshotsLength={snapshots.length} />
238-
<ButtonsContainer />
235+
<div className='bottom-controls'>
236+
{/* @ts-ignore */}
237+
<TravelContainer snapshotsLength={snapshots.length} />
238+
<ButtonsContainer />
239+
</div>
239240
</div>
240241
</div>
241242
);

0 commit comments

Comments
 (0)