ルーム内でのカード操作，テストの実装とデプロイ用の設定(v0.0.3)

.devcontainer/Dockerfile

@@ -1,12 +1,12 @@
-FROM node:12.18.4-slim
+FROM node:14.17.0-buster-slim
 
 RUN apt update \
     && apt install -y --no-install-recommends \
     apt-utils \
     git \
     ca-certificates \
     procps \
-    && npm install expo-cli --global \
+    && npm install --global expo-cli \
     && apt autoremove -y \
     && apt clean -y \
     && rm -rf /var/lib/apt/lists/* \

.devcontainer/devcontainer.json

@@ -1,16 +1,16 @@
 {
-  "name": "card-game-simulator",
+  "name": "card-playroom-client",
   "dockerFile": "Dockerfile",
   "forwardPorts": [19000, 19001, 19002, 19006],
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/bash"
+    "#terminal.integrated.defaultProfile.linux#": "/bin/bash"
   },
   "extensions": [
     "dbaeumer.vscode-eslint",
     "rvest.vs-code-prettier-eslint",
     "esbenp.prettier-vscode",
     "hookyqr.beautify",
     "msjsdiag.vscode-react-native",
-    "dsznajder.es7-react-js-snippets",
+    "dsznajder.es7-react-js-snippets"
   ]
-}
+}

.eslintrc.json

@@ -1,21 +1,26 @@
 {
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:prettier/recommended",
-        "plugin:react/recommended",
-        "prettier/@typescript-eslint"
-    ],
-    "plugins": ["@typescript-eslint"],
-    "env": {
-        "node": true,
-        "es6": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "sourceType": "module",
-        "project": "./tsconfig.json"
-    },
-    "rules": {}
-}
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "rules": {},
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/codeql-analysis.yml

@@ -5,14 +5,10 @@
 name: "CodeQL"
 
 on:
-  # push:
-  #   branches: [main, develop]
+  push:
   pull_request:
-    # The branches below must be a subset of the branches above
-    # branches: [main, develop]
-    types: [opened, synchronize]
-  # schedule:
-  # - cron: "0 4 * * 4" # every Thursday 4am
+  schedule:
+    - cron: "30 1 * * 0"
 
 jobs:
   analyze:
@@ -36,11 +32,6 @@ jobs:
           # a pull request then we can checkout the head.
           fetch-depth: 2
 
-      # If this run was triggered by a pull request event, then checkout
-      # the head of the pull request instead of the merge commit.
-      - run: git checkout HEAD^2
-        if: ${{ github.event_name == 'pull_request' }}
-
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v1

.github/workflows/expo.yml

@@ -3,14 +3,14 @@ name: NodeJS
 on: pull_request
 
 jobs:
-  build:
+  check:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "14.x"
       - name: Cache node modules
         uses: actions/cache@v2
         env:
@@ -26,3 +26,5 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Lint
         run: npm run lint
+      - name: Test
+        run: yarn test

App.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import App from "./App";
+
+jest.useFakeTimers();
+
+describe("<App />", () => {
+  it("has 1 child", () => {
+    const tree = render(<App />).toJSON();
+    expect(tree?.children.length).toBe(1);
+  });
+});

App.tsx

@@ -1,22 +1,63 @@
 import React, { ReactElement } from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import {
+  getFocusedRouteNameFromRoute,
+  NavigationContainer,
+  ParamListBase,
+  RouteProp,
+} from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import HomeScreen from "./src/screens/home/index";
 import RoomScreen from "./src/screens/room/index";
+import CreateRoomScreen from "./src/screens/create-room/index";
 import RoomListScreen from "./src/screens/room-list/index";
 import EditDeckScreen from "./src/screens/edit-deck/index";
-import PreferencesScreen from "./src/screens/preferences/index";
-import { ENDPOINT } from "@env";
-import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  HttpLink,
+} from "@apollo/client";
 import "reflect-metadata";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Icon } from "react-native-elements";
 
-const cache = new InMemoryCache();
-
-// TODO uriを設定画面から変更できるようにする
+const customFetch = async (uri: string, options: RequestInit) => {
+  try {
+    const endpoint = await AsyncStorage.getItem("@endpoint");
+    if (endpoint == null) {
+      return fetch(`http://127.0.0.1${uri}`, options);
+    } else {
+      return fetch(`http://${endpoint}${uri}`, options);
+    }
+  } catch (error) {
+    // 設定読み込みエラー
+    console.log(error);
+    return fetch(`http://127.0.0.1${uri}`, options);
+  }
+};
 const client = new ApolloClient({
-  cache: cache,
-  uri: `http://${ENDPOINT}/graphql`,
-  // defaultOptions: { watchQuery: { fetchPolicy: "cache-and-network" } },
+  cache: new InMemoryCache({
+    // サーバー側のデータが消去されていてキャッシュとコンフリクトした時の警告を表示しない
+    typePolicies: {
+      Query: {
+        fields: {
+          cards: {
+            merge(_existing, incoming) {
+              return incoming;
+            },
+          },
+          decksWithCards: {
+            merge(_existing, incoming) {
+              return incoming;
+            },
+          },
+        },
+      },
+    },
+  }),
+  link: new HttpLink({ fetch: customFetch }),
+  uri: "/graphql",
 });
 
 export default function App(): ReactElement {
@@ -28,13 +69,45 @@ export default function App(): ReactElement {
           screenOptions={{
             headerStyle: { backgroundColor: "#706fd3" },
             headerTintColor: "white",
+            headerLeft: () => null,
           }}
         >
-          <Stack.Screen name="Home" component={HomeScreen} />
+          <Stack.Screen
+            // TODO 名前変更
+            name="Home"
+            options={({ route }) => ({
+              headerTitle: getHeaderTitle(route),
+            })}
+          >
+            {() => (
+              <Tab.Navigator initialRouteName="Home">
+                <Tab.Screen
+                  name="Home"
+                  component={HomeScreen}
+                  options={{
+                    tabBarIcon: homeIcon,
+                  }}
+                />
+                <Tab.Screen
+                  name="RoomList"
+                  component={RoomListScreen}
+                  options={{
+                    tabBarIcon: roomListIcon,
+                  }}
+                />
+                <Tab.Screen
+                  name="EditDeck"
+                  component={EditDeckScreen}
+                  options={{
+                    tabBarIcon: editDeckIcon,
+                  }}
+                />
+              </Tab.Navigator>
+            )}
+          </Stack.Screen>
+
           <Stack.Screen name="Room" component={RoomScreen} />
-          <Stack.Screen name="RoomList" component={RoomListScreen} />
-          <Stack.Screen name="EditDeck" component={EditDeckScreen} />
-          <Stack.Screen name="Preferences" component={PreferencesScreen} />
+          <Stack.Screen name="CreateRoom" component={CreateRoomScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     </ApolloProvider>
@@ -43,10 +116,37 @@ export default function App(): ReactElement {
 
 export type RootStackParamList = {
   Home: undefined;
-  Room: undefined;
+  Room: { roomid: string; endpoint: string; cardIds: number[] };
+  CreateRoom: { endpoint: string };
   RoomList: undefined;
   EditDeck: undefined;
   Preferences: undefined;
 };
 
 const Stack = createStackNavigator();
+const Tab = createBottomTabNavigator();
+const getHeaderTitle = (route: RouteProp<ParamListBase, "Home">) => {
+  const routeName = getFocusedRouteNameFromRoute(route);
+  switch (routeName) {
+    case "RoomList":
+      return "RoomList";
+    case "EditDeck":
+      return "EditDeck";
+    default:
+      return routeName;
+  }
+};
+
+const homeIcon = ({ color, size }: { color: string; size: number }) => {
+  return <Icon name="home" color={color} size={size} />;
+};
+
+const roomListIcon = ({ color, size }: { color: string; size: number }) => {
+  return <Icon name="meeting-room" color={color} size={size} />;
+};
+
+const editDeckIcon = ({ color, size }: { color: string; size: number }) => {
+  return (
+    <Icon type="material-community" name="cards" color={color} size={size} />
+  );
+};

README.md

@@ -1,22 +1,22 @@
-# Card Game Simulator
+# Card Playroom Client
 
 ![ReactNative](https://img.shields.io/static/v1?label=React%20Native&message=v0.63.2&color=61DAFB&logo=react)
 ![TypeScript](https://img.shields.io/static/v1?label=TypeScript&message=v3.9.5&color=007ACC&logo=typeScript)
 ![Docker](https://img.shields.io/static/v1?label=Docker&message=v19.3.13&color=2496ED&logo=docker)
 ![Node.js](https://img.shields.io/static/v1?label=Node.js&message=v12.18.4&color=339933&logo=node.js)
 
-[![Release](https://img.shields.io/github/v/release/2d-rpg/card-game-simulator?include_prereleases)](https://github.com/2d-rpg/card-game-simulator/releases)
-[![NodeJS](https://github.com/2d-rpg/card-game-simulator/workflows/NodeJS/badge.svg)](https://github.com/2d-rpg/card-game-simulator/actions?query=workflow%3ANodeJS)
-[![CodeQL](https://github.com/2d-rpg/card-game-simulator/workflows/CodeQL/badge.svg)](https://github.com/2d-rpg/card-game-simulator/actions?query=workflow%3ACodeQL)
+[![Release](https://img.shields.io/github/v/release/2d-rpg/card-playroom-client?include_prereleases)](https://github.com/2d-rpg/card-playroom-client/releases)
+[![NodeJS](https://github.com/2d-rpg/card-playroom-client/workflows/NodeJS/badge.svg)](https://github.com/2d-rpg/card-playroom-client/actions?query=workflow%3ANodeJS)
+[![CodeQL](https://github.com/2d-rpg/card-playroom-client/workflows/CodeQL/badge.svg)](https://github.com/2d-rpg/card-playroom-client/actions?query=workflow%3ACodeQL)
 
 ## <img src="https://user-images.githubusercontent.com/42469701/95276781-1b815500-0887-11eb-84e5-f1dc89df3efb.png" width="20px"> How to get started
 
 VSCode の[Remote Container 拡張](https://code.visualstudio.com/docs/remote/containers)の使用を推奨します．  
 このプロジェクトをクローンし，VSCode の[Remote Container 拡張](https://code.visualstudio.com/docs/remote/containers)を使用して開く．
 
 ```
-git clone https://github.com/2d-rpg/card-game-simulator.git
-code card-game-simulator
+git clone https://github.com/2d-rpg/card-playroom-client.git
+code card-playroom-client
 ```
 
 以下 Docker コンテナ上で実行

__mocks__/@react-native-async-storage/async-storage..js

@@ -0,0 +1 @@
+export { default } from "@react-native-async-storage/async-storage/jest/async-storage-mock";

__mocks__/README.md

@@ -0,0 +1 @@
+According to (this link)[https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/], this directory was creatred.

__tests__/__snapshots__/components/Card.test.tsx.snap.android

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> should match snapshot 1`] = `
+<Image
+  resizeMode="contain"
+  source={1}
+  style={
+    Object {
+      "height": 36,
+      "width": 12,
+    }
+  }
+/>
+`;

__tests__/__snapshots__/components/Card.test.tsx.snap.ios

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> should match snapshot 1`] = `
+<Image
+  resizeMode="contain"
+  source={1}
+  style={
+    Object {
+      "height": 36,
+      "width": 12,
+    }
+  }
+/>
+`;