Merge pull request #48 from mercari-build/tkat0/improve-step5

document/step5.en.md

@@ -2,22 +2,23 @@
 
 
 ## 1. Build local environment
-Install Node >= 14.0.0 from below.
+Install Node v16 from below.
+(16.15.0 LTS is recommended as of May 2022)
 
 https://nodejs.org/en/
 
 If you would like to install multiple versions of Node, use [nvs](https://github.com/jasongin/nvs).
 
-Run `node -v` and confirm that `v14.0.0` or above is displayed.
+Run `node -v` and confirm that `v16.0.0` or above is displayed.
 
 Move to the following directory and install dependencies with the following command.
-```
+```shell
 cd typescript/simple-mercari-web
 npm ci
 ```
 
 After launching the web application with the following command, check your web app from your browser at [http://localhost:3000/](http://localhost:3000/).
-```
+```shell
 npm start
 ```
 
@@ -28,6 +29,7 @@ This simple web application allows you to do two things
 
 These functionalities are carved out as components called `src/components/Listing` and `src/components/ItemList`, and called from the main `App.tsx`.
 
+:pushpin: Sample code is in React but the knowledge of React is not necessary.
 
 ### (Optional) Task 1: Add a new item
 Use the listing form to add a new item. In this screen, you can input name, category and a image for a new item.
@@ -41,8 +43,8 @@ In this screen, item images are all rendered as Build@Mercari logo. Specify the
 
 
 ### (Optional) Task 3. Change the styling with HTML and CSS
-These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specifed in `App.css` and they are applied by `className` attribute (e.g. `<div>className='Listing'</div>`).
-```
+These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specifed in `App.css` and they are applied by `className` attribute (e.g. `<div className='Listing'></div>`).
+```css
 .Listing {
   ...
 }

document/step5.ja.md

@@ -1,22 +1,23 @@
 # STEP5: Webのフロントエンドを実装する
 
 ## 1. 環境構築
-以下から14.0.0以降のNodeをインストールしてください。
+以下からv16のNodeをインストールしてください。
+（2022年5月現在16.15.0 LTSを推奨）
 
 https://nodejs.org/en/
 
 複数のバージョンをインストールしたい場合は[nvs](https://github.com/jasongin/nvs)を推奨します。
 
-`node -v` を実行して `v14.0.0` 以上のバージョンが表示されれば正しくインストールできています。
+`node -v` を実行して `v16.0.0` 以上のバージョンが表示されれば正しくインストールできています。
 
 まずはディレクトリに移動して、必要なライブラリをインストールします。
-```
+```shell
 cd typescript/simple-mercari-web
 npm ci
 ```
 
 以下のコマンドでアプリを起動させた後、ブラウザから[http://localhost:3000/](http://localhost:3000/)にアクセスします。
-```
+```shell
 npm start
 ```
 サーバー(Python/Go)もローカルで立ち上げておきましょう。
@@ -26,6 +27,7 @@ npm start
 
 これらは、それぞれ`src/components/Listing`と`src/components/ItemList`というコンポーネントによって作られており、`App.tsx`から呼び出されています。
 
+:pushpin: サンプルコードはReactで書かれていますが、Reactの理解は必須ではありません。
 
 ### (Optional) 課題1. 新しい商品を登録する
 Listingのフォームを使って、新しい商品を登録してみましょう。この画面では、名前、カテゴリ、画像が登録できるようになっています。
@@ -40,8 +42,8 @@ STEP3で名前とカテゴリのみで出品をするAPIを作った人は、`ty
 この二つのコンポーネントのスタイルは、CSSによって管理されています。
 
 
-どのような変更が加えられるのかを確認するため、まず`ItemList`コンポーネントのCSSを編集してみましょう。`App.css`の中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、`className`というattributeを通じて適用することができます(e.g. `<div>className='Listing'</div>`)。
-```
+どのような変更が加えられるのかを確認するため、まず`ItemList`コンポーネントのCSSを編集してみましょう。`App.css`の中に、この二つのコンポーネントのスタイルが指定されています。ここで指定したスタイルは、`className`というattributeを通じて適用することができます(e.g. `<div className='Listing'></div>`)。
+```css
 .Listing {
   ...
 }

typescript/simple-mercari-web/src/App.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import { ItemList } from './components/ItemList';
 import { Listing } from './components/Listing';
 
 function App() { 
+  // reload ItemList after Listing complete
+  const [reload, setReload] = useState(true);
   return (
     <div>
       <header className='Title'>
@@ -12,10 +14,10 @@ function App() {
         </p>
       </header>
       <div>
-        <Listing/>
+        <Listing onListingCompleted={() => setReload(true) } />
       </div>
       <div>
-        <ItemList/>
+        <ItemList reload={ reload } onLoadCompleted={() => setReload(false)} />
       </div>
     </div>
   )

typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx

@@ -10,7 +10,13 @@ interface Item {
 const server = process.env.API_URL || 'http://127.0.0.1:9000';
 const placeholderImage = process.env.PUBLIC_URL + '/logo192.png';
 
-export const ItemList: React.FC<{}> = () => {
+interface Prop {
+  reload?: boolean;
+  onLoadCompleted?: () => void;
+}
+
+export const ItemList: React.FC<Prop> = (props) => {
+  const { reload = true, onLoadCompleted } = props;
   const [items, setItems] = useState<Item[]>([])
   const fetchItems = () => {
     fetch(server.concat('/items'),
@@ -26,15 +32,18 @@ export const ItemList: React.FC<{}> = () => {
       .then(data => {
         console.log('GET success:',data);
         setItems(data.items);
+        onLoadCompleted && onLoadCompleted();
       })
       .catch(error => {
         console.error('GET error:',error)
       })
   }
 
   useEffect(() => {
-    fetchItems();
-  }, []);
+    if (reload) {
+      fetchItems();
+    }
+  }, [reload]);
 
   return (
     <div>

typescript/simple-mercari-web/src/components/Listing/Listing.tsx

@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 
 const server = process.env.API_URL || 'http://127.0.0.1:9000';
 
-export const Listing: React.FC<{}> = () => {
+interface Prop {
+  onListingCompleted?: () => void;
+}
+
+export const Listing: React.FC<Prop> = (props) => {
+  const { onListingCompleted } = props;
   const initialState = {
     name: "",
     category: "",
@@ -28,6 +33,7 @@ export const Listing: React.FC<{}> = () => {
     .then(response => response.json())
     .then(data => {
       console.log('POST success:', data);
+      onListingCompleted && onListingCompleted();
     })
     .catch((error) => {
       console.error('POST error:', error);
@@ -44,6 +50,5 @@ export const Listing: React.FC<{}> = () => {
         </div>
       </form>
     </div>
-
   );
 }