feat: implement container (#705)

Author: shoota

.eslintignore

@@ -0,0 +1,2 @@
+src/graphql/api.ts
+src/graphql/introspection-result.ts

.github/workflows/ts.yml

@@ -2,32 +2,31 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-    - name: Install dependencies
-      run: yarn
-    - name: Lint
-      run: yarn lint
-    - name: Typing
-      run: yarn tsc
-      env:
-        CI: true
-    - name: bundle
-      run: yarn build
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./public
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Lint
+        run: yarn lint
+      - name: Typing
+        run: yarn tsc
+        env:
+          CI: true
+      - name: bundle
+        run: yarn build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public

.gitignore

@@ -93,7 +93,3 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
-
-
-src/graphql/api.ts
-src/graphql/introspection-result.ts

docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3.6"
+version: '3.6'
 services:
   postgres:
     image: postgres:12
@@ -10,9 +10,9 @@ services:
   graphql-engine:
     image: hasura/graphql-engine:v2.0.10
     ports:
-      - "8080:8080"
+      - '8080:8080'
     depends_on:
-      - "postgres"
+      - 'postgres'
     restart: always
     environment:
       ## postgres database to store Hasura metadata
@@ -22,10 +22,11 @@ services:
       ## link heroku environment
       DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
       ## enable the console served by server
-      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
+      HASURA_GRAPHQL_ENABLE_CONSOLE: 'true' # set to "false" to disable console
       ## enable debugging mode. It is recommended to disable this in production
-      HASURA_GRAPHQL_DEV_MODE: "true"
+      HASURA_GRAPHQL_DEV_MODE: 'true'
       HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
+      HASURA_GRAPHQL_CORS_DOMAIN: 'http://localhost:3035'
       ## uncomment next line to set an admin secret
       # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
 volumes:

src/App.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
+import { ApolloProvider } from '@apollo/client'
 
 import { Routes } from './routes'
 
-export const App = () => <Routes />
+import { client } from 'apolloClient'
+
+export const App = () => (
+  <ApolloProvider client={client}>
+    <Routes />
+  </ApolloProvider>
+)

src/apolloClient.ts

@@ -0,0 +1,12 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+
+import result from './graphql/introspection-result'
+
+// Hasura Graphql endpoint
+const uri = 'http://localhost:8080/v1/graphql'
+const cache = new InMemoryCache(result)
+
+export const client = new ApolloClient({
+  uri,
+  cache,
+})

src/components/Todos/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { List, Typography, Space } from 'antd'
+import { List, Typography, Space, Card, Button, Divider } from 'antd'
 import { CheckCircleTwoTone } from '@ant-design/icons'
 
 type Todo = {
@@ -10,28 +10,32 @@ type Todo = {
 
 type Props = {
   isLoading?: boolean
-  todos: Todo[]
+  todos?: Todo[]
+  getContent?: () => void
 }
 
-export const Todos: React.VFC<Props> = ({ todos, isLoading }) => {
+export const Todos: React.VFC<Props> = ({ todos, isLoading, getContent }) => {
+  console.log(isLoading, new Date())
   return (
-    <List
-      size="large"
-      loading={isLoading}
-      dataSource={todos}
-      renderItem={({ id, contents, finished }) => (
-        <List.Item key={id}>
-          <Typography.Title>
-            <Space>
-              <CheckCircleTwoTone
-                twoToneColor={finished ? '#52c41a' : '#e3e3e3'}
-              />
-              {contents}
-            </Space>
-          </Typography.Title>
-          {/* <Typography.Title level={5}>{contents}</Typography.Title> */}
-        </List.Item>
-      )}
-    />
+    <Card title="TODO List" style={{ margin: '5%' }}>
+      <Button onClick={getContent}>データを取る</Button>
+      <Divider />
+      <List
+        loading={isLoading}
+        dataSource={todos}
+        renderItem={({ id, contents, finished }) => (
+          <List.Item key={id}>
+            <Typography.Title level={3}>
+              <Space>
+                <CheckCircleTwoTone
+                  twoToneColor={finished ? '#52c41a' : '#e3e3e3'}
+                />
+                {contents}
+              </Space>
+            </Typography.Title>
+          </List.Item>
+        )}
+      />
+    </Card>
   )
 }

src/components/story/index.stories.tsx

@@ -6,13 +6,18 @@ import { Todos } from '../Todos'
 const todos = [
   {
     id: 1,
-    contents: 'should do',
-    finished: false,
+    contents: '宇宙空間に行く',
+    finished: true,
   },
   {
     id: 2,
-    contents: 'done is better',
-    finished: true,
+    contents: '月旅行に行く',
+    finished: false,
+  },
+  {
+    id: 3,
+    contents: '本を書く',
+    finished: false,
   },
 ]
 

src/container/Home/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Card, Typography } from 'antd'
+import styled from 'styled-components'
+// import { useHistory } from 'react-router'
+
+const Wrapper = styled.div`
+  margin: 40px;
+`
+
+const policies = [
+  'cache-first',
+  'network-only',
+  'cache-and-network',
+  'cache-only',
+  'no-cache',
+  'standby',
+]
+
+export const HomeContainer = () => {
+  return (
+    <Wrapper>
+      <Card title="Hello">
+        <h1>Here is Home</h1>
+        <ul>
+          {policies.map((policy) => (
+            <li key={policy}>
+              <Typography.Link href={`/${policy}`}>{policy}</Typography.Link>
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </Wrapper>
+  )
+}

src/container/Todos/index.tsx

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react'
+import { WatchQueryFetchPolicy } from '@apollo/client'
+import { useParams } from 'react-router'
+
+import { Todos } from 'components/Todos'
+import { useTodosLazyQuery } from 'graphql/api'
+
+export const TodosContainer: React.FC = () => {
+  const { fetchPolicy = 'network-only' } = useParams<{
+    fetchPolicy: WatchQueryFetchPolicy
+  }>()
+
+  const [getTodo, { data, loading }] = useTodosLazyQuery({
+    fetchPolicy: fetchPolicy as WatchQueryFetchPolicy,
+  })
+  const getContent = useCallback(() => getTodo(), [getTodo])
+  return (
+    <Todos todos={data?.todos} isLoading={loading} getContent={getContent} />
+  )
+}