1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types'
import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { fetchSchematics } from '../../redux/dashboardSlice'
import SchematicCard from './SchematicCard'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper
}
}))
function TabPanel (props) {
const { children, value, index, ...other } = props
return (
<div
role='tabpanel'
hidden={value !== index}
id={`scrollable-auto-tabpanel-${index}`}
aria-labelledby={`scrollable-auto-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
)
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
}
function a11yProps (index) {
return {
id: `scrollable-auto-tab-${index}`,
'aria-controls': `scrollable-auto-tabpanel-${index}`
}
}
export default function ProgressPanel () {
const classes = useStyles()
const [value, setValue] = useState(0)
const handleChange = (event, newValue) => {
setValue(newValue)
}
const schematics = useSelector(state => state.dashboard.schematics)
const dispatch = useDispatch()
// For Fetching Saved Schematics
useEffect(() => {
dispatch(fetchSchematics())
}, [dispatch])
const tab = 'Recent ' + process.env.REACT_APP_DIAGRAMS_NAME
const typography = 'You have not created any ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME
return (
<div className={classes.root}>
<AppBar position='static'>
<Tabs
value={value}
onChange={handleChange}
variant='scrollable'
scrollButtons='auto'
aria-label='scrollable auto tabs example'
>
<Tab label={tab} {...a11yProps(0)} />
</Tabs>
</AppBar>
{/* Display overview of recently 4 saved schematics */}
<TabPanel value={value} index={0}>
{schematics.length !== 0
? <Grid
container
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
alignContent='center'
spacing={3}
>
{schematics.slice(0, 4).map(
(sch) => {
return (
<Grid item xs={12} sm={6} lg={3} key={sch.save_id}>
<SchematicCard sch={sch} />
</Grid>
)
}
)}
</Grid>
: <Typography variant='button' display='block' gutterBottom>
{typography} , Create your first one now...
</Typography>}
</TabPanel>
</div>
)
}
|
