-
Notifications
You must be signed in to change notification settings - Fork 12
/
Favorites.jsx
149 lines (138 loc) · 5.62 KB
/
Favorites.jsx
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import React from 'react';
import { isEmpty, groupBy, map, orderBy, reject } from 'lodash';
import {
IconButton, Tooltip,
List, ListItem, ListItemIcon, ListItemText,
ListSubheader, CircularProgress, ListItemButton
} from '@mui/material';
import { Refresh as RefreshIcon } from '@mui/icons-material';
import APIService from '../../services/APIService';
import { getCurrentUserUsername, defaultDeletePin, } from '../../common/utils'
import PinIcon from '../common/PinIcon';
import DynamicConfigResourceIcon from '../common/DynamicConfigResourceIcon';
import PopperGrow from '../common/PopperGrow';
const Favorites = () => {
const username = getCurrentUserUsername()
const [open, setOpen] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const [objects, setObjects] = React.useState({});
const anchorRef = React.useRef(null);
const handleToggle = () => setOpen(prevOpen => {
const newOpen = !prevOpen
if(newOpen)
fetchFavorites()
return newOpen
});
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target))
return;
setOpen(false);
};
const fetchFavorites = reload => {
if(username && (isEmpty(objects) || reload)) {
setLoading(true)
__fetchFavorites()
}
}
const __fetchFavorites = () => {
getService()
.get(null, null, {includeCreatorPins: true})
.then(
response => {
setObjects(response.data)
setLoading(false)
})
}
const removePin = pinId => defaultDeletePin(getService(pinId), setObjects(reject(objects, {id: pinId})))
const getService = pinId => APIService.users(username).pins(pinId)
const getLabel = object => {
if(object.owner)
return `${object.owner}/${object.short_code}`
return `${object.name}`
}
const groupedObjects = groupBy(objects, 'resource.type')
return (
<React.Fragment>
<Tooltip arrow title='My Pins'>
<IconButton
ref={anchorRef}
aria-controls={open ? 'favorite-menu' : undefined}
aria-expanded={open ? 'true' : undefined}
aria-label="select merge strategy"
aria-haspopup="menu"
onClick={handleToggle}
touch='true'
size="large"
color={open ? 'primary' : 'default'}
>
<PinIcon pinned="true" />
</IconButton>
</Tooltip>
<PopperGrow open={open} anchorRef={anchorRef} handleClose={handleClose}>
<div>
{
loading ?
<div className='flex-vertical-center' style={{height: '200px', width: '100%', justifyContent: 'center'}}>
<CircularProgress />
</div> :
<React.Fragment>
<div style={{width: '100%', padding: '5px 10px', justifyContent: 'space-between', background: 'rgba(0, 0, 0, 0.1)', marginBottom: '5px'}} className='flex-vertical-center'>
<span style={{textAlign: 'left'}}>
<b>My Pins</b>
</span>
<span style={{textAlign: 'right'}}>
<IconButton color='primary' size='small' onClick={() => fetchFavorites(true)}>
<RefreshIcon fontSize='inherit' />
</IconButton>
</span>
</div>
{
isEmpty(groupedObjects) &&
<List dense style={{textAlign: 'left'}} subheader={
<ListSubheader style={{lineHeight: '24px', padding: '0 10px', fontSize: '0.8rem'}} component="div" id="nested-list-subheader">
Pin resources <a href={`#/users/${username}/`}>here</a>
</ListSubheader>
}/>
}
{
map(groupedObjects, (resources, type) => {
return (
<List dense style={{textAlign: 'left'}} key={type} subheader={
<ListSubheader style={{position: 'relative', lineHeight: '24px', padding: '0 10px', fontSize: '0.8rem'}} component="div" id="nested-list-subheader">
{`${type}s`}
</ListSubheader>
}>
{
map(orderBy(resources, ['created_at', 'resource.name'], ['desc', 'asc']), resource => (
<ListItem disablePadding key={resource.id} secondaryAction={
<Tooltip title='Remove'>
<IconButton edge="end" aria-label="pin" size='small' onClick={() => removePin(resource.id)}>
<PinIcon pinned="true" fontSize='inherit' />
</IconButton>
</Tooltip>
}>
<ListItemButton role={undefined} href={`#${resource.resource_uri}`} dense component="a" style={{padding: '0 15px'}}>
<ListItemIcon style={{minWidth: 'auto', marginRight: '5px'}}>
<DynamicConfigResourceIcon
resource={type.toLowerCase()}
fontSize='inherit'
enableColor
/>
</ListItemIcon>
<ListItemText primary={getLabel(resource.resource)} />
</ListItemButton>
</ListItem>
))
}
</List>
)
})
}
</React.Fragment>
}
</div>
</PopperGrow>
</React.Fragment>
)
}
export default Favorites;