Skip to content

Commit c2bae3e

Browse files
author
Shahein Moussavi
authored
Merge pull request #146 from openpracticelibrary/add-new-resources
Add new resources
2 parents fc74043 + 59bfbba commit c2bae3e

11 files changed

Lines changed: 552 additions & 56 deletions

File tree

‎src/assets/icons/AddIcon.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
3+
const AddIcon = (props) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width={props.width || "17"}
7+
height={props.height || "17"}
8+
viewBox="0 0 17 17"
9+
>
10+
<g fill={props.fill || "#A0A0A0"}>
11+
<path d="M15.125 12.273c-.301 1.242-1.604 2.548-2.848 2.85-2.55.585-5.028.586-7.57.002-1.245-.301-2.551-1.608-2.85-2.844-.586-2.55-.586-5.031-.003-7.573.302-1.245 1.608-2.551 2.845-2.85 1.276-.294 2.535-.44 3.793-.44 1.255 0 2.51.146 3.78.437 1.246.302 2.552 1.608 2.85 2.844.586 2.551.586 5.031.003 7.574m1.376-7.9C16.076 2.616 14.364.904 12.598.476 9.832-.159 7.146-.159 4.374.478 2.615.904.903 2.615.474 4.382c-.633 2.764-.633 5.451.004 8.225.425 1.758 2.137 3.469 3.904 3.897 1.382.317 2.745.476 4.108.476 1.362 0 2.725-.159 4.108-.476l.008-.002c1.758-.426 3.47-2.137 3.898-3.904.634-2.765.634-5.452-.003-8.225"/>
12+
<path d="M12.13 7.62H9.37V4.88c0-.485-.39-.879-.87-.879-.481 0-.871.394-.871.879V7.62H4.87c-.48 0-.87.393-.87.878s.39.879.87.879h2.76v2.743c0 .485.39.879.87.879.481 0 .871-.394.871-.879V9.378h2.758c.481 0 .871-.394.871-.879s-.39-.878-.87-.878"/>
13+
</g>
14+
</svg>
15+
);
16+
17+
export default AddIcon;

‎src/assets/icons/ArrowDownIcon.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from "react";
22

33
const ArrowDownIcon = () => (
4-
<svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd"><path d="M24 12c0-6.623-5.377-12-12-12s-12 5.377-12 12 5.377 12 12 12 12-5.377 12-12zm-1 0c0-6.071-4.929-11-11-11s-11 4.929-11 11 4.929 11 11 11 11-4.929 11-11zm-11.5 4.828l-3.763-4.608-.737.679 5 6.101 5-6.112-.753-.666-3.747 4.604v-11.826h-1v11.828z"/></svg>
4+
<svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd">
5+
<path d="M24 12c0-6.623-5.377-12-12-12s-12 5.377-12 12 5.377 12 12 12 12-5.377 12-12zm-1 0c0-6.071-4.929-11-11-11s-11 4.929-11 11 4.929 11 11 11 11-4.929 11-11zm-11.5 4.828l-3.763-4.608-.737.679 5 6.101 5-6.112-.753-.666-3.747 4.604v-11.826h-1v11.828z"/>
6+
</svg>
57
);
68

79
export default ArrowDownIcon;

‎src/assets/icons/ArrowRightIcon.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
3+
const ArrowRightIcon = (props) => (
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
width={props.width || "23"}
7+
height={props.height || "18"}
8+
viewBox="0 0 23 18"
9+
>
10+
<path fillRule="evenodd" d="M15.912 9.718l-6.017 6.881c-.4.478-1.117.534-1.604.14-.487-.393-.545-1.095-.144-1.572 0 0 0-.028.03-.028l4.354-5.028H2.646c-.63 0-1.146-.506-1.146-1.124 0-.618.516-1.123 1.146-1.123h9.885L8.12 2.836c-.401-.478-.344-1.18.143-1.573s1.175-.337 1.605.112l6.017 6.882c.372.393.372 1.04.028 1.46z"/>
11+
</svg>
12+
);
13+
14+
export default ArrowRightIcon;

‎src/assets/icons/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { default as AddIcon } from './AddIcon';
12
export { default as AmaIcon } from './AmaIcon';
23
export { default as FilledHeartIcon } from './FilledHeartIcon';
34
export { default as UserIcon } from './UserIcon';
@@ -11,6 +12,7 @@ export { default as PodcastIcon } from './PodcastIcon';
1112
export { default as DownloadIcon } from './DownloadIcon';
1213
export { default as LabsIcon } from './LabsIcon';
1314
export { default as ArrowDownIcon } from './ArrowDownIcon';
15+
export { default as ArrowRightIcon } from './ArrowRightIcon';
1416
export { default as OPLLogo } from './OPLLogo';
1517
export { default as EditIcon } from './EditIcon';
1618
export { default as EmailIcon } from './EmailIcon';

‎src/components/practicePage/PageBody/ResourceAddLink.js‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
import React from "react";
2+
import Box from "@material-ui/core/Box";
3+
import { makeStyles } from "@material-ui/core/styles/index";
4+
import Button from '@material-ui/core/Button';
5+
import Dialog from '@material-ui/core/Dialog';
6+
import DialogActions from '@material-ui/core/DialogActions';
7+
import DialogContent from '@material-ui/core/DialogContent';
8+
import DialogTitle from '@material-ui/core/DialogTitle';
9+
import Typography from "@material-ui/core/Typography";
10+
import MenuItem from '@material-ui/core/MenuItem';
11+
import TextField from '@material-ui/core/TextField';
12+
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
13+
import ArrowBack from '@material-ui/icons/ArrowBack';
14+
import { AddIcon } from "../../../assets/icons";
15+
import Grid from '@material-ui/core/Grid';
16+
import { useMutation } from "@apollo/react-hooks";
17+
import { UPDATE_PRACTICE_RESOURCES } from "../../../graphql";
18+
19+
const useStyles = makeStyles((theme) => ({
20+
root: {
21+
display: "flex",
22+
flexDirection: "row",
23+
padding: theme.spacing(1),
24+
margin: theme.spacing(1),
25+
},
26+
container: {
27+
flexShrink: 0,
28+
},
29+
space: {
30+
paddingRight: theme.spacing(2),
31+
},
32+
drawerPaper: {
33+
borderRadius: "17px",
34+
borderWidth: "3px",
35+
borderStyle: "solid",
36+
display: "flex",
37+
textAlign: "center",
38+
padding: theme.spacing(3),
39+
},
40+
41+
dialogText: {
42+
margin: theme.spacing(1),
43+
},
44+
submitButton: {
45+
margin: theme.spacing(1),
46+
borderRadius: "32px",
47+
borderStyle: "solid",
48+
borderWidth: "2px",
49+
borderColor: "#596562",
50+
},
51+
arrowForward: {
52+
top: ".25em",
53+
position: "relative",
54+
},
55+
btnText: {
56+
padding: theme.spacing(1),
57+
color: theme.palette.common.black,
58+
},
59+
color: {
60+
color: theme.palette.common.black,
61+
},
62+
}));
63+
64+
export default function ResourceAddLink(props) {
65+
const classes = useStyles();
66+
67+
const [updatePracticeResources] = useMutation(UPDATE_PRACTICE_RESOURCES);
68+
69+
70+
const [open, setOpen] = React.useState(false);
71+
const [linkType, setLinkType] = React.useState('');
72+
const refLinkUrl = React.useRef();
73+
const refLinkDesc = React.useRef();
74+
const [thankYouOpen, setThankYouOpen] = React.useState(false);
75+
76+
const handleSubmit = async () => {
77+
const prevResourceList = props.prevResources.map(resource => {
78+
return {
79+
link: resource.link,
80+
linkType: resource.linkType,
81+
description: resource.description
82+
}
83+
});
84+
85+
const additionalResource = [
86+
{
87+
link: refLinkUrl.current.value,
88+
linkType: linkType,
89+
description: refLinkDesc.current.value,
90+
}
91+
];
92+
const newResources = prevResourceList.concat(additionalResource);
93+
const { data } = await updatePracticeResources({
94+
variables: {
95+
practiceId: props.practiceId,
96+
newResources,
97+
},
98+
});
99+
if (data) {
100+
console.log('Updated!');
101+
handleClose(true);
102+
setThankYouOpen(true);
103+
}
104+
};
105+
106+
const handleClickListItem = (event) => {
107+
setLinkType(event.target.value)
108+
};
109+
110+
const handleClickOpen = () => {
111+
setOpen(true);
112+
};
113+
114+
const handleClose = (event) => {
115+
setOpen(false);
116+
setLinkType('');
117+
refLinkUrl.current.value = "";
118+
refLinkDesc.current.value = "";
119+
};
120+
121+
const handleThankYouClose = () => {
122+
setThankYouOpen(false);
123+
};
124+
125+
const handleThankYouSubmit = () => {
126+
setThankYouOpen(false);
127+
setOpen(true);
128+
};
129+
130+
return (
131+
<>
132+
<Box className={classes.root}>
133+
<Box>{props.children}</Box>
134+
<Box>
135+
<Button
136+
variant="text"
137+
color="secondary"
138+
className={classes.button}
139+
startIcon={<AddIcon fill="#1975ff"/>}
140+
onClick={handleClickOpen}
141+
data-testid="addResourcesButton"
142+
>
143+
<Typography variant={"body1"}>
144+
Add a link
145+
</Typography>
146+
</Button>
147+
<Dialog
148+
open={open}
149+
onClose={handleClose}
150+
aria-labelledby="link-type-dialog-title"
151+
PaperProps={{
152+
className: classes.drawerPaper,
153+
}}
154+
>
155+
<DialogTitle disableTypography={true} id="link-type-dialog-title">
156+
<Typography
157+
variant="subtitle2"
158+
className={classes.dialogText}
159+
data-testid="addResourceForm"
160+
>
161+
Add a link you love!
162+
</Typography>
163+
</DialogTitle>
164+
<DialogContent className={classes.container}>
165+
<Grid container spacing={2}>
166+
<Grid item xs={12} sm={5}>
167+
<TextField
168+
id="selectedLinkType"
169+
select
170+
required
171+
label="Link Type"
172+
variant="outlined"
173+
margin="dense"
174+
value={linkType}
175+
onChange={handleClickListItem}
176+
fullWidth
177+
>
178+
{props.linkTypes.map((option, index) => (
179+
<MenuItem
180+
key={index}
181+
value={option}
182+
>
183+
{option}
184+
</MenuItem>
185+
))}
186+
</TextField>
187+
</Grid>
188+
<Grid item xs={12} sm={7}>
189+
<TextField
190+
margin="dense"
191+
id="link"
192+
label="Link URL*"
193+
type="url"
194+
variant="outlined"
195+
inputRef={refLinkUrl}
196+
fullWidth
197+
/>
198+
</Grid>
199+
<Grid item xs={12}>
200+
<TextField
201+
margin="dense"
202+
id="description"
203+
label="Link Description*"
204+
type="text"
205+
variant="outlined"
206+
inputRef={refLinkDesc}
207+
fullWidth
208+
/>
209+
</Grid>
210+
</Grid>
211+
</DialogContent>
212+
<DialogActions>
213+
<Grid
214+
container
215+
direction="row"
216+
justify="space-between"
217+
alignItems="center"
218+
>
219+
<Grid item>
220+
<Button
221+
onClick={handleSubmit}
222+
variant="contained"
223+
className={classes.submitButton}
224+
>
225+
<Typography
226+
variant="button"
227+
className={classes.btnText}
228+
>
229+
Contribute this link <ArrowForwardIcon className={classes.arrowForward} />
230+
</Typography>
231+
</Button>
232+
</Grid>
233+
<Grid item>
234+
<Typography variant="overline">
235+
*Required fields :)
236+
</Typography>
237+
</Grid>
238+
</Grid>
239+
</DialogActions>
240+
</Dialog>
241+
<Dialog
242+
open={thankYouOpen}
243+
onClose={handleThankYouClose}
244+
aria-labelledby="thank-you-dialog"
245+
PaperProps={{
246+
className: classes.drawerPaper,
247+
}}
248+
>
249+
<Grid
250+
container
251+
direction="column"
252+
justify="center"
253+
alignItems="center"
254+
>
255+
<Grid item>
256+
<DialogTitle disableTypography={true} id="thank-you-dialog">
257+
<Typography
258+
variant="subtitle2"
259+
className={classes.dialogText}
260+
>
261+
Awesome.<br/>Thanks for that!
262+
</Typography>
263+
</DialogTitle>
264+
</Grid>
265+
<Grid item>
266+
<DialogActions>
267+
<Button
268+
onClick={handleThankYouSubmit}
269+
variant="contained"
270+
className={classes.submitButton}
271+
>
272+
<Typography
273+
variant="button"
274+
className={classes.btnText}
275+
>
276+
<ArrowBack className={classes.arrowForward} /> Add another link
277+
</Typography>
278+
</Button>
279+
</DialogActions>
280+
</Grid>
281+
</Grid>
282+
</Dialog>
283+
</Box>
284+
</Box>
285+
</>
286+
);
287+
}

0 commit comments

Comments
 (0)