Dev

cats.js

@@ -13,4 +13,6 @@ console.log("change 3");
 console.log("fachreza");console.log("This is my app");
 console.log("change 2");
 console.log("change 3");
+console.log("fachreza");
+console.log("change 3");
 console.log("fachreza");

en.js

@@ -0,0 +1,6 @@
+"app.components.GroupRegistration.groupNameJP": "Group Name (JP)",
+"app.components.GroupRegistration.groupNameEN": "Group Name (EN)",
+"app.components.GroupRegistration.groupType": "Group Type",
+"app.components.GroupRegistration.Memo": "Memo",
+"app.components.GroupRegistration.Executive": "Executive",
+"app.components.GroupRegistration.User": "User",

fish.js

@@ -5,4 +5,7 @@
 ("1")
 ("1")
 ("1")
-("1")
+("1")
+("2")
+("3")
+("4")

form.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Typography from "@material-ui/core/Typography";
+import { FormattedMessage } from "react-intl";
 import Input from "@material-ui/core/Input";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
@@ -45,7 +46,7 @@ const GroupRegistrationForm = ({ setDataForm, isFormValid, reset }) => {
           <Typography
             className={style.fieldNameJPTitle}
           >
-            Group Name (JP)
+            <FormattedMessage id="app.components.GroupRegistration.groupNameJP" defaultMessage="Group Name (JP)" />
           </Typography>
         </div>
         <div>
@@ -62,7 +63,7 @@ const GroupRegistrationForm = ({ setDataForm, isFormValid, reset }) => {
           {
             !isFormValid && (
               <FormHelperText className={style.errorText}>
-                *Required
+                <FormattedMessage id="app.components.field.error.empty" defaultMessage="*Required" />
               </FormHelperText>
             )
           }
@@ -71,7 +72,7 @@ const GroupRegistrationForm = ({ setDataForm, isFormValid, reset }) => {
           <Typography
             className={style.fieldNameENTitle}
           >
-            Group Name (EN)
+            <FormattedMessage id="app.components.GroupRegistration.groupNameEN" defaultMessage="Group Name (EN)" />
           </Typography>
         </div>
         <div>
@@ -88,7 +89,7 @@ const GroupRegistrationForm = ({ setDataForm, isFormValid, reset }) => {
           <Typography
             className={style.fieldMemoTitle}
           >
-            Memo
+            <FormattedMessage id="app.components.GroupRegistration.Memo" defaultMessage="Memo" />
           </Typography>
         </div>
         <div>
@@ -107,7 +108,7 @@ const GroupRegistrationForm = ({ setDataForm, isFormValid, reset }) => {
       </div>
       <div className={style.fieldGroupTypeContainer}>
         <Typography className={style.fieldGroupTypeTitle}>
-          Group Type
+          <FormattedMessage id="app.components.GroupRegistration.groupType" defaultMessage="Group Type" />
         </Typography>
         <div>
           <RadioGroup row aria-label="group-type" value={groupType} onChange={groupTypeChangeHandler}>

jp.js

@@ -0,0 +1,6 @@
+"app.components.GroupRegistration.groupNameJP": "グループ名(JP)",
+"app.components.GroupRegistration.groupNameEN": "グループ名(EN)",
+"app.components.GroupRegistration.groupType": "グループ種別",
+"app.components.GroupRegistration.Memo": "メモ",
+"app.components.GroupRegistration.Executive": "役員",
+"app.components.GroupRegistration.User": "利用者",

usergroupstyle.js

@@ -0,0 +1,68 @@
+import { makeStyles } from "@material-ui/core";
+
+export const useStyles = makeStyles((theme) => ({
+  fieldNameJPContainer: {
+    fontSize: "14px",
+    marginTop: "16px",
+    height: "100%",
+  },
+  fieldNameJPTitle: {
+    fontSize: "14px",
+    paddingLeft: "14px",
+    fontWeight: "bold"
+  },
+  fieldNameJP: {
+    fontSize: "14px",
+    marginTop: "4px",
+    width: "100%",
+    borderRadius: "18px",
+    padding: "0 18px",
+    border: `0.5px solid ${theme.palette.olive.textColorThree}`
+  },
+  fieldNameENContainer: {
+    marginTop: "16px",
+  },
+  fieldNameENTitle: {
+    fontSize: "14px",
+    paddingLeft: "14px",
+  },
+  fieldNameEN: {
+    fontSize: "14px",
+    marginTop: "4px",
+    width: "100%",
+    borderRadius: "18px",
+    padding: "0 18px",
+    border: `0.5px solid ${theme.palette.olive.textColorThree}`
+  },
+  fieldMemoContainer: {
+    marginTop: "16px",
+  },
+  fieldMemoTitle: {
+    fontSize: "14px",
+    paddingLeft: "14px",
+  },
+  fieldMemo: {
+    fontSize: "14px",
+    marginTop: "4px",
+    width: "100%",
+    borderRadius: "18px",
+    padding: "10px 18px",
+    border: `0.5px solid ${theme.palette.olive.textColorThree}`
+  },
+  fieldGroupTypeContainer: {
+    marginTop: "22px",
+  },
+  fieldGroupTypeTitle: {
+    fontSize: "14px",
+    paddingLeft: "14px",
+    fontWeight: "bold"
+  },
+  fieldError: {
+    border: `1px solid ${theme.palette.olive.red}`,
+  },
+  errorText: {
+    fontSize: 12,
+    marginLeft: 20,
+    color: theme.palette.olive.red
+  },
+}));