From f1257f98a4953cc2799f07e27f57230e109f4769 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 8 Feb 2020 10:09:58 +0100
Subject: [PATCH] Client - refactor user profile (wip)

---
 .../src/components/User/Profile.jsx           | 135 +----------------
 .../src/components/User/ProfileDetail.jsx     | 141 ++++++++++++++++++
 2 files changed, 147 insertions(+), 129 deletions(-)
 create mode 100644 fittrackee_client/src/components/User/ProfileDetail.jsx

diff --git a/fittrackee_client/src/components/User/Profile.jsx b/fittrackee_client/src/components/User/Profile.jsx
index c41914e3..a642d982 100644
--- a/fittrackee_client/src/components/User/Profile.jsx
+++ b/fittrackee_client/src/components/User/Profile.jsx
@@ -1,142 +1,19 @@
-import { format } from 'date-fns'
 import React from 'react'
-import { Helmet } from 'react-helmet'
 import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 
-import Message from '../Common/Message'
-import { deletePicture, uploadPicture } from '../../actions/user'
-import { apiUrl, getFileSize } from '../../utils'
+import ProfileDetail from './ProfileDetail'
 
-function Profile({
-  appConfig,
-  message,
-  onDeletePicture,
-  onUploadPicture,
-  t,
-  user,
-}) {
-  const createdAt = user.created_at
-    ? format(new Date(user.created_at), 'dd/MM/yyyy HH:mm')
-    : ''
-  const birthDate = user.birth_date
-    ? format(new Date(user.birth_date), 'dd/MM/yyyy')
-    : ''
-  const fileSizeLimit = getFileSize(appConfig.max_single_file_size)
+function Profile({ t, user }) {
   return (
     <div>
-      <Helmet>
-        <title>FitTrackee - {t('user:Profile')}</title>
-      </Helmet>
-      <Message message={message} t={t} />
-      <div className="container">
-        <h1 className="page-title">{t('user:Profile')}</h1>
-        <div className="row">
-          <div className="col-md-12">
-            <div className="card">
-              <div className="card-header userName">
-                {user.username}{' '}
-                <Link
-                  to={{
-                    pathname: '/profile/edit',
-                  }}
-                >
-                  <i className="fa fa-pencil-square-o" aria-hidden="true" />
-                </Link>
-              </div>
-              <div className="card-body">
-                <div className="row">
-                  <div className="col-md-8">
-                    <p>
-                      {t('user:Email')}: {user.email}
-                    </p>
-                    <p>
-                      {t('user:Registration Date')}: {createdAt}
-                    </p>
-                    <p>
-                      {t('user:First Name')}: {user.first_name}
-                    </p>
-                    <p>
-                      {t('user:Last Name')}: {user.last_name}
-                    </p>
-                    <p>
-                      {t('user:Birth Date')}: {birthDate}
-                    </p>
-                    <p>
-                      {t('user:Location')}: {user.location}
-                    </p>
-                    <p>
-                      {t('user:Bio')}: {user.bio}
-                    </p>
-                    <p>
-                      {t('user:Language')}: {user.language}
-                    </p>
-                    <p>
-                      {t('user:Timezone')}: {user.timezone}
-                    </p>
-                    <p>
-                      {t('user:First day of week')}:{' '}
-                      {user.weekm ? t('user:Monday') : t('user:Sunday')}
-                    </p>
-                  </div>
-                  <div className="col-md-4">
-                    {user.picture === true && (
-                      <div>
-                        <img
-                          alt="Profile"
-                          src={
-                            `${apiUrl}users/${user.id}/picture` +
-                            `?${Date.now()}`
-                          }
-                          className="img-fluid App-profile-img-small"
-                        />
-                        <br />
-                        <button type="submit" onClick={() => onDeletePicture()}>
-                          {t('user:Delete picture')}
-                        </button>
-                        <br />
-                        <br />
-                      </div>
-                    )}
-                    <form
-                      encType="multipart/form-data"
-                      onSubmit={event => onUploadPicture(event)}
-                    >
-                      <input
-                        type="file"
-                        name="picture"
-                        accept=".png,.jpg,.gif"
-                      />
-                      <br />
-                      <button type="submit">{t('user:Send')}</button>
-                      {` (max. size: ${fileSizeLimit})`}
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ProfileDetail t={t} user={user} />
     </div>
   )
 }
 
 export default withTranslation()(
-  connect(
-    state => ({
-      appConfig: state.application.config,
-      message: state.message,
-      user: state.user,
-    }),
-    dispatch => ({
-      onDeletePicture: () => {
-        dispatch(deletePicture())
-      },
-      onUploadPicture: event => {
-        dispatch(uploadPicture(event))
-      },
-    })
-  )(Profile)
+  connect(state => ({
+    user: state.user,
+  }))(Profile)
 )
diff --git a/fittrackee_client/src/components/User/ProfileDetail.jsx b/fittrackee_client/src/components/User/ProfileDetail.jsx
new file mode 100644
index 00000000..4ad15fff
--- /dev/null
+++ b/fittrackee_client/src/components/User/ProfileDetail.jsx
@@ -0,0 +1,141 @@
+import { format } from 'date-fns'
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { withTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import Message from '../Common/Message'
+import { deletePicture, uploadPicture } from '../../actions/user'
+import { apiUrl, getFileSize } from '../../utils'
+
+function ProfileDetail({
+  appConfig,
+  message,
+  onDeletePicture,
+  onUploadPicture,
+  t,
+  user,
+}) {
+  const createdAt = user.created_at
+    ? format(new Date(user.created_at), 'dd/MM/yyyy HH:mm')
+    : ''
+  const birthDate = user.birth_date
+    ? format(new Date(user.birth_date), 'dd/MM/yyyy')
+    : ''
+  const fileSizeLimit = getFileSize(appConfig.max_single_file_size)
+  return (
+    <div>
+      <Helmet>
+        <title>FitTrackee - {t('user:Profile')}</title>
+      </Helmet>
+      <Message message={message} t={t} />
+      <div className="container">
+        <h1 className="page-title">{t('user:Profile')}</h1>
+        <div className="row">
+          <div className="col-md-12">
+            <div className="card">
+              <div className="card-header userName">
+                {user.username}{' '}
+                <Link
+                  to={{
+                    pathname: '/profile/edit',
+                  }}
+                >
+                  <i className="fa fa-pencil-square-o" aria-hidden="true" />
+                </Link>
+              </div>
+              <div className="card-body">
+                <div className="row">
+                  <div className="col-md-8">
+                    <p>
+                      {t('user:Email')}: {user.email}
+                    </p>
+                    <p>
+                      {t('user:Registration Date')}: {createdAt}
+                    </p>
+                    <p>
+                      {t('user:First Name')}: {user.first_name}
+                    </p>
+                    <p>
+                      {t('user:Last Name')}: {user.last_name}
+                    </p>
+                    <p>
+                      {t('user:Birth Date')}: {birthDate}
+                    </p>
+                    <p>
+                      {t('user:Location')}: {user.location}
+                    </p>
+                    <p>
+                      {t('user:Bio')}: {user.bio}
+                    </p>
+                    <p>
+                      {t('user:Language')}: {user.language}
+                    </p>
+                    <p>
+                      {t('user:Timezone')}: {user.timezone}
+                    </p>
+                    <p>
+                      {t('user:First day of week')}:{' '}
+                      {user.weekm ? t('user:Monday') : t('user:Sunday')}
+                    </p>
+                  </div>
+                  <div className="col-md-4">
+                    {user.picture === true && (
+                      <div>
+                        <img
+                          alt="Profile"
+                          src={
+                            `${apiUrl}users/${user.id}/picture` +
+                            `?${Date.now()}`
+                          }
+                          className="img-fluid App-profile-img-small"
+                        />
+                        <br />
+                        <button type="submit" onClick={() => onDeletePicture()}>
+                          {t('user:Delete picture')}
+                        </button>
+                        <br />
+                        <br />
+                      </div>
+                    )}
+                    <form
+                      encType="multipart/form-data"
+                      onSubmit={event => onUploadPicture(event)}
+                    >
+                      <input
+                        type="file"
+                        name="picture"
+                        accept=".png,.jpg,.gif"
+                      />
+                      <br />
+                      <button type="submit">{t('user:Send')}</button>
+                      {` (max. size: ${fileSizeLimit})`}
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default withTranslation()(
+  connect(
+    state => ({
+      appConfig: state.application.config,
+      message: state.message,
+    }),
+    dispatch => ({
+      onDeletePicture: () => {
+        dispatch(deletePicture())
+      },
+      onUploadPicture: event => {
+        dispatch(uploadPicture(event))
+      },
+    })
+  )(ProfileDetail)
+)