Skip to content

Commit

Permalink
Content Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@timg512372
timg512372 committed Dec 10, 2018
1 parent c0edb47 commit 8a0b1bf
Show file tree
Hide file tree
Showing 12 changed files with 418 additions and 353 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
"semi": true,
"singleQuote": true,
"proseWrap": "preserve",
"printWidth": 120
"printWidth": 100
}
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@
"firebase": "^5.5.8",
"firebase-admin": "^6.1.0",
"firestore-export-import": "^0.1.6",
"global": "^4.3.2",
"grommet": "^1.11.0",
"har-validator": "^5.1.3",
"next": "^7.0.1",
"next-redux-wrapper": "^2.0.0",
"next-routes": "^1.4.2",
"node-pre-gyp": "^0.12.0",
"node-sass": "^4.10.0",
"now": "^12.1.9",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-parallax": "^2.0.1",
Expand Down
35 changes: 12 additions & 23 deletions pages/Contact.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,24 @@ class Contact extends Component {
});

const links = [];
const archive = [];
await req.firebaseServer
.database()
.ref('recipients')
.once('value')
.then(datasnapshot => {
datasnapshot.forEach(child => {
links.push(child.key);
if (child.val().archive == true) {
archive.push(child.key);
} else {
links.push(child.key);
}
});
});

store.dispatch({
type: types.GET_RECIPIENTS,
payload: links
payload: { links, archive }
});

store.dispatch({
Expand Down Expand Up @@ -69,13 +74,7 @@ class Contact extends Component {
);
}

return (
<Button
label="Submit"
accent
style={{ margin: '20px 45% 0% 45%', width: '10%' }}
/>
);
return <Button label="Submit" accent style={{ margin: '20px 45% 0% 45%', width: '10%' }} />;
}

render() {
Expand All @@ -101,25 +100,17 @@ class Contact extends Component {
border: 'none'
}}
type="text"
onChange={event =>
this.setState({ name: event.target.value })
}
onChange={event => this.setState({ name: event.target.value })}
/>
</FormField>
<FormField
label="Email Address"
size="medium"
help="Required"
>
<FormField label="Email Address" size="medium" help="Required">
<input
style={{
fontWeight: 'lighter',
border: 'none'
}}
type="email"
onChange={event =>
this.setState({ email: event.target.value })
}
onChange={event => this.setState({ email: event.target.value })}
/>
</FormField>

Expand All @@ -135,9 +126,7 @@ class Contact extends Component {
placeholder="Message"
name="message"
rows={10}
onChange={event =>
this.setState({ message: event.target.value })
}
onChange={event => this.setState({ message: event.target.value })}
/>
</FormField>

Expand Down
123 changes: 103 additions & 20 deletions pages/Gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { Image, Transformation } from 'cloudinary-react';
import serviceAccount from '../firebasekeys.json';
import * as types from '../redux/types.js';
import ImageModal from '../components/ImageModal';
import Anchor from 'grommet/components/Anchor';
import Heading from 'grommet/components/Heading';
import CaretBackIcon from 'grommet/components/icons/base/CaretBack';
import CaretNextIcon from 'grommet/components/icons/base/CaretNext';

class Gallery extends Component {
static async getInitialProps({ req, query, store, isServer }) {
Expand Down Expand Up @@ -34,12 +38,18 @@ class Gallery extends Component {
});

const links = [];
db.database()
const archive = [];
req.firebaseServer
.database()
.ref('recipients')
.once('value')
.then(datasnapshot => {
datasnapshot.forEach(child => {
links.push(child.key);
if (child.val().archive == true) {
archive.push(child.key);
} else {
links.push(child.key);
}
});
});

Expand All @@ -61,7 +71,7 @@ class Gallery extends Component {

store.dispatch({
type: types.GET_RECIPIENTS,
payload: links
payload: { links, archive }
});

store.dispatch({
Expand All @@ -71,37 +81,84 @@ class Gallery extends Component {
}

state = {
selectedImage: ''
selectedImage: '',
page: 1
};

renderImages = () => {
//const width = window.innerWidth() / 5;

let count = -1;
const images = this.props.gallery.map(src => {
return (
<div
onClick={() => this.setState({ selectedImage: src })}
style={{ margin: '1vw' }}
>
<Image
cloudName="sageprosthetics"
publicId={src}
width="248"
height="186"
//crop="scale"
/>
</div>
);
count++;
if (count >= (this.state.page - 1) * 20 && count < this.state.page * 20) {
console.log(src);
return (
<div
onClick={() => this.setState({ selectedImage: src })}
style={{ margin: '1vw' }}
>
<Image
cloudName="sageprosthetics"
publicId={src}
width="248"
height="186"
//crop="scale"
/>
</div>
);
}
});

return images.reverse();
return images;
};

renderAnchorTags = () => {
let anchors = [];
anchors.push(
<Anchor
icon={<CaretBackIcon />}
label=""
onClick={() => this.setState({ page: this.state.page - 1 })}
disabled={this.state.page === 1}
key="<"
/>
);
for (let a = 1; a <= Math.ceil(this.props.gallery.length / 20); a++) {
anchors.push(
<Anchor
onClick={() => this.setState({ page: a })}
key={a}
style={{ margin: '15px 10px 0px 10px' }}
className={a === this.state.page ? 'text active' : 'text'}
>
{' '}
<Heading tag="h3">{a}</Heading>{' '}
</Anchor>
);
}
anchors.push(
<Anchor
icon={<CaretNextIcon />}
label=""
onClick={() => this.setState({ page: this.state.page + 1 })}
disabled={
!this.props.gallery ||
this.state.page == Math.ceil(this.props.gallery.length / 20)
}
key=">"
/>
);
return anchors;
};

render() {
console.log(this.state.page);
return (
<div style={{ margin: '0% 5% 0% 5%' }}>
<title> Gallery | Sage Prosthetics </title>
<h2 style={{ textAlign: 'center' }}>Photo Gallery</h2>

<div
style={{
display: 'flex',
Expand All @@ -113,19 +170,45 @@ class Gallery extends Component {
{this.renderImages()}
</div>

<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}
>
{this.renderAnchorTags()}
</div>

<ImageModal
show={this.state.selectedImage !== ''}
src={this.state.selectedImage}
onToggleModal={() => this.setState({ selectedImage: '' })}
/>
<style jsx>{`
.text {
color: #416989;
font-weight: 500;
}
.text:hover {
color: #7ed4c6;
text-decoration: none;
text-decoration-color: #7ed4c6;
}
.active {
color: #7ed4c6;
text-decoration: none;
}
`}</style>
</div>
);
}
}

const mapStateToProps = state => {
return {
gallery: state.gallery
gallery: state.gallery.reverse()
};
};

Expand Down
36 changes: 11 additions & 25 deletions pages/Group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,18 @@ class Group extends Component {
});

const links = [];
const archive = [];
req.firebaseServer
.database()
.ref('recipients')
.once('value')
.then(datasnapshot => {
datasnapshot.forEach(child => {
links.push(child.key);
if (child.val().archive == true) {
archive.push(child.key);
} else {
links.push(child.key);
}
});
});

Expand Down Expand Up @@ -72,7 +77,7 @@ class Group extends Component {

store.dispatch({
type: types.GET_RECIPIENTS,
payload: links
payload: { links, archive }
});

store.dispatch({
Expand Down Expand Up @@ -149,13 +154,7 @@ class Group extends Component {
width="150"
//crop="scale"
>
<Transformation
width="1000"
height="1000"
gravity="face"
radius="500"
crop="thumb"
/>
<Transformation width="1000" height="1000" gravity="face" radius="500" crop="thumb" />
</Image>
<h3
style={{
Expand Down Expand Up @@ -199,13 +198,7 @@ class Group extends Component {
width="150"
//crop="scale"
>
<Transformation
width="1000"
height="1000"
gravity="face"
radius="500"
crop="thumb"
/>
<Transformation width="1000" height="1000" gravity="face" radius="500" crop="thumb" />
</Image>
<h4
style={{
Expand All @@ -231,16 +224,9 @@ class Group extends Component {
return (
<div style={{ margin: '0% 15% 0% 15%' }}>
<title> Our Group | Sage Prosthetics </title>
<h2 style={{ textAlign: 'center' }}>
{' '}
Meet our Service Group{' '}
</h2>
<h2 style={{ textAlign: 'center' }}> Meet our Service Group </h2>

<div
style={{ display: 'flex', justifyContent: 'space-around' }}
>
{this.renderFaculty()}
</div>
<div style={{ display: 'flex', justifyContent: 'space-around' }}>{this.renderFaculty()}</div>

<div
style={{
Expand Down
Loading

0 comments on commit 8a0b1bf

Please sign in to comment.