Get rid of legacy JS

TODO.md

@@ -0,0 +1,7 @@
+* Google Analytics (ID `UA-58806132-1`)
+* Stripe
+  * Test ID `pk_test_OmNve9H1OuORlmD4rblpjgzh`
+  * Prod ID `pk_live_xrnwdLNXbt20LMxpIDffJnnC`
+* API integration (test backend `https://lit-plateau-4689.herokuapp.com/`)
+* Hero video
+* Twitter icons

components/Feed.jsx

@@ -3,8 +3,8 @@
 import React from "react";
 import request from "axios";
 import _ from "lodash";
-import transformers from "../util";
-import api from "../api";
+import transformers from "./feed-transformers";
+import api from "./api";
 
 function throwError(err) {
   setTimeout(() => {

components/Footer.jsx

@@ -1,22 +1,36 @@
+import EmailComponent from "./EmailComponent";
+
 export function Footer() {
   return (
     <footer>
       <div className="sponsors">
         <div className="sponsors__label">Yhteistyössä</div>
         <a href="http://futurice.com/" target="_blank">
-          <img src="/static/images/futurice.svg" className="sponsor sponsor__futurice" />
+          <img
+            src="/static/images/futurice.svg"
+            className="sponsor sponsor__futurice"
+          />
         </a>
         <a href="http://www.metosin.fi/" target="_blank">
-          <img src="/static/images/metosin.svg" className="sponsor sponsor__metosin" />
+          <img
+            src="/static/images/metosin.svg"
+            className="sponsor sponsor__metosin"
+          />
         </a>
         <a href="https://www.solita.fi/" target="_blank">
           <img src="/static/images/solita.svg" className="sponsor" />
         </a>
         <a href="http://wakeone.co/" target="_blank">
-          <img src="/static/images/wakeone.svg" className="sponsor sponsor__wakeone" />
+          <img
+            src="/static/images/wakeone.svg"
+            className="sponsor sponsor__wakeone"
+          />
         </a>
         <a href="https://www.nordea.com/" target="_blank">
-          <img src="/static/images/nordea.png" className="sponsor sponsor__nordea" />
+          <img
+            src="/static/images/nordea.png"
+            className="sponsor sponsor__nordea"
+          />
         </a>
       </div>
       <div className="contacts">
@@ -36,7 +50,9 @@ export function Footer() {
           <a href="https://www.facebook.com/koodiklinikka">
             <i className="fa fa-facebook" />
           </a>
-          <div id="email" className="email" />
+          <div id="email">
+            <EmailComponent />
+          </div>
         </div>
       </div>
     </footer>

components/InviteForm.jsx

@@ -3,8 +3,8 @@
 import request from "axios";
 import React from "react";
 import classSet from "classnames";
-import api from "../api";
-import Loader from "./loader";
+import api from "./api";
+import Loader from "./Loader";
 
 export default class InviteForm extends React.Component {
   state = {

components/Members.jsx

@@ -3,7 +3,7 @@
 import React from "react";
 import request from "axios";
 import _ from "lodash";
-import api from "../api";
+import api from "./api";
 
 export default class Members extends React.Component {
   state = {

components/membership/MembershipForm.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import MembershipInfoForm from "./membershipInfoForm";
+import MembershipInfoForm from "./MembershipInfoForm";
 
 export default class MembershipForm extends React.Component {
   state = {

components/membership/MembershipInfoForm.jsx

@@ -5,9 +5,9 @@ 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();
+import Loader from "../Loader";
+//import configFactory from "../../config.js";
+//const config = configFactory();
 
 var fieldNameTranslations = {
   address: { fi: "Osoite" },

legacy-js/config.js

@@ -1,15 +0,0 @@
-var development = {
-  stripe: {
-    publicKey: "pk_test_OmNve9H1OuORlmD4rblpjgzh"
-  }
-};
-
-var production = {
-  stripe: {
-    publicKey: "pk_live_xrnwdLNXbt20LMxpIDffJnnC"
-  }
-};
-
-export default function() {
-  return process.env.ENV == "development" ? development : production;
-}

legacy-js/ga.js

@@ -1,16 +0,0 @@
-(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");

legacy-js/main.js

@@ -1,38 +0,0 @@
-"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")
-);
-
-const pathName = window.location.pathname;
-
-document
-  .querySelectorAll(".email")
-  .forEach(element => ReactDOM.render(email(), element));
-
-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(
-    React.createElement("div", {}, [members({ key: 0 }), members({ key: 1 })]),
-    document.getElementById("members")
-  );
-}

pages/_document.jsx

@@ -1,5 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { Footer } from "../components/Footer";
+import Fader from '../components/Fader';
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -53,7 +54,7 @@ class MyDocument extends Document {
             </div>
             <Footer />
           </div>
-          <div id="fader" />
+          <Fader />
         </body>
       </Html>
     );

pages/index.jsx

@@ -1,5 +1,8 @@
 import "../styles/style.styl";
 import Head from "next/head";
+import InviteForm from '../components/InviteForm';
+import Members from '../components/Members';
+import Feed from '../components/Feed';
 
 const Hero = () => (
   <div className="header">
@@ -39,7 +42,7 @@ const IndexContent = () => (
             </a>
             -yhteisöömme
           </h3>
-          <div id="invite-form" className="form" />
+          <div className="form"><InviteForm /></div>
           <p className="code-of-conduct">
             Ennen liittymistä yhteisöömme varmista, että olet lukenut yhteisön{" "}
             <a
@@ -94,7 +97,9 @@ const IndexContent = () => (
                 jäsenet. Koodiklinikan projekteihin voi osallistua kuka tahansa
                 ja muutosideat ovat aina lämpimästi tervetulleita.
               </p>
-              <div id="members" />
+              <div id="members">
+                <Members />
+              </div>
             </div>
           </div>
         </div>
@@ -158,7 +163,9 @@ const IndexContent = () => (
           </div>
         </div>
       </section>
-      <div id="feed" />
+      <div id="feed">
+        <Feed />
+      </div>
     </div>
   </>
 );