Skip to content

Commit

Permalink
Merge pull request #3 from ChrisBit/optimize
Browse files Browse the repository at this point in the history 
Refactor app to use functional components and hooks
  • Loading branch information
@thomaskarl
thomaskarl authored Mar 16, 2020
2 parents 038b2f1 + 5f1a43a commit fbb0933
Show file tree
Hide file tree
Showing 12 changed files with 4,082 additions and 2,899 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
"homepage": "https://wwww.peterstenberg.no",
"private": true,
"dependencies": {
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"node-sass": "^4.13.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0",
"react-simple-lightbox": "^1.0.26",
"react-slideshow-image": "^1.1.7"
"react-slideshow-image": "^1.3.4"
},
"scripts": {
"start": "react-scripts start",
Expand Down
82 changes: 50 additions & 32 deletions src/components/About.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,56 @@
import React from 'react';

export default class About extends React.Component {
render() {
return (
<div id={'about'} className='about'>
<div className="about-container">
<div className={'logo'}>
<img src={this.props.logo} alt='logo'/>
</div>
<p className={'about-text'}>{this.props.contactInfo.aboutText}</p>
const About = (props) => {
return (
<div id="about" className="about">
<div className="about-container">
<div className="logo">
<img src={props.logo} alt="logo" />
</div>
<p className="about-text">{props.contactInfo.aboutText}</p>

<div className="social-media-container">
<a href={this.props.contactInfo.contactFacebook}>
<img className={'social-media-icon'} src={this.props.contactInfo.contactFacebookLogo} alt="Facebook logo"/>
</a>
<div className="social-media-container">
<a href={props.contactInfo.contactFacebook}>
<img
className="social-media-icon"
src={props.contactInfo.contactFacebookLogo}
alt="Facebook logo"
/>
</a>

<a href={this.props.contactInfo.contactInstagram}>
<img className={'social-media-icon'} src={this.props.contactInfo.contactInstagramLogo} alt="Instagram logo"/>
</a>
<a href={props.contactInfo.contactInstagram}>
<img
className="social-media-icon"
src={props.contactInfo.contactInstagramLogo}
alt="Instagram logo"
/>
</a>

<a href={this.props.contactInfo.contactFlickr}>
<img className={'social-media-icon'} src={this.props.contactInfo.contactFlickrLogo} alt="Flickr logo"/>
</a>
</div>
<a href={props.contactInfo.contactFlickr}>
<img
className="social-media-icon"
src={props.contactInfo.contactFlickrLogo}
alt="Flickr logo"
/>
</a>
</div>

<p><a href={"mailto:" + this.props.contactInfo.contactMail}>{this.props.contactInfo.contactMail}</a>
</p>
<p><a href={"tel:" + this.props.contactInfo.contactPhone}>{this.props.contactInfo.contactPhone}</a>
</p>
<a href="https://backend.peterstenberg.no/wp-admin/">
<img className={'anchor'} src="https://backend.peterstenberg.no/wp-content/uploads/2019/06/anchor_white.png" alt="diver"/>
</a>
</div>
</div>
)
}
}
<p>
<a href={`mailto:${props.contactInfo.contactMail}`}>{props.contactInfo.contactMail}</a>
</p>
<p>
<a href={`tel:${props.contactInfo.contactPhone}`}>{props.contactInfo.contactPhone}</a>
</p>
<a href="https://backend.peterstenberg.no/wp-admin/">
<img
className="anchor"
src="https://backend.peterstenberg.no/wp-content/uploads/2019/06/anchor_white.png"
alt="diver"
/>
</a>
</div>
</div>
);
};

export default About;
84 changes: 43 additions & 41 deletions src/components/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,43 @@
import React from 'react';
import ContactFrom from './ContactForm';
import Fishes from "./Fishes";

window.addEventListener('scroll', function (ev) {

var someDiv = document.getElementById('contact');
var distanceToTop = someDiv.getBoundingClientRect().top;

if (distanceToTop <= 1000) {
window.addEventListener('scroll', () => {
let parent = document.getElementById('parallax-container');
let children = parent.getElementsByTagName('div');
for (let i = 0; i < children.length; i++) {
children[i].style.transform = 'translateY(' + (distanceToTop * i / children.length) + 'px)';
}
}, false);
}
});

export default class Contact extends React.Component {
render() {
return (
<div id={'contact'} className='contact'>

<ContactFrom/>

<Fishes/>

<div id="parallax-container">
<div className={'background1'}></div>
<div className={'background5'}></div>
<div className={'background4'}></div>
<div className={'background3'}></div>
<div className={'background2'}></div>
</div>

</div>
)
}
}
import React, { useEffect } from 'react';
import ContactForm from './ContactForm';
import Fishes from './Fishes';

const Contact = () => {
useEffect(() => {
window.addEventListener('scroll', function(ev) {
var someDiv = document.getElementById('contact');
var distanceToTop = someDiv.getBoundingClientRect().top;

if (distanceToTop <= 1000) {
window.addEventListener(
'scroll',
() => {
let parent = document.getElementById('parallax-container');
let children = parent.getElementsByTagName('div');
for (let i = 0; i < children.length; i++) {
children[i].style.transform =
'translateY(' + (distanceToTop * i) / children.length + 'px)';
}
},
false,
);
}
});
});

return (
<div id="contact" className="contact">
<ContactForm />
<Fishes />
<div id="parallax-container">
<div className="background1"></div>
<div className="background5"></div>
<div className="background4"></div>
<div className="background3"></div>
<div className="background2"></div>
</div>
</div>
);
};

export default Contact;
116 changes: 68 additions & 48 deletions src/components/ContactForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,72 @@
import React from 'react';
import React, { useState } from 'react';

export default class ContactForm extends React.Component {
const ContactForm = () => {
const [info] = useState({
to: 'contact@peterstenberg.no',
subject: 'Mail from peterstenberg.no',
thanks: 'https://www.peterstenberg.no',
});

constructor(props) {
super(props);
this.state = {
to: 'contact@peterstenberg.no',
subject: 'Mail from peterstenberg.no',
email: '',
thanks: 'https://www.peterstenberg.no'
};
}
const handleSubmit = (event) => {
event.target.style.opacity = '1';
event.target.style.transform = 'scale(1)';
};

onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
return (
<div id={'contact-form-container'} className="contact-form-container">
<div className="contact-form">
<form
data-validate
method="POST"
action="https://www.domeneshop.no/cgi-bin/mailto.cgi"
acceptCharset="ISO-8859-1"
onSubmit={(e) => handleSubmit(e)}
>
<div className={'input-container'}>
<input type="hidden" name="_to" value={info.to} />
<input type="hidden" name="_subject" value={info.subject} />
<input type="hidden" name="_resulturl" value={info.thanks} />
<input
type="text"
name="name"
minLength="3"
maxLength="50"
placeholder="FULL NAME*"
required
/>
<input
type="email"
name="_from"
title="Please provide a correct e-mail address. Ex: mail@example.com"
pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$"
placeholder="E-MAIL*"
required
/>
<input type="tel" name="phone" placeholder="PHONENUMBER" />
<label htmlFor="message">MESSAGE*</label>
<textarea
name="message"
minLength="5"
title="Please provide a message so I can prepare before I contact you"
required
/>
</div>
<p className="info-field">FIELDS WITH * ARE MANDATORY</p>
<button id="submit" className="submit" type="submit">
Send
<span className="thanks">
THANK YOU!{' '}
<span aria-labelledby="jsx-a11y/accessible-emoji" role="img">
🙏
</span>
</span>
</button>
<br />
<br />
</form>
</div>
</div>
);
};

handleSubmit = (event) => {
const thanks = document.querySelector('.thanks');
thanks.style.opacity = '1';
thanks.style.transform = 'scale(1)';
};

render() {
return (
<div id={'contact-form-container'} className='contact-form-container'>
<div className={'contact-form'}>
<form data-validate method="POST" action="https://www.domeneshop.no/cgi-bin/mailto.cgi" acceptCharset="ISO-8859-1" onSubmit={this.handleSubmit}>
<div className={'input-container'}>
<input type="hidden" name="_to" value={this.state.to}/>
<input type="hidden" name="_from" value={this.state.email}/>
<input type="hidden" name="_subject" value={this.state.subject}/>
<input type="hidden" name="_resulturl" value={this.state.thanks}/>
<input type='text' name='name' minLength='3' maxLength='50' placeholder='FULL NAME*' required/>
<input value={this.state.email} type='email' name='email' title='Please provide a correct e-mail address. Ex: mail@example.com' pattern='^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$' placeholder='E-MAIL*' required onChange={this.onFieldChange('email').bind(this)}/>
<input type='tel' name='phone' placeholder='PHONENUMBER'/>
<label htmlFor="message">MESSAGE*</label>
<textarea name='message' minLength='5' title='Please provide a message so I can prepare before I contact you' required/>
</div>
<p className={'info-field'}>FIELDS WITH * ARE MANDATORY</p>
<button id={'submit'} className={'submit'} type='submit'>Send<span className={'thanks'}>THANK YOU! <span aria-labelledby="jsx-a11y/accessible-emoji" role="img">🙏</span></span>
</button>
<br/><br/>
</form>
</div>
</div>
)
}
}
export default ContactForm;
72 changes: 37 additions & 35 deletions src/components/Fishes.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
import React from 'react';
const Fishes = () => {
return (
<div id={'fish-container'} className="fish-container">
{/*<div className={'fish right front01 tang tang-01-right'}></div>*/}
{/*<div className={'fish right front02 tang tang-02-right'}></div>*/}
<div className={'fish right front03 tang tang-03-right'}></div>
{/*<div className={'fish right front04 tang tang-04-right'}></div>*/}
{/*<div className={'fish left front01 tang tang-01-left'}></div>*/}
<div className={'fish left front02 tang tang-02-left'}></div>
{/*<div className={'fish left front03 tang tang-03-left'}></div>*/}
<div className={'fish left front04 tang tang-04-left'}></div>
<div className={'fish right front01 shark shark-01-right'}></div>
{/*<div className={'fish right front02 shark shark-02-right'}></div>*/}
<div className={'fish right front03 shark shark-03-right'}></div>
{/*<div className={'fish right front04 shark shark-04-right'}></div>*/}
{/*<div className={'fish left front01 shark shark-01-left'}></div>*/}
<div className={'fish left front02 shark shark-02-left'}></div>
{/*<div className={'fish left front03 shark shark-03-left'}></div>*/}
<div className={'fish left front04 shark shark-04-left'}></div>
{/*<div className={'fish right front01 guppy guppy-01-right'}></div>*/}
{/*<div className={'fish right front02 guppy guppy-02-right'}></div>*/}
<div className={'fish right front03 guppy guppy-03-right'}></div>
{/*<div className={'fish right front04 guppy guppy-04-right'}></div>*/}
{/*<div className={'fish left front01 guppy guppy-01-left'}></div>*/}
<div className={'fish left front02 guppy guppy-02-left'}></div>
{/*<div className={'fish left front03 guppy guppy-03-left'}></div>*/}
<div className={'fish left front04 guppy guppy-04-left'}></div>
<div className={'fish left peter'}>
<img
src="https://backend.peterstenberg.no/wp-content/uploads/2019/06/peter.gif"
alt="diver"
/>
</div>
</div>
);
};

export default class Fishes extends React.Component {
render() {
return (
<div id={'fish-container'} className='fish-container'>
{/*<div className={'fish right front01 tang tang-01-right'}></div>*/}
{/*<div className={'fish right front02 tang tang-02-right'}></div>*/}
<div className={'fish right front03 tang tang-03-right'}></div>
{/*<div className={'fish right front04 tang tang-04-right'}></div>*/}
{/*<div className={'fish left front01 tang tang-01-left'}></div>*/}
<div className={'fish left front02 tang tang-02-left'}></div>
{/*<div className={'fish left front03 tang tang-03-left'}></div>*/}
<div className={'fish left front04 tang tang-04-left'}></div>
<div className={'fish right front01 shark shark-01-right'}></div>
{/*<div className={'fish right front02 shark shark-02-right'}></div>*/}
<div className={'fish right front03 shark shark-03-right'}></div>
{/*<div className={'fish right front04 shark shark-04-right'}></div>*/}
{/*<div className={'fish left front01 shark shark-01-left'}></div>*/}
<div className={'fish left front02 shark shark-02-left'}></div>
{/*<div className={'fish left front03 shark shark-03-left'}></div>*/}
<div className={'fish left front04 shark shark-04-left'}></div>
{/*<div className={'fish right front01 guppy guppy-01-right'}></div>*/}
{/*<div className={'fish right front02 guppy guppy-02-right'}></div>*/}
<div className={'fish right front03 guppy guppy-03-right'}></div>
{/*<div className={'fish right front04 guppy guppy-04-right'}></div>*/}
{/*<div className={'fish left front01 guppy guppy-01-left'}></div>*/}
<div className={'fish left front02 guppy guppy-02-left'}></div>
{/*<div className={'fish left front03 guppy guppy-03-left'}></div>*/}
<div className={'fish left front04 guppy guppy-04-left'}></div>
<div className={'fish left peter'}>
<img src="https://backend.peterstenberg.no/wp-content/uploads/2019/06/peter.gif" alt="diver"/>
</div>
</div>
)
}
}
export default Fishes;
Loading

0 comments on commit fbb0933

Please sign in to comment.