Grommet v1

.gitignore

@@ -2,3 +2,4 @@
 /.next
 
 firebasekeys.json
+cloudinarykeys.json

.prettierrc

@@ -4,5 +4,5 @@
     "semi": true,
     "singleQuote": true,
     "proseWrap": "preserve",
-    "printWidth": 120
+    "printWidth": 100
 }

README.md

@@ -1,22 +1,23 @@
 # Sage Prosthetics
 
-## About 
+## About
 
-This repo contains the source code for the Sage Prosthetics website. Sage Prosthetics is a service group at Sage Hill School that provides 3D printed prosthetic hands and arms for underpriveleged children and adults. 
-
-Not deployed yet
+This repo contains the source code for the Sage Prosthetics website. Sage Prosthetics is a service group at Sage Hill School that provides 3D printed prosthetic hands and arms for underpriveleged children and adults.
 
+https://www.sageprosthetics.org
 
 ## Usage
 
 Email me for the firebase keys
 
 Clone the project
 
-### Terminal commands: 
+### Terminal commands:
+
 ```
 yarn
 ```
+
 ```
 yarn run dev
 ```

components/BioModal.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Image, Transformation } from 'cloudinary-react';
+import anime from 'animejs';
+import Transition from 'react-transition-group/Transition';
+
+import Person from './Person';
+
+const BioModal = props => {
+    if (props.show) {
+        return (
+            <React.Fragment>
+                <div
+                    style={{
+                        height: '100%',
+                        width: '100%',
+                        position: 'absolute',
+                        backgroundColor: '#999999',
+                        opacity: '0.75',
+
+                        zIndex: 200,
+                        left: '0',
+                        top: '0'
+                    }}
+                    onClick={props.onToggleModal}
+                />
+
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        height: '100%',
+                        width: '100%',
+                        position: 'absolute',
+                        left: '0',
+                        top: '0'
+                    }}
+                    //onClick={props.onToggleModal}
+                >
+                    <Transition onEnter={modalEnter} timeout={0} in={props.show} onExit={modalExit}>
+                        <div
+                            style={{
+                                height: props.desktop ? '70vh' : '150vh',
+                                width: '70vw',
+                                marginTop: props.desktop ? 150 : 20 + window.scrollY + 'px',
+                                backgroundColor: 'white',
+                                borderRadius: '20px',
+                                boxShadow: 'true',
+                                padding: '5%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
+                                zIndex: 300
+                            }}
+                            onClick={event => event.preventDefault()}
+                            className="biomodal"
+                        >
+                            <Person
+                                src={props.person.src}
+                                name={props.person.name}
+                                faculty
+                                horizontal={props.desktop}
+                            />
+                            <h6 style={{ marginTop: '4vh', fontSize: '2vh' }}>
+                                &emsp;&ensp;
+                                {props.person.bio}{' '}
+                            </h6>
+                        </div>
+                    </Transition>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+    return null;
+};
+
+const modalEnter = biomodal => {
+    console.log('in');
+    return anime({
+        // targets: biomodal,
+        // opacity: {
+        //     value: [0, 1]
+        // },
+        // easing: 'easeOutQuint',
+        // duration: 1000
+    });
+};
+
+const modalExit = biomodal => {
+    console.log('out');
+    return anime({
+        // targets: biomodal,
+        // opacity: {
+        //     value: [1, 0]
+        // },
+        // easing: 'easeOutQuint',
+        // duration: 1000
+    });
+};
+
+export default BioModal;

components/CloudinaryInput.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import Button from 'grommet/components/Button';
+import cloudinaryKeys from '../cloudinarykeys.json';
+
+class CloudinaryInput extends Component {
+    static defaultProps = {
+        label: 'Upload Image to Cloudinary'
+    };
+
+    processCloudinaryResult = (error, results) => {
+        if (results) {
+            const result = results[0];
+            const { secure_url, public_id, path } = result;
+            this.props.onUploadSuccess({ url: secure_url, id: path, public_id });
+        }
+    };
+
+    openCloudinaryUploader = () => {
+        const { cloud_name, upload_preset } = cloudinaryKeys;
+        cloudinary.openUploadWidget(
+            { cloud_name, upload_preset: upload_preset },
+            this.processCloudinaryResult
+        );
+    };
+
+    render() {
+        return (
+            <div className="cloudinary-input">
+                <Button
+                    label={this.props.label}
+                    onClick={this.openCloudinaryUploader}
+                    style={this.props.style}
+                />
+            </div>
+        );
+    }
+}
+
+export default CloudinaryInput;

components/ConfirmModal.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import Button from 'grommet/components/Button';
+
+const ConfirmModal = props => {
+    if (props.show) {
+        return (
+            <React.Fragment>
+                <div
+                    style={{
+                        height: '100%',
+                        width: '100%',
+                        position: 'absolute',
+                        backgroundColor: '#999999',
+                        opacity: '0.75',
+
+                        zIndex: 100,
+                        left: '0',
+                        top: '0'
+                    }}
+                    onClick={props.onToggleModal}
+                />
+
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        height: '100%',
+                        width: '100%',
+                        position: 'absolute',
+                        left: '0',
+                        top: '0'
+                    }}
+                    //onClick={props.onToggleModal}
+                >
+                    <div
+                        style={{
+                            height: '30vh',
+                            width: '30vw',
+                            marginTop: 150 + window.scrollY + 'px',
+                            backgroundColor: 'white',
+                            borderRadius: '20px',
+                            boxShadow: 'true',
+                            padding: '2%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            flexDirection: 'column',
+                            zIndex: 300
+                        }}
+                        onClick={event => event.preventDefault()}
+                    >
+                        <h3 style={{ textAlign: 'center' }}> Warning! </h3>
+                        <h6>{props.message}</h6>
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-around',
+                                alignItems: 'center',
+                                width: '100%',
+                                height: '500px'
+                            }}
+                        >
+                            <Button label="No" onClick={props.onToggleModal} secondary={true} />
+                            <Button
+                                label="Yes"
+                                onClick={() => {
+                                    props.onToggleModal();
+                                    props.onConfirm();
+                                }}
+                                accent={true}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+    return null;
+};
+
+export default ConfirmModal;