Skip to content

Commit ed75e65

Browse files
JasonDing9JasonDing9
committed
API call for clusters
1 parent 8b61e48 commit ed75e65

File tree

7 files changed

+126
-53
lines changed

7 files changed

+126
-53
lines changed

‎.DS_Store

2 KB
Binary file not shown.

‎backend/.DS_Store

6 KB
Binary file not shown.

‎backend/__pycache__/browser_history.cpython-39.pyc

3.67 KB
Binary file not shown.

‎frontend/package-lock.json

+16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@testing-library/jest-dom": "^5.16.5",
1111
"@testing-library/react": "^13.4.0",
1212
"@testing-library/user-event": "^13.5.0",
13+
"axios": "^1.3.3",
1314
"react": "^18.2.0",
1415
"react-dom": "^18.2.0",
1516
"react-native-web": "^0.18.12",

‎frontend/src/App.js

+75-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import logo from './logo.svg';
22
import './App.css';
3+
import axios from 'axios'
34
import Button from '@mui/material/Button';
45
import Grid from '@mui/material/Grid'
56
import React, { useState, useEffect } from 'react';
@@ -9,8 +10,33 @@ import Box from '@mui/material/Box';
910
import Stack from '@mui/material/Stack';
1011

1112
function App() {
12-
1313
const [currentTime, setCurrentTime] = useState(new Date());
14+
const [clusterData, setClusterData] = useState(null);
15+
16+
const getClusters = async () => {
17+
return axios.get('http://127.0.0.1:5000/[email protected]')
18+
.then(function (res) {
19+
if (res.data.clusters !== null){
20+
console.log(res)
21+
return (res.data.clusters)
22+
}
23+
})
24+
.catch(function (res) {
25+
if (res.response) {
26+
console.log(res.response.data.reason + " Please wait a few seconds and try reloading the page.");
27+
} else {
28+
console.log("Something went wrong. Please wait a few seconds and try reloading the page.")
29+
}
30+
});
31+
}
32+
33+
useEffect( () => {
34+
if (clusterData === null) {
35+
getClusters().then( (res) => {
36+
setClusterData(res)
37+
})
38+
}
39+
}, [clusterData])
1440

1541
useEffect(() => {
1642
const interval = setInterval(() => {
@@ -19,28 +45,55 @@ function App() {
1945
return () => clearInterval(interval);
2046
}, []);
2147

22-
return (
48+
function getClustersComponent() {
49+
const clusters = []
50+
for (var i = 0; i < clusterData.length; i++) {
51+
const cluster = clusterData[i];
52+
const preview = <Cluster title={cluster.name}></Cluster>
53+
clusters.push(preview)
54+
}
55+
return clusters
56+
}
57+
58+
if (clusterData) {
59+
return (
60+
61+
<div className="App">
62+
<Box
63+
sx={{margin: 2}}>
64+
<Box sx={{margin: 20}}></Box>
65+
<div className='Time' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>{currentTime.toLocaleTimeString()}</div>
66+
<div className='HelloMessage' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> Good morning, Ayushi.</div>
67+
<Box
68+
sx={{m: 10}}></Box>
69+
<div className="Workspaces">
70+
<Stack direction="row" spacing={4} justifyContent="center">
71+
{getClustersComponent()}
72+
</Stack>
73+
</div>
74+
</Box>
75+
</div>
2376

24-
<div className="App">
25-
<Box
26-
sx={{margin: 2}}>
27-
<Box sx={{margin: 20}}></Box>
28-
<div className='Time' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>{currentTime.toLocaleTimeString()}</div>
29-
<div className='HelloMessage' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> Good morning, Ayushi.</div>
30-
<Box
31-
sx={{m: 10}}></Box>
32-
<div className="Workspaces">
33-
<Stack direction="row" spacing={4} justifyContent="center">
34-
<Cluster title="CS 189"></Cluster>
35-
<Cluster title="CS 170"></Cluster>
36-
<Cluster title="UGBA 105"></Cluster>
37-
<Cluster title="R1B"></Cluster>
38-
</Stack>
39-
</div>
40-
</Box>
41-
</div>
42-
43-
);
77+
);
78+
} else {
79+
return (
80+
<div className="App">
81+
<Box
82+
sx={{margin: 2}}>
83+
<Box sx={{margin: 20}}></Box>
84+
<div className='Time' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>{currentTime.toLocaleTimeString()}</div>
85+
<div className='HelloMessage' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> Good morning, Ayushi.</div>
86+
<Box
87+
sx={{m: 10}}></Box>
88+
<div className="Workspaces">
89+
<Stack direction="row" spacing={4} justifyContent="center">
90+
<div className='HelloMessage' style = {{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> Loading workspaces.</div>
91+
</Stack>
92+
</div>
93+
</Box>
94+
</div>
95+
);
96+
}
4497
}
4598

4699
export default App;

‎frontend/src/components/card.js

+34-31
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,40 @@ import { Text, TextInput, View } from 'react-native';
99

1010
export default function Cluster(props) {
1111
const [text, setText] = useState(props.title);
12-
function onEnter(newText) {
13-
setText(newText);
14-
document.getElementById("ClusterButton").innerHTML = newText;
15-
}
16-
return (
17-
<Stack direction="column">
18-
<TextInput
19-
style={{
20-
color: "black",
21-
padding: 0,
22-
paddingLeft: 1,
23-
justifyContent: "left",
24-
backgroundColor: 'white',
25-
textTransform: "lowercase"
26-
}}
27-
placeholder="edit me"
28-
onSubmitEditing={(newText) => onEnter(newText)}
29-
/>
12+
const [input, setInput] = useState('edit me');
13+
14+
function onEnter() {
15+
setText(input);
16+
}
3017

31-
<Button
32-
id="ClusterButton"
33-
className="ClusterButton"
34-
variant="contained"
35-
endIcon={<RocketLaunchIcon />}
36-
style={{
37-
backgroundColor: 'black',
38-
fontSize: 'medium'
39-
}}
40-
> {text}
41-
</Button>
42-
</Stack>
18+
return (
19+
<Stack direction="column">
20+
<TextInput
21+
style={{
22+
color: 'black',
23+
padding: 0,
24+
paddingLeft: 1,
25+
justifyContent: 'left',
26+
backgroundColor: 'white',
27+
textTransform: 'lowercase'
28+
}}
29+
onSubmitEditing={onEnter}
30+
onChange={(evt) => setInput(evt.target.value)}
31+
value={input}
32+
/>
4333

34+
<Button
35+
id="ClusterButton"
36+
className="ClusterButton"
37+
variant="contained"
38+
endIcon={<RocketLaunchIcon />}
39+
style={{
40+
backgroundColor: 'black',
41+
fontSize: 'medium'
42+
}}
43+
>
44+
{text}
45+
</Button>
46+
</Stack>
4447
);
45-
}
48+
}

0 commit comments

Comments
 (0)