<aside> 🌿 ここで作成する商品情報登録ページの項目は以下5つ ・商品名 ・商品説明 ・カテゴリー ・性別 ・価格

商品画像の登録と、サイズ・数量の設定は次回実装予定

</aside>

<aside> 🌿 今回使用するFirestoreのメソッドについてはこちら▼ ドキュメント

Add data to Cloud Firestore | Firebase

解説

0-2. Cloud Firestoreのメソッド解説

</aside>

■目次

1. 商品情報登録ページを作る

1-1. templateファイル（ProductEdit）の作成

1. src > templatesディレクトリに、ProductEdit.jsxを作成する

   

2. 適宜ページコンポーネントを作成する

   また、エントリポイントでProductEdit.jsxをexportしておくこと

   ▼コード例

   ※ カテゴリーと性別はセレクトボックスで実装予定。後ほど作成するので、今はstateだけ用意

   import React, { useCallback, useState } from "react";
   import { TextInput } from "../components/UIkit";
   
   const ProductEdit = () => {
     const [name, setName] = useState(""),
       [description, setDescription] = useState(""),
       [category, setCategory] = useState(""),
       [gender, setGender] = useState(""),
       [price, setPrice] = useState("");
   
     const inputName = useCallback(
       (event) => {
         setName(event.target.value);
       },
       [setName]
     );
   
     const inputDescription = useCallback(
       (event) => {
         setDescription(event.target.value);
       },
       [setDescription]
     );
   
     const inputPrice = useCallback(
       (event) => {
         setPrice(event.target.value);
       },
       [setPrice]
     );
   
     return (
       <section>
         <h2 className="u-text__headline u-text-center">商品の登録・編集</h2>
         <div className="c-section-container">
           <TextInput
             variant={"standard"}
             fullWidth={true}
             label={"商品名"}
             multiline={false}
             required={true}
             rows={1}
             value={name}
             type={"text"}
             onChange={inputName}
           />
           <TextInput
             variant={"standard"}
             fullWidth={true}
             label={"商品説明"}
             multiline={true}
             required={true}
             rows={5}
             value={description}
             type={"text"}
             onChange={inputDescription}
           />
           <TextInput
             variant={"standard"}
             fullWidth={true}
             label={"価格"}
             multiline={false}
             required={true}
             rows={1}
             value={price}
             type={"number"}
             onChange={inputPrice}
           />
         </div>
       </section>
     );
   };
   
   export default ProductEdit;
   

   ▼エントリポイント

   export { default as Home } from "./Home";
   **export { default as ProductEdit } from "./ProductEdit";**
   export { default as Reset } from "./Reset";
   export { default as SignIn } from "./SignIn";
   export { default as SignUp } from "./SignUp";
   export { default as Test } from "./Test";
   

3. Router.jsxを開き、ProductEdit.jsxを表示できるようルーティング設定をする

   ▼コード例

   import React from "react";
   import { Route, Routes } from "react-router-dom";
   import { Home, **ProductEdit**, Reset, SignIn, SignUp, Test } from "./templates";
   import Auth from "./Auth";
   
   const Router = () => {
     return (
       <Routes>
         <Route path="signup" element={<SignUp />} />
         <Route path="signin" element={<SignIn />} />
         <Route path="signin/reset" element={<Reset />} />
   
         <Route path="/" element={<Auth />}>
           <Route index element={<Home />} />
           **<Route path="product/edit" element={<ProductEdit />} />**
           <Route path="test" element={<Test />} />
         </Route>
       </Routes>
     );
   };
   
   export default Router;
   

4. npm start を実行し、サインアウトの状態であればログインをしてから、アドレスバーに/product/edit を追加し、意図した表示がされるか確認する

5. 一旦完了！

1-2. SelectBoxコンポーネントの作成

1. src > components > UIkit ディレクトリにSelectBox.jsxを作成する

   エントリポイントでSelectBox.jsxをexportもしておく

   

   export { default as PrimaryButton } from "./PrimaryButton";
   **export { default as SelectBox } from "./SelectBox";**
   export { default as TextInput } from "./TextInput";
   

2. 以下のように、セレクトボックスのコンポーネントを作成する

   ※ 今回はMUIを使って作成する

   ▼コード例

   import React from "react";
   import { InputLabel, MenuItem, FormControl, Select, styled } from "@mui/material";
   
   const CustomizedFormControl = styled(FormControl)`
       margin-bottom: 16px;
       min-width: 128px;
       width: 100%;
   `
   
   const SelectBox = (props) => {
     return (
       <CustomizedFormControl variant={props.variant}>
         <InputLabel>{props.label}</InputLabel>
         <Select
           required={props.required}
           value={props.value}
           onChange={(event) => props.select(event.target.value)}
         >
           {props.options.map((option) => (
             <MenuItem key={option.id} value={option.id}>
               {option.name}
             </MenuItem>
           ))}
         </Select>
       </CustomizedFormControl>
     );
   };
   
   export default SelectBox;
   

3. ProductEdit.jsxを開き、今作成したSelectBox.jsxをimportしつつ、jsx内に設置していく

   また、仮でセレクトボックス用のデータも作成、設置する

   ▼コード例

   import React, { useCallback, useState } from "react";
   import { SelectBox, TextInput } from "../components/UIkit";
   
   const ProductEdit = () => {
   	〜〜〜
     **const categories = [
       {
         id: "tops",
         name: "トップス",
       },
       {
         id: "shirts",
         name: "シャツ",
       },
       {
         id: "pants",
         name: "パンツ",
       },
     ];
   
     const genders = [
       {
         id: "all",
         name: "すべて",
       },
       {
         id: "male",
         name: "メンズ",
       },
       {
         id: "female",
         name: "レディース",
       },
     ];**
   
     return (
       <section>
   				〜〜〜
           **<SelectBox
             variant={"standard"}
             label={"カテゴリー"}
             required={true}
             value={category}
             select={setCategory}
             options={categories}
           />
           <SelectBox
             variant={"standard"}
             label={"性別"}
             required={true}
             value={gender}
             select={setGender}
             options={genders}
           />**
           <TextInput
             variant={"standard"}
             fullWidth={true}
             label={"価格"}
             multiline={false}
             required={true}
             rows={1}
             value={price}
             type={"number"}
             onChange={inputPrice}
           />
         </div>
       </section>
     );
   };
   
   export default ProductEdit;
   

4. ブラウザで意図した表示になっているか確認する

5. 続けて、商品情報を登録するための、保存用ボタンを作成する

   なお、oncClickに入る関数は次章で作成するので、今は一旦空でOK

   ▼コード例

   import React, { useCallback, useState } from "react";
   import { **PrimaryButton,** SelectBox, TextInput } from "../components/UIkit";
   
   const ProductEdit = () => {
   
   			〜〜〜
   
           <TextInput
             variant={"standard"}
             fullWidth={true}
             label={"価格"}
             multiline={false}
             required={true}
             rows={1}
             value={price}
             type={"number"}
             onChange={inputPrice}
                 />
           <div className="module-spacer--medium" />
           **<div className="center">
               <PrimaryButton
                   label={"商品情報を保存"}
                   onClick={}
               />
           </div>**
         </div>
       </section>
     );
   };
   
   export default ProductEdit;
   

2. reducksディレクトリにproductsディレクトリを追加する

1. src > reducksディレクトリ内に、productsディレクトリを追加し、その中に以下ファイルを作成する（usersと同じ構成だよ）

   • actions.js
   • operations.js
   • reducers.js
   • selectors.js

   

2. reducers.jsの中身は、users > reducers.jsをコピペし、適宜products用に変更する

   ▼主な変更箇所

   • exportの定数名をProductsReducerに変更する
   • 引数のinitialState.usersをinitialState.products に変更する
   • caseは一旦削除

   ▼コード例　※マーカーが変更箇所

   import * as Actions from "./actions";
   import initialState from "../store/initialState";
   
   export const **Products**Reducer = (state = initialState.**products**, action) => {
     switch (action.type) {
   		**// ここに書いていたcase文は一旦削除**
       default:
         return state;
     }
   };