fix datefns and initial props in UserGroupDetailPage

src/client/js/app.jsx

@@ -151,13 +151,10 @@ Object.keys(componentMappings).forEach((key) => {
 // render for admin
 const adminUserGroupDetailElem = document.getElementById('admin-user-group-detail');
 if (adminUserGroupDetailElem != null) {
-  const userGroup = JSON.parse(adminUserGroupDetailElem.getAttribute('data-user-group'));
   ReactDOM.render(
     <Provider inject={[]}>
       <I18nextProvider i18n={i18n}>
-        <UserGroupDetailPage
-          userGroup={userGroup}
-        />
+        <UserGroupDetailPage />
       </I18nextProvider>
     </Provider>,
     adminUserGroupDetailElem,

src/client/js/components/Admin/UserGroup/UserGroupTable.jsx

@@ -73,7 +73,7 @@ class UserGroupTable extends React.Component {
                       })}
                     </ul>
                   </td>
-                  <td>{dateFnsFormat(new Date(group.createdAt), 'YYYY-MM-DD')}</td>
+                  <td>{dateFnsFormat(new Date(group.createdAt), 'yyyy-MM-dd')}</td>
                   {this.props.isAclEnabled
                     ? (
                       <td>

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -8,6 +8,17 @@ import UserGroupPageList from './UserGroupPageList';
 
 class UserGroupDetailPage extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    const elem = document.getElementById('admin-user-group-detail');
+    const userGroup = JSON.parse(elem.getAttribute('data-user-group'));
+
+    this.state = {
+      userGroup,
+    };
+  }
+
   render() {
 
     return (
@@ -17,7 +28,7 @@ class UserGroupDetailPage extends React.Component {
         グループ一覧に戻る
         </a>
         <UserGroupEditForm
-          userGroup={this.props.userGroup}
+          userGroup={this.state.userGroup}
         />
         <UserGroupUserTable />
         <UserGroupUserModal />
@@ -29,7 +40,6 @@ class UserGroupDetailPage extends React.Component {
 }
 
 UserGroupDetailPage.propTypes = {
-  userGroup: PropTypes.object.isRequired,
 };
 
 export default UserGroupDetailPage;

src/client/js/components/Admin/UserGroupDetail/UserGroupEditForm.jsx

@@ -24,12 +24,8 @@ class UserGroupEditForm extends React.Component {
   }
 
   handleChange(event) {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
-
     this.setState({
-      [name]: value,
+      name: event.target.value,
     });
   }
 
@@ -69,7 +65,7 @@ class UserGroupEditForm extends React.Component {
             <div className="form-group">
               <label className="col-sm-2 control-label">{ t('Created') }</label>
               <div className="col-sm-4">
-                <input className="form-control" type="text" disabled value={dateFnsFormat(new Date(this.props.userGroup.createdAt), 'YYYY-MM-DD')} />
+                <input className="form-control" type="text" disabled value={dateFnsFormat(new Date(this.props.userGroup.createdAt), 'yyyy-MM-dd')} />
               </div>
             </div>
             <div className="form-group">