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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link as RouterLink } from 'react-router-dom'
import {
Avatar,
Divider,
Hidden,
InputBase,
List,
ListItem,
ListItemAvatar,
ListItemText,
Typography
} from '@material-ui/core'
import { deepPurple } from '@material-ui/core/colors'
import { makeStyles } from '@material-ui/core/styles'
import { fetchSchematics } from '../../redux/dashboardSlice'
import { getUppercaseInitial } from '../../utils/GalleryUtils'
const useStyles = makeStyles((theme) => ({
toolbar: {
minHeight: '45px'
},
purple: {
color: theme.palette.getContrastText(deepPurple[500]),
backgroundColor: deepPurple[500]
},
sideItem: {
padding: theme.spacing(1.5, 2)
},
nested: {
paddingLeft: theme.spacing(2),
overflow: 'auto',
width: '100%',
maxHeight: 200
},
nestedSearch: {
padding: theme.spacing(0),
border: '1px solid #cccccc',
margin: theme.spacing(1, 2),
borderRadius: '5px'
},
input: {
marginLeft: theme.spacing(1),
flex: 1
}
}))
// Vertical Navbar for user dashboard
export default function DashSidebar (_props) {
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 button = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
const placeholder = 'Find your ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...'
return (
<>
<Hidden smDown>
<div className={classes.toolbar} />
</Hidden>
<List>
<ListItem
alignItems='flex-start'
component={RouterLink}
to='/dashboard'
style={{ marginTop: '15px' }}
className={classes.sideItem}
button
divider
>
<ListItemAvatar>
<Avatar className={classes.purple}>
{getUppercaseInitial(user.username)}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={user.username}
secondary={
<>
<Typography
component='span'
variant='body2'
color='textSecondary'
>
Contributor
</Typography>
</>
}
/>
</ListItem>
<ListItem
component={RouterLink}
to='/dashboard/schematics'
className={classes.sideItem}
button
>
<ListItemText primary={button} />
</ListItem>
{/* List name of saved schematics */}
<List className={classes.nestedSearch}>
<InputBase
className={classes.input}
placeholder={placeholder}
/>
</List>
<div className={classes.nested}>
{schematics.map((sch) => (
<ListItem key={sch.save_id} button>
<ListItemText primary={`${sch.name}`} />
</ListItem>
))}
</div>
<Divider />
</List>
</>
)
}
|
