koodiklinikka/koodiklinikka.fi
1
0
Fork 0
mirror of https://github.com/koodiklinikka/koodiklinikka.fi.git synced 2026-03-12 03:03:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prettier legacy JS

Browse Source
This commit is contained in:
Aarni Koskela
2019-09-23 15:54:16 +03:00
parent cb652577b9
commit e3c8a8ab0e
13 changed files with 217 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
legacy-js/components/email.js
View File

@@ -1,7 +1,7 @@
'use strict';
"use strict";
import React from 'react';
import React from "react";
export default function EmailComponent() {
return <a href="mailto:info@koodiklinikka.fi">info@koodiklinikka.fi</a>;
};
}

18
legacy-js/components/fader.js
View File

@@ -1,6 +1,6 @@
'use strict';
"use strict";
import React from 'react';
import React from "react";
function clamp(min, max, value) {
return Math.min(Math.max(value, min), max);
@@ -17,8 +17,8 @@ export default class Fader extends React.Component {
onScroll = () => {
var scrollableDistance = document.body.scrollHeight - window.innerHeight,
scrollTop = window.pageYOffset || document.documentElement.scrollTop,
distanceToBottom = scrollableDistance - scrollTop;
scrollTop = window.pageYOffset || document.documentElement.scrollTop,
distanceToBottom = scrollableDistance - scrollTop;
this.setState({
opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
@@ -26,12 +26,12 @@ export default class Fader extends React.Component {
};
componentDidMount() {
window.addEventListener('scroll', this.onScroll);
window.addEventListener("scroll", this.onScroll);
this.onScroll();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll);
window.removeEventListener("scroll", this.onScroll);
}
render() {
@@ -39,8 +39,6 @@ export default class Fader extends React.Component {
opacity: this.state.opacity
};
return (
<div className="fader" style={style}></div>
)
return <div className="fader" style={style}></div>;
}
};
}

63
legacy-js/components/feed.js
View File

@@ -1,10 +1,10 @@
'use strict';
"use strict";
import React from 'react';
import request from 'axios';
import _ from 'lodash';
import transformers from '../util';
import api from '../api';
import React from "react";
import request from "axios";
import _ from "lodash";
import transformers from "../util";
import api from "../api";
function throwError(err) {
setTimeout(() => {
@@ -19,28 +19,36 @@ export default class Feed extends React.Component {
};
componentDidMount() {
request.get(api('feeds'))
request
.get(api("feeds"))
.then((res) => {
.then(res => {
const messages = _(res.data)
.map((messages, type) => transformers[type](messages))
.flatten()
.value();
const messages = _(res.data)
.map((messages, type) => transformers[type](messages))
.flatten()
.value();
this.setState({
messages: _(messages).sortBy('timestamp').reverse().value().slice(0, 40)
});
}).catch(throwError);
this.setState({
messages: _(messages)
.sortBy("timestamp")
.reverse()
.value()
.slice(0, 40)
});
})
.catch(throwError);
}
render() {
var messages = this.state.messages.map((message, i) => {
var image = <img src={message.image} />;
if(message.imageLink) {
image = <a target="_blank" href={message.imageLink}>{image}</a>;
if (message.imageLink) {
image = (
<a target="_blank" href={message.imageLink}>
{image}
</a>
);
}
return (
@@ -50,23 +58,24 @@ export default class Feed extends React.Component {
<div className="message__user">
<a href={message.userLink}>{message.user}</a>
</div>
<div className="message__body" dangerouslySetInnerHTML={{__html:message.body}}></div>
<div
className="message__body"
dangerouslySetInnerHTML={{ __html: message.body }}
></div>
<div className="message__icon">
<i className={`fa fa-${message.type}`}></i>
</div>
<div className="message__details">
<span className="message__timestamp">
{require('timeago')(message.timestamp)}
{require("timeago")(message.timestamp)}
</span>
<span className="message__meta">{message.meta}</span>
</div>
</div>
</div>
)
);
});
return (
<div className="feed">{messages}</div>
)
return <div className="feed">{messages}</div>;
}
};
}

103
legacy-js/components/inviteForm.js
View File

@@ -1,20 +1,20 @@
'use strict';
"use strict";
import request from 'axios';
import React from 'react';
import classSet from 'classnames';
import api from '../api';
import Loader from './loader';
import request from "axios";
import React from "react";
import classSet from "classnames";
import api from "../api";
import Loader from "./loader";
export default class InviteForm extends React.Component {
state = {
email: '',
email: "",
submitted: false,
sending: false,
error: null
};
onSubmit = (e) => {
onSubmit = e => {
e.preventDefault();
this.setState({
@@ -23,23 +23,24 @@ export default class InviteForm extends React.Component {
error: null
});
request.post(api('invites'), {
email: this.state.email.trim()
})
.then(this.handleSuccess)
.catch(this.handleError);
request
.post(api("invites"), {
email: this.state.email.trim()
})
.then(this.handleSuccess)
.catch(this.handleError);
};
handleSuccess = () => {
this.setState({submitted: true, sending: false});
this.setState({ submitted: true, sending: false });
};
handleError = (err) => {
this.setState({error: err, sending: false});
handleError = err => {
this.setState({ error: err, sending: false });
};
onChange = (e) => {
if(e.target.value === this.state.email) {
onChange = e => {
if (e.target.value === this.state.email) {
return;
}
this.setState({
@@ -51,62 +52,66 @@ export default class InviteForm extends React.Component {
render() {
var formClasses = classSet({
'form': true,
'invite-form': true,
'has-success': this.state.submitted,
'has-error': this.state.error,
'sending': this.state.sending
form: true,
"invite-form": true,
"has-success": this.state.submitted,
"has-error": this.state.error,
sending: this.state.sending
});
var inputClasses = classSet({
'input': true,
'has-success': this.state.submitted,
'has-error': this.state.error
input: true,
"has-success": this.state.submitted,
"has-error": this.state.error
});
var feedbackMessage;
if(this.state.error || this.state.submitted) {
if (this.state.error || this.state.submitted) {
let messageText;
if(this.state.submitted) {
messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.';
} else if(this.state.error.status === 400 && this.state.error.data === 'invalid_email') {
messageText = 'Tarkasta syöttämäsi sähköpostiosoite';
} else if(this.state.error.status === 400 && this.state.error.data === 'already_invited') {
messageText = 'Sähköpostiosoitteeseen on jo lähetetty kutsu';
if (this.state.submitted) {
messageText = "Kutsu lähetetty antamaasi sähköpostiosoitteeseen.";
} else if (
this.state.error.status === 400 &&
this.state.error.data === "invalid_email"
) {
messageText = "Tarkasta syöttämäsi sähköpostiosoite";
} else if (
this.state.error.status === 400 &&
this.state.error.data === "already_invited"
) {
messageText = "Sähköpostiosoitteeseen on jo lähetetty kutsu";
} else {
messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.';
messageText = "Jotain meni pieleen. Yritä hetken päästä uudelleen.";
}
feedbackMessage = (
<div className='form--message'>
{messageText}
</div>
);
feedbackMessage = <div className="form--message">{messageText}</div>;
}
return (
<form className={formClasses} onSubmit={this.onSubmit}>
<input
className={inputClasses}
type='text'
name='email'
placeholder='Email'
type="text"
name="email"
placeholder="Email"
value={this.state.email}
onChange={this.onChange} />
onChange={this.onChange}
/>
<button
className='btn btn__submit'
type='submit'
title='Lähetä'
disabled={this.state.error || this.state.submitted}>
className="btn btn__submit"
type="submit"
title="Lähetä"
disabled={this.state.error || this.state.submitted}
>
Lähetä
</button>
<div className='invite-form__loader'>
<div className="invite-form__loader">
<Loader />
</div>
{feedbackMessage}
</form>
);
}
};
}

14
legacy-js/components/loader.js
View File

@@ -1,12 +1,12 @@
import React from 'react';
import React from "react";
export default function Loader() {
return (
<div className='sk-folding-cube'>
<div className='sk-cube1 sk-cube'/>
<div className='sk-cube2 sk-cube'/>
<div className='sk-cube4 sk-cube'/>
<div className='sk-cube3 sk-cube'/>
<div className="sk-folding-cube">
<div className="sk-cube1 sk-cube" />
<div className="sk-cube2 sk-cube" />
<div className="sk-cube4 sk-cube" />
<div className="sk-cube3 sk-cube" />
</div>
);
};
}

35
legacy-js/components/members.js
View File

@@ -1,9 +1,9 @@
'use strict';
"use strict";
import React from 'react';
import request from 'axios';
import _ from 'lodash';
import api from '../api';
import React from "react";
import request from "axios";
import _ from "lodash";
import api from "../api";
export default class Members extends React.Component {
state = {
@@ -11,28 +11,27 @@ export default class Members extends React.Component {
};
componentDidMount() {
request.get(api('members')).then(function(res) {
this.setState({
members: _.shuffle(res.data)
});
}.bind(this));
request.get(api("members")).then(
function(res) {
this.setState({
members: _.shuffle(res.data)
});
}.bind(this)
);
}
render() {
var members = this.state.members.map(function(member, i) {
var src = `${member.avatar_url}&s=120`;
return (
<img className="member" key={i} src={src} />
);
return <img className="member" key={i} src={src} />;
});
return (
<div className='members'>
<a href='https://github.com/koodiklinikka' target='_blank'>
<div className="members">
<a href="https://github.com/koodiklinikka" target="_blank">
{members}
</a>
</div>
)
);
}
};
}

27
legacy-js/components/membershipForm.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import MembershipInfoForm from './membershipInfoForm';
import React from "react";
import MembershipInfoForm from "./membershipInfoForm";
export default class MembershipForm extends React.Component {
state = {
@@ -12,23 +12,28 @@ export default class MembershipForm extends React.Component {
render() {
if (!this.state.signupSuccess) {
return (
<MembershipInfoForm onSignupSuccess={this.handleSignupSuccess} />
);
return <MembershipInfoForm onSignupSuccess={this.handleSignupSuccess} />;
}
return (
<div>
<svg height='50' width='50' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
<svg
height="50"
width="50"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill='#349c4a'
d='M256 6.998c-137.533 0-249 111.467-249 249 0 137.534 111.467 249 249 249s249-111.467 249-249c0-137.534-111.467-249-249-249zm0 478.08c-126.31 0-229.08-102.77-229.08-229.08 0-126.31 102.77-229.08 229.08-229.08 126.31 0 229.08 102.77 229.08 229.08 0 126.31-102.77 229.08-229.08 229.08z' />
fill="#349c4a"
d="M256 6.998c-137.533 0-249 111.467-249 249 0 137.534 111.467 249 249 249s249-111.467 249-249c0-137.534-111.467-249-249-249zm0 478.08c-126.31 0-229.08-102.77-229.08-229.08 0-126.31 102.77-229.08 229.08-229.08 126.31 0 229.08 102.77 229.08 229.08 0 126.31-102.77 229.08-229.08 229.08z"
/>
<path
fill='#349c4a'
d='M384.235 158.192L216.92 325.518 127.86 236.48l-14.142 14.144 103.2 103.18 181.36-181.47' />
fill="#349c4a"
d="M384.235 158.192L216.92 325.518 127.86 236.48l-14.142 14.144 103.2 103.18 181.36-181.47"
/>
</svg>
<p> Rekisteröityminen onnistui. Tervetuloa jäseneksi!</p>
<p> Tervetuloa Koodiklinikka ry:n jäseneksi!</p>
</div>
);
}
};
}

22
legacy-js/components/membershipInfoForm.js
View File

@@ -1,12 +1,12 @@
"use strict";
import _ from 'lodash';
import request from 'axios';
import React from 'react';
import classSet from 'classnames';
import api from '../api';
import Loader from './loader';
import configFactory from '../../config.js';
import _ from "lodash";
import request from "axios";
import React from "react";
import classSet from "classnames";
import api from "../api";
import Loader from "./loader";
import configFactory from "../../config.js";
const config = configFactory();
var fieldNameTranslations = {
@@ -60,7 +60,7 @@ export default class MembershipInfoForm extends React.Component {
});
};
onChange = (e) => {
onChange = e => {
var name = e.target.name;
if (e.target.value === this.state[name]) {
return;
@@ -107,9 +107,7 @@ export default class MembershipInfoForm extends React.Component {
if (err.type === "missing") {
feedbackText = `${fieldNameTranslations[err.field].fi} on pakollinen.`;
} else if (err.type === "invalid") {
feedbackText = `${
fieldNameTranslations[err.field].fi
} on virheellinen.`;
feedbackText = `${fieldNameTranslations[err.field].fi} on virheellinen.`;
}
return (
@@ -190,4 +188,4 @@ export default class MembershipInfoForm extends React.Component {
</div>
);
}
};
}