app.geolonia.com

development

$ git clone git@github.com:geolonia/app.geolonia.com.git
$ cd app.geolonia.com
$ yarn
$ cp .env.development.example .env.development
$ vi .env.development
$ yarn start

.env.development には、app.geolonia.com が利用している外部サービスのトークン等を入れる必要があります。 Geolonia 社員はこちらを参考に環境変数の値を定義して下さい。

yarn start を実行すると http://localhost:3000/ で開発用環境が立ち上がります。

開発環境では本番と別のデータベースを使用しています。ダッシュボードにログインするためには http://localhost:3000/?lang=ja#/signup から新しくユーザーを作成して下さい。

Component Template

Simple

// hello.tsx
import React from "react";
import "./hello.scss";

type Props = {
  name: string;
};

export class HelloComponent extends React.Component<Props> {
  render() {
    const name = this.props.name;
    const text = "Hello, " + name + "!";
    return <h1 className="hello">{text}</h1>;
  }
}

export default HelloComponent;

// hello.test.tsx
import React from "react";
import ReactDOM from "react-dom";
import MySample from "./my-sample";

it("renders text", () => {
  const div = document.createElement("div");
  // @ts-ignore
  ReactDOM.render(<MySample name="Geolonia" />, div);
  expect(div.innerHTML).toEqual('<h1 class="hello">Hello, Geolonia!</h1>');

  ReactDOM.unmountComponentAtNode(div);
});

// hello.scss

.hello {
  font-weight: bold;
}

With Redux

import React from "react";

type Props = {
  // ownProps
  ownValue: string;
  // stateProps
  appValue: string;
  // dispatchProps
  handler: () => void;
};

export class MyComponent extends React.Component<Props> {
  render() {
    const { ownValue, appValue, handler } = this.props;
    ...
    return ...
  }
}

const mapStateToProps = (state: Geolonia.Redux.AppState) => {
  return {
    appValue: state.app.value,
  }
}

const mapDispatchToProps = (Dispatch: Redux.dispatch) => {
  return {
    handler: () => {
      const action: { type: string, payload: any } = {
        type: 'src/redux/actions で定義する state 更新のタイプ',
        payload: { /* 更新パラメータ */ }
      }
      dispatch(action)
    }
  }
}

// DI
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

import ReactDOM from "react-dom";
import MyComponent from "path/to/my-component";
ReactDOM.render(<MyComponent ownValue={"hello"} />);

i18n

Make pot and merge existing po file(s):

$ yarn i18n

Translate ja.po and run following.

$ yarn po2json

Perform a simple check to make sure that all text has been translated.

$ yarn validate:jed