wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

ペペロミア v3.0.0 リリースノート

リリースノート

GitHub

Peperomia

マイルストーン

Peperomia v3.0.0 PeperomiaBackend v3.0.0 PeperomiaWeb v3.0.0 PeperomiaTool v3.0.0

対応内容

リリース詳細

[Peperomia]APIの新設計と新デザインに合わせて修正する

  • 新設計に合わせてアプリ開発
  • GraphQL実装に、諸々置き換え

[Peperomia]新設計に合わせてログイン前をSQLite、ログイン後をGraphQLで取得するcustom hooksを作成

  • ログイン前はSQLiteを使用するように修正
  • 以下みたいな感じでログイン前とログイン後でReact Hooksを切り替え
import { useAuth } from 'containers/Auth';
import {
  CalendarQueryHookResult,
  useCalendarQuery,
  CalendarQueryVariables,
} from 'queries/api/index';
import { WatchQueryFetchPolicy } from '@apollo/client';
import useCalendarDB from 'hooks/db/useCalendarDB';
import { isLogin } from 'lib/auth';

type UseCalendar = Pick<
  CalendarQueryHookResult,
  'data' | 'loading' | 'error' | 'refetch'
>;

type Props = {
  variables: CalendarQueryVariables;
  fetchPolicy?: WatchQueryFetchPolicy;
};

type UseHooks = (props: Props) => UseCalendar;

const useCalendar = (props: Props): UseCalendar => {
  const { uid } = useAuth();
  let useHooks: UseHooks;

  if (uid && isLogin(uid)) {
    useHooks = useCalendarQuery;
  } else {
    useHooks = useCalendarDB as any;
  }

  const { data, loading, error, refetch } = useHooks(props);

  return { data, loading, error, refetch };
};

export default useCalendar;

[Peperomia]バックアップのAPI対応

  • バックアップAPIとつなぎ込み
  • 新規にユーザー作成した時にSQLiteのデータをFirestoreに挿入する

[Peperomia]Expo SDK 40にバージョンアップ

[Peperomia]カラーコードを整理する

配色ガイドライン

  • 配色ガイドラインに合わせてアプリのカラーを再設定
  • react-native/no-color-literalsをONにしてカラーの直書きをerrorに設定

[Peperomia]padding、marginをthemeに書き換える

  • padding、marginを直書きから設定値に変更

[Peperomia]カラーコードを整理する②

[Peperomia]Storybookのファイルをtsxに変更する

  • storybookが気づかずメンテナンスされなくなることがあるのでtsxに変換して、propsが間違っている場合はエラーになるように修正

[Peperomia]新設計でPushのユニバーサルリンク周りを修正する

  • Pushのユニバーサルリンク周りが新設計でも動作するように修正

[Peperomia]アプリv3にアップデート

  • v3.0の残作業に対応

[Peperomia]テストコード追加

  • カバレッジを12.65% → 21.56%まで追加
  • 以下のコマンドでテストのテンプレートから自動生成できるように修正
$ yarn hygen testCode new
✔ テストを作成する「ディレクトリ名」を指定してください。 · ItemDetail

Loaded templates: _templates
       added: src/components/pages/ItemDetail/__tests__/Connected.test.tsx
       added: src/components/pages/ItemDetail/__tests__/index.test.tsx
       added: src/components/pages/ItemDetail/__tests__/Page.test.tsx

[PeperomiaBackend]Firestoreを新設計で書き直す①

スクリーンショット 2020-10-17 12 06 34

  • 以下のGraphQL追加
    • 公開アイテムを取得する
    • ユーザーを取得する
    • カレンダーを期間で取得する
    • カレンダーを取得する
    • スケジュール詳細を取得する
    • カレンダーを作成する
    • スケジュール詳細を作成する
  • graphql-markdownでのドキュメント生成を追加

[PeperomiaBackend]calendarの更新/ itemDetial削除のgraphqlを作成

スクリーンショット 2020-11-03 21 56 18

  • calendarの更新/ itemDetial削除のgraphqlを作成

[PeperomiaBackend]タイトルのサジェストの取得のGraphQL作成

https://github.com/wheatandcat/PeperomiaTool/issues/12

上記で作成したdictionaryを元にサジェストのテキストを取得するGraphQLを作成

スクリーンショット 2020-11-29 0 34 01

[PeperomiaBackend]UpdateCalendarPublicのGraphQLを作成

  • カレンダー公開ON/OFFのGraphQLを作成

[PeperomiaBackend]バックアップのAPI対応

mutation SyncCalendars($calendars: SyncCalendars!) {
  syncCalendars(calendars: $calendars)
}
  • バックアップ用のAPIを作成

[PeperomiaWeb]新設計に合わせて表示できるように修正

スクリーンショット 2020-12-30 17 51 47 スクリーンショット 2020-12-30 17 51 37
  • 新設計に合わせてweb版もGraphQLでアクセスするように修正

[PeperomiaWeb]vue/component-tags-orderを設定

  • vue/component-tags-orderを設定
  • script → template → styleの順に固定

[PeperomiaWeb]カラーコードを整理する

  • 配色ガイドラインに合わせてカラーコード修正

[PeperomiaWeb]nuxt-community/storybookの置き換える

スクリーンショット 2021-01-04 22 06 38