GROWIのAPIを使用したアプリケーション

🐧 こんにちは GROWI 開発チームの itizawa です。

Typescript の勉強のために GROWI の api を使用したアプリケーションを作成しました。

主要コード(GitHub に飛びます) external_link

index.tsx
import React from "react";
import urljoin from "url-join";
import axios from "axios";
import { NextPage } from "next";
import PageListItem from "~/components/PageListItem";

interface Props {
  pages: Array<any>;
}

const Page: NextPage<Props> = ({ pages }) => {
  return (
    <React.Fragment>
      <h1>GROWI Page List</h1>
      <ul>
        {pages.map((page: any) => {
          return <PageListItem key={page.id} page={page} />;
        })}
      </ul>
    </React.Fragment>
  );
};

Page.getInitialProps = async (): Promise<Props> => {
  const requestPath = urljoin(
    "https://",
    process.env.SITE_URL,
    "/_api/pages.list?access_token=",
    process.env.API_TOKEN
  );

  const res = await axios.get(requestPath, { params: { path: "/" } });
  const { pages } = res.data;
  return { pages };
};

export default Page;

PageListItem.tsx
import React from "react";
import urljoin from "url-join";

type PageListProps = {
  page: Page;
};

type Page = {
  id: string;
  path: string;
};

const PageListItem: React.FC<PageListProps> = ({ page }) => {
  const pagePath: string = decodeURI(page.path);
  const pageLink: string = urljoin("https://", process.env.SITE_URL, pagePath);

  return (
    <li key={page.id}>
      <a href={pageLink}>{pagePath}</a>
    </li>
  );
};

export default PageListItem;

困ったこと

GROWI の開発では PropTypes external_link を使用していたため、interface と type の使い方は把握できました。
ただその使い分けはまだ分からず、コード内の位置もどこに書いたらいいのか...

そして型チェックが強力でした。型を強く意識することでコードの品質が高まるような気がします。
ただ、慣れないと時間がかかるので、練習が必要だと感じました。 js を書くときにも型を意識しようと思います。

これから実装したいもの

• 階層構造をビジュアルで把握できるようにしたい
• タグ関係の機能
• ゆくゆくは本家GROWIへの逆輸入(?)

デザインに関しては本質的に勉強したいものではないので後回し