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
|
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link as RouterLink } from 'react-router-dom'
import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { fetchSchematics } from '../../redux/dashboardSlice'
import SchematicCard from './SchematicCard'
const useStyles = makeStyles({
mainHead: {
width: '100%',
backgroundColor: '#404040',
color: '#fff'
},
title: {
fontSize: 14,
color: '#80ff80'
}
})
// Card displaying user my schematics page header.
function MainCard () {
const classes = useStyles()
const typography1 = 'All ' + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + ' are listed below'
const typography2 = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
return (
<Card className={classes.mainHead}>
<CardContent>
<Typography className={classes.title} gutterBottom>
{typography1}
</Typography>
<Typography variant='h5' component='h2'>
{typography2}
</Typography>
</CardContent>
<CardActions>
<Button
target='_blank'
component={RouterLink}
to='/editor'
size='small'
color='primary'
>
Create New
</Button>
<Button size='small' color='secondary'>
Load More
</Button>
</CardActions>
</Card>
)
}
export default function SchematicsList () {
const classes = useStyles()
const user = useSelector(state => state.auth.user)
const schematics = useSelector(state => state.dashboard.schematics)
const dispatch = useDispatch()
// For Fetching Saved Schematics
useEffect(() => {
dispatch(fetchSchematics())
}, [dispatch])
const typography1 = 'You don\'t have any saved ' + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + '...'
return (
<>
<Grid
container
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
alignContent='center'
spacing={3}
>
{/* User Dashboard My Schematic Header */}
<Grid item xs={12}>
<MainCard />
</Grid>
{/* List all schematics saved by user */}
{schematics.length !== 0
? <>
{schematics.map(
(sch) => {
return (
<Grid item xs={12} sm={6} lg={3} key={sch.save_id}>
<SchematicCard sch={sch} />
</Grid>
)
}
)}
</>
: <Grid item xs={12}>
<Card style={{ padding: '7px 15px' }} className={classes.mainHead}>
<Typography variant='subtitle1' gutterBottom>
Hey {user.username} , {typography1}
</Typography>
</Card>
</Grid>}
</Grid>
</>
)
}
|
