Skip to content

Commit 6f806c6

Browse files
gwynndpgwynndp
committed
chore: move styles to own file, remove comments, add error handling, add invalidateCaptureCount
1 parent 6f852e0 commit 6f806c6

File tree

5 files changed

+286
-185
lines changed

5 files changed

+286
-185
lines changed

‎src/components/Captures/CaptureGallery.js

Lines changed: 7 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState, useContext, useRef } from 'react';
1+
import React, { useEffect, useState, useContext } from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import AppBar from '@material-ui/core/AppBar';
44
import Button from '@material-ui/core/Button'; // replace with icons down the line
@@ -9,142 +9,18 @@ import Typography from '@material-ui/core/Typography';
99
import Snackbar from '@material-ui/core/Snackbar';
1010
import TablePagination from '@material-ui/core/TablePagination';
1111

12-
import { LocationOn } from '@material-ui/icons';
1312
import TableChartIcon from '@material-ui/icons/TableChart';
1413
import CaptureImageCard from './CaptureImageCard';
1514
import SidePanel from './../SidePanel';
15+
import styles from './CaptureGalllery.styles';
1616
import { countToLocaleString } from '../../common/numbers';
17-
import {
18-
selectedHighlightColor,
19-
SIDE_PANEL_WIDTH,
20-
} from '../../common/variables.js';
2117
import { CapturesContext } from '../../context/CapturesContext';
2218
import { SpeciesContext } from '../../context/SpeciesContext';
2319
import { TagsContext } from '../../context/TagsContext';
2420

2521
const log = require('loglevel').getLogger('../components/Verify');
2622

27-
const useStyles = makeStyles((theme) => ({
28-
wrapper: {
29-
padding: theme.spacing(2, 8, 4, 8),
30-
},
31-
cornerTable: {
32-
margin: theme.spacing(1),
33-
'&>*': {
34-
display: 'inline-flex',
35-
margin: theme.spacing(1, 1),
36-
},
37-
},
38-
cardImg: {
39-
width: '100%',
40-
height: 'auto',
41-
},
42-
cardTitle: {
43-
color: '#f00',
44-
},
45-
card: {
46-
cursor: 'pointer',
47-
'&:hover $cardMedia': {
48-
transform: 'scale(1.04)',
49-
},
50-
},
51-
cardCheckbox: {
52-
position: 'absolute',
53-
height: '1.2em',
54-
width: '1.2em',
55-
top: '0.2rem',
56-
left: '0.3rem',
57-
pointerEvents: 'none',
58-
display: 'flex',
59-
alignItems: 'center',
60-
justifyContent: 'center',
61-
zIndex: 1,
62-
},
63-
cardSelected: {
64-
backgroundColor: theme.palette.action.selected,
65-
},
66-
cardContent: {
67-
padding: '87% 0 0 0',
68-
position: 'relative',
69-
overflow: 'hidden',
70-
},
71-
selected: {
72-
border: `2px ${selectedHighlightColor} solid`,
73-
},
74-
cardMedia: {
75-
position: 'absolute',
76-
top: 0,
77-
bottom: 0,
78-
left: 0,
79-
right: 0,
80-
transform: 'scale(1)',
81-
transition: theme.transitions.create('transform', {
82-
easing: theme.transitions.easing.easeInOut,
83-
duration: '0.2s',
84-
}),
85-
},
86-
cardWrapper: {
87-
position: 'relative',
88-
padding: theme.spacing(2),
89-
},
90-
placeholderCard: {
91-
pointerEvents: 'none',
92-
'& $card': {
93-
background: '#eee',
94-
'& *': {
95-
opacity: 0,
96-
},
97-
},
98-
},
99-
title: {
100-
padding: theme.spacing(2, 8),
101-
},
102-
snackbar: {
103-
bottom: 20,
104-
},
105-
snackbarContent: {
106-
backgroundColor: theme.palette.action.active,
107-
},
108-
cardActions: {
109-
display: 'flex',
110-
padding: theme.spacing(0, 2),
111-
},
112-
button: {
113-
marginRight: '8px',
114-
},
115-
body: {
116-
width: `calc(100% - ${SIDE_PANEL_WIDTH}px)`,
117-
display: 'flex',
118-
flexDirection: 'column',
119-
overflow: 'auto',
120-
height: '100%',
121-
},
122-
bodyInner: {
123-
display: 'flex',
124-
flexDirection: 'column',
125-
},
126-
tooltip: {
127-
maxWidth: 'none',
128-
},
129-
MuiDialogActionsSpacing: {
130-
paddingLeft: '16px',
131-
paddingRight: '16px',
132-
},
133-
sidePanelSubmitButton: {
134-
width: '128px',
135-
},
136-
mb: {
137-
marginBottom: '1rem',
138-
},
139-
activeFilters: {
140-
width: theme.spacing(5),
141-
height: theme.spacing(5),
142-
marginLeft: '0.75rem',
143-
backgroundColor: theme.palette.stats.green,
144-
fontSize: 'smaller',
145-
fontWeight: 'bold',
146-
},
147-
}));
23+
const useStyles = makeStyles(styles);
14824

14925
const CaptureGallery = ({
15026
setShowGallery,
@@ -174,12 +50,9 @@ const CaptureGallery = ({
17450
const classes = useStyles();
17551
const [complete, setComplete] = useState(0);
17652

177-
// const [isLoading, setIsLoading] = useState(false);
178-
const refContainer = useRef();
179-
18053
/* to display progress */
18154
useEffect(() => {
182-
// console.log('-- approve all complete');
55+
log.debug('-- approve all complete');
18356
setComplete(approveAllComplete);
18457
}, [approveAllComplete]);
18558

@@ -217,8 +90,8 @@ const CaptureGallery = ({
21790
}
21891

21992
async function handleSubmit(approveAction) {
220-
// log.debug('approveAction:', approveAction);
221-
//check selection
93+
log.debug('approveAction:', approveAction);
94+
// check selection
22295
if (capturesSelected.length === 0) {
22396
window.alert('Please select one or more captures');
22497
return;
@@ -229,7 +102,7 @@ const CaptureGallery = ({
229102
console.log('species id:', speciesId);
230103
}
231104

232-
//create/retrieve tags
105+
// create/retrieve tags
233106
approveAction.tags = await tagsContext.createTags();
234107
const result = await approveAll(approveAction);
235108
if (!result) {

‎src/components/Captures/CaptureGallery.styles.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import {
2+
selectedHighlightColor,
3+
SIDE_PANEL_WIDTH,
4+
} from '../../common/variables.js';
5+
6+
const styles = (theme) => ({
7+
wrapper: {
8+
padding: theme.spacing(2, 8, 4, 8),
9+
},
10+
cornerTable: {
11+
margin: theme.spacing(1),
12+
'&>*': {
13+
display: 'inline-flex',
14+
margin: theme.spacing(1, 1),
15+
},
16+
},
17+
cardImg: {
18+
width: '100%',
19+
height: 'auto',
20+
},
21+
cardTitle: {
22+
color: '#f00',
23+
},
24+
card: {
25+
cursor: 'pointer',
26+
'&:hover $cardMedia': {
27+
transform: 'scale(1.04)',
28+
},
29+
},
30+
cardCheckbox: {
31+
position: 'absolute',
32+
height: '1.2em',
33+
width: '1.2em',
34+
top: '0.2rem',
35+
left: '0.3rem',
36+
pointerEvents: 'none',
37+
display: 'flex',
38+
alignItems: 'center',
39+
justifyContent: 'center',
40+
zIndex: 1,
41+
},
42+
cardSelected: {
43+
backgroundColor: theme.palette.action.selected,
44+
},
45+
cardContent: {
46+
padding: '87% 0 0 0',
47+
position: 'relative',
48+
overflow: 'hidden',
49+
},
50+
selected: {
51+
border: `2px ${selectedHighlightColor} solid`,
52+
},
53+
cardMedia: {
54+
position: 'absolute',
55+
top: 0,
56+
bottom: 0,
57+
left: 0,
58+
right: 0,
59+
transform: 'scale(1)',
60+
transition: theme.transitions.create('transform', {
61+
easing: theme.transitions.easing.easeInOut,
62+
duration: '0.2s',
63+
}),
64+
},
65+
cardWrapper: {
66+
position: 'relative',
67+
padding: theme.spacing(2),
68+
},
69+
placeholderCard: {
70+
pointerEvents: 'none',
71+
'& $card': {
72+
background: '#eee',
73+
'& *': {
74+
opacity: 0,
75+
},
76+
},
77+
},
78+
title: {
79+
padding: theme.spacing(2, 8),
80+
},
81+
snackbar: {
82+
bottom: 20,
83+
},
84+
snackbarContent: {
85+
backgroundColor: theme.palette.action.active,
86+
},
87+
cardActions: {
88+
display: 'flex',
89+
padding: theme.spacing(0, 2),
90+
},
91+
button: {
92+
marginRight: '8px',
93+
},
94+
body: {
95+
width: `calc(100% - ${SIDE_PANEL_WIDTH}px)`,
96+
display: 'flex',
97+
flexDirection: 'column',
98+
overflow: 'auto',
99+
height: '100%',
100+
},
101+
bodyInner: {
102+
display: 'flex',
103+
flexDirection: 'column',
104+
},
105+
tooltip: {
106+
maxWidth: 'none',
107+
},
108+
MuiDialogActionsSpacing: {
109+
paddingLeft: '16px',
110+
paddingRight: '16px',
111+
},
112+
sidePanelSubmitButton: {
113+
width: '128px',
114+
},
115+
mb: {
116+
marginBottom: '1rem',
117+
},
118+
activeFilters: {
119+
width: theme.spacing(5),
120+
height: theme.spacing(5),
121+
marginLeft: '0.75rem',
122+
backgroundColor: theme.palette.stats.green,
123+
fontSize: 'smaller',
124+
fontWeight: 'bold',
125+
},
126+
});
127+
128+
export default styles;

0 commit comments

Comments
 (0)