Prettier legacy JS

2026-02-08 18:50:30 +00:00 · 2019-09-23 15:54:16 +03:00
parent cb652577b9
commit e3c8a8ab0e
13 changed files with 217 additions and 208 deletions
--- a/legacy-js/api.js
+++ b/legacy-js/api.js
@@ -1,5 +1,5 @@
-var host = process.env.SERVER || 'https://lit-plateau-4689.herokuapp.com/';
+var host = process.env.SERVER || "https://lit-plateau-4689.herokuapp.com/";

-export default function(path) {
+export default function(path) {
  return host + path;
-};
+}
--- a/legacy-js/components/email.js
+++ b/legacy-js/components/email.js
@@ -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>;
-};
+}
--- a/legacy-js/components/fader.js
+++ b/legacy-js/components/fader.js
@@ -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>;
  }
-};
+}
--- a/legacy-js/components/feed.js
+++ b/legacy-js/components/feed.js
@@ -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>;
  }
-};
+}
--- a/legacy-js/components/inviteForm.js
+++ b/legacy-js/components/inviteForm.js
@@ -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>
    );
  }
-};
+}
--- a/legacy-js/components/loader.js
+++ b/legacy-js/components/loader.js
@@ -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>
  );
-};
+}
--- a/legacy-js/components/members.js
+++ b/legacy-js/components/members.js
@@ -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>
-    )
+    );
  }
-};
+}
--- a/legacy-js/components/membershipForm.js
+++ b/legacy-js/components/membershipForm.js
@@ -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>
    );
  }
-};
+}
--- a/legacy-js/components/membershipInfoForm.js
+++ b/legacy-js/components/membershipInfoForm.js
@@ -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>
    );
  }
-};
+}
--- a/legacy-js/config.js
+++ b/legacy-js/config.js
@@ -1,16 +1,15 @@
-
 var development = {
  stripe: {
    publicKey: "pk_test_OmNve9H1OuORlmD4rblpjgzh"
  }
-}
+};

 var production = {
  stripe: {
    publicKey: "pk_live_xrnwdLNXbt20LMxpIDffJnnC"
  }
-}
-
-export default function () {
-  return process.env.ENV == 'development' ? development : production;
 };
+
+export default function() {
+  return process.env.ENV == "development" ? development : production;
+}
--- a/legacy-js/ga.js
+++ b/legacy-js/ga.js
@@ -1,7 +1,16 @@
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+(function(i, s, o, g, r, a, m) {
+  i["GoogleAnalyticsObject"] = r;
+  (i[r] =
+    i[r] ||
+    function() {
+      (i[r].q = i[r].q || []).push(arguments);
+    }),
+    (i[r].l = 1 * new Date());
+  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+  a.async = 1;
+  a.src = g;
+  m.parentNode.insertBefore(a, m);
+})(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");

-  ga('create', 'UA-58806132-1', 'auto');
-  ga('send', 'pageview');
+ga("create", "UA-58806132-1", "auto");
+ga("send", "pageview");
--- a/legacy-js/main.js
+++ b/legacy-js/main.js
@@ -1,51 +1,38 @@
-'use strict';
-import './ga';
-import ReactDOM from 'react-dom';
-import React from 'react';
+"use strict";
+import "./ga";
+import ReactDOM from "react-dom";
+import React from "react";

-var inviteForm = React.createFactory(require('./components/inviteForm'));
-var fader = React.createFactory(require('./components/fader'));
-var members = React.createFactory(require('./components/members'));
-var feed = React.createFactory(require('./components/feed'));
-var email = React.createFactory(require('./components/email'));
-var membershipForm = React.createFactory(require('./components/membershipForm'));
+var inviteForm = React.createFactory(require("./components/inviteForm"));
+var fader = React.createFactory(require("./components/fader"));
+var members = React.createFactory(require("./components/members"));
+var feed = React.createFactory(require("./components/feed"));
+var email = React.createFactory(require("./components/email"));
+var membershipForm = React.createFactory(
+  require("./components/membershipForm")
+);

 const pathName = window.location.pathname;

-document.querySelectorAll('.email').forEach((element) =>
-  ReactDOM.render(email(), element)
-);
+document
+  .querySelectorAll(".email")
+  .forEach(element => ReactDOM.render(email(), element));

-if (pathName == '/') {
-  ReactDOM.render(
-    inviteForm(),
-    document.getElementById('invite-form'));
+if (pathName == "/") {
+  ReactDOM.render(inviteForm(), document.getElementById("invite-form"));
+
+  ReactDOM.render(fader(), document.getElementById("fader"));
+
+  ReactDOM.render(members(), document.getElementById("members"));
+
+  ReactDOM.render(feed(), document.getElementById("feed"));
+} else if (pathName == "/yhdistys.html") {
+  ReactDOM.render(membershipForm(), document.getElementById("membership-form"));
+
+  ReactDOM.render(fader(), document.getElementById("fader"));

  ReactDOM.render(
-    fader(),
-    document.getElementById('fader'));
-
-  ReactDOM.render(
-    members(),
-    document.getElementById('members'));
-
-  ReactDOM.render(
-    feed(),
-    document.getElementById('feed'));
-
-} else if (pathName == '/yhdistys.html') {
-  ReactDOM.render(
-    membershipForm(),
-    document.getElementById('membership-form'));
-
-  ReactDOM.render(
-    fader(),
-    document.getElementById('fader'));
-
-  ReactDOM.render(
-    React.createElement('div', {}, [
-      members({ key: 0 }),
-      members({ key: 1 })
-    ]),
-    document.getElementById('members'));
+    React.createElement("div", {}, [members({ key: 0 }), members({ key: 1 })]),
+    document.getElementById("members")
+  );
 }
--- a/legacy-js/util.js
+++ b/legacy-js/util.js
@@ -1,23 +1,23 @@
-'use strict';
+"use strict";

-import _ from 'lodash';
-import githubEvent from 'parse-github-event';
-import twitterText from 'twitter-text';
+import _ from "lodash";
+import githubEvent from "parse-github-event";
+import twitterText from "twitter-text";

-const isVisibleGithubEvent = ({type}) => type !== 'PushEvent' && type !== 'DeleteEvent';
+const isVisibleGithubEvent = ({ type }) =>
+  type !== "PushEvent" && type !== "DeleteEvent";

 export default {
  github(items) {
-    return items.filter(isVisibleGithubEvent).map((item) => {
-
+    return items.filter(isVisibleGithubEvent).map(item => {
      _.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

      var template = _.template(githubEvent.parse(item).text);

      var repository = `https://github.com/${item.repo.name}`;
      var branch;
-      if(item.payload.ref) {
-        branch = item.payload.ref.replace('refs/heads/', '');
+      if (item.payload.ref) {
+        branch = item.payload.ref.replace("refs/heads/", "");
      }

      var message = template({
@@ -38,13 +38,13 @@ export default {
        body: message,
        timestamp: new Date(item.created_at),
        url: message.url,
-        type: 'github'
+        type: "github"
      };
    });
  },
  twitter(items) {
-    return items.map((item) => {
-      if(item.retweeted) {
+    return items.map(item => {
+      if (item.retweeted) {
        item = item.retweeted_status;
      }

@@ -57,7 +57,7 @@ export default {
        imageLink: url,
        body: twitterText.autoLink(item.text),
        timestamp: new Date(item.created_at),
-        type: 'twitter'
+        type: "twitter"
      };
    });
  }