From 2a23cda25857692485cd0e5524f9db9dcec3fdc9 Mon Sep 17 00:00:00 2001
From: Dwayne Harris <dwayneh@gmail.com>
Date: Sun, 17 Nov 2019 19:02:18 -0500
Subject: [PATCH] WIP

---
 src/components/controls/static-field.tsx | 37 ++++++++++++++
 src/components/level.tsx                 |  2 +-
 src/components/pages/create-app.tsx      | 21 ++++----
 src/components/pages/edit-app.tsx        | 62 ++++++------------------
 src/components/pages/group-admin.tsx     | 36 ++------------
 src/components/pages/self.tsx            | 41 ++--------------
 src/components/pages/view-post.tsx       | 14 +++++-
 src/components/pages/view-user.tsx       |  2 +-
 src/styles/app.css                       |  5 ++
 9 files changed, 92 insertions(+), 128 deletions(-)
 create mode 100644 src/components/controls/static-field.tsx

diff --git a/src/components/controls/static-field.tsx b/src/components/controls/static-field.tsx
new file mode 100644
index 0000000..d7f94a5
--- /dev/null
+++ b/src/components/controls/static-field.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { useTheme } from 'src/hooks'
+
+import FieldLabel from 'src/components/controls/field-label'
+
+interface Props {
+    label: string
+    value?: string
+    icon?: IconDefinition
+}
+
+const StaticField: FC<Props> = ({ label, value, icon }) => {
+    const theme = useTheme()
+    return (
+        <div className="field">
+            <FieldLabel>{label}</FieldLabel>
+            <div className="control-container">
+                {icon &&
+                    <div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
+                        <FontAwesomeIcon icon={icon} />
+                    </div>
+                }
+                <div className="control">
+                    <input
+                        style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
+                        type="text"
+                        value={value}
+                        readOnly />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default StaticField
diff --git a/src/components/level.tsx b/src/components/level.tsx
index 1cfd1a1..c749863 100644
--- a/src/components/level.tsx
+++ b/src/components/level.tsx
@@ -12,7 +12,7 @@ const Level: FC<Props> = ({ items }) => {
     return (
         <nav className="level">
             {items.map(item => (
-                <div>
+                <div key={item.label}>
                     {item.label && <p className="label" style={{ color: theme.secondary }}>{item.label}</p>}
                     <p className="content" style={{ color: theme.text }}>{item.content}</p>
                 </div>
diff --git a/src/components/pages/create-app.tsx b/src/components/pages/create-app.tsx
index 3f86521..eeebf6a 100644
--- a/src/components/pages/create-app.tsx
+++ b/src/components/pages/create-app.tsx
@@ -1,12 +1,14 @@
 import React, { FC, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link, useHistory } from 'react-router-dom'
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle, faIdCard, faLink, faAddressBook, faCodeBranch } from '@fortawesome/free-solid-svg-icons'
 
 import { checkAppAvailability, createApp } from 'src/actions/apps'
 import { initForm, initField, setFieldNotification } from 'src/actions/forms'
 import { showNotification } from 'src/actions/notifications'
 import { getForm } from 'src/selectors/forms'
+import { getIsFetching } from 'src/selectors/requests'
+import { useTheme } from 'src/hooks'
 import { setTitle, valueFromForm } from 'src/utils'
 import { AppState, Form, NotificationType, AppThunkDispatch, RequestKey } from 'src/types'
 
@@ -20,9 +22,9 @@ import CheckboxField from 'src/components/controls/checkbox-field'
 import ImageField from 'src/components/controls/image-field'
 import CoverImageField from 'src/components/controls/cover-image-field'
 import IconImageField from 'src/components/controls/icon-image-field'
-import { getIsFetching } from 'src/selectors/requests'
 
 const CreateApp: FC = () => {
+    const theme = useTheme()
     const form = useSelector<AppState, Form>(getForm)
     const fetching = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.CreateApp))
     const dispatch = useDispatch<AppThunkDispatch>()
@@ -107,11 +109,11 @@ const CreateApp: FC = () => {
                 <Title>Create a new App</Title>
                 <HorizontalRule />
 
-                <TextField name="name" label="Name" placeholder="App ID/Name" onBlur={e => checkAvailability(e.target.value)} />
+                <TextField name="name" label="Name" icon={faIdCard} placeholder="App ID/Name" onBlur={e => checkAvailability(e.target.value)} />
                 <TextareaField name="about" label="About" placeholder="Description of this app" />
-                <TextField name="websiteUrl" label="Website" placeholder="Website URL (optional)" />
-                <TextField name="companyName" label="Company" placeholder="Your company or organization (optional)" />
-                <TextField name="version" label="Version" placeholder="Current Version of the app (ex: 0.0.1beta5)" />
+                <TextField name="websiteUrl" label="Website" icon={faLink} placeholder="Website URL (optional)" />
+                <TextField name="companyName" label="Company" icon={faAddressBook} placeholder="Your company or organization (optional)" />
+                <TextField name="version" label="Version" icon={faCodeBranch} placeholder="Current Version of the app (ex: 0.0.1beta5)" />
                 <HorizontalRule />
 
                 <ImageField name="image" />
@@ -119,12 +121,11 @@ const CreateApp: FC = () => {
                 <IconImageField name="iconImage" />
                 <HorizontalRule />
 
-                <TextField name="composerUrl" label="Composer URL" placeholder="URL for the composer web page" />
-                <TextField name="rendererUrl" label="Renderer URL" placeholder="URL for the renderer template" />
-                <br />
+                <TextField name="composerUrl" label="Composer URL" icon={faLink} placeholder="URL for the composer web page" />
+                <TextField name="rendererUrl" label="Renderer URL" icon={faLink} placeholder="URL for the renderer template" />
 
                 <CheckboxField name="agree">
-                    I agree to the Apps <Link to="/terms/apps">terms and conditions</Link>.
+                    I agree to the Apps <Link style={{ color: theme.primary }} to="/terms/apps">terms and conditions</Link>.
                 </CheckboxField>
                 <br /><br />
                 
diff --git a/src/components/pages/edit-app.tsx b/src/components/pages/edit-app.tsx
index b0d440a..84bef90 100644
--- a/src/components/pages/edit-app.tsx
+++ b/src/components/pages/edit-app.tsx
@@ -1,8 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faIdCard, faCheckCircle, faKey, faShieldAlt } from '@fortawesome/free-solid-svg-icons'
+import { faIdCard, faCheckCircle, faKey, faShieldAlt, faLink, faAddressBook, faCodeBranch } from '@fortawesome/free-solid-svg-icons'
 
 import { handleApiError } from 'src/api/errors'
 import { fetchApp, updateApp } from 'src/actions/apps'
@@ -13,7 +12,7 @@ import { getEntity } from 'src/selectors/entities'
 import { getForm } from 'src/selectors/forms'
 import { getIsFetching } from 'src/selectors/requests'
 
-import { useAuthenticationCheck, useDeepCompareEffect } from 'src/hooks'
+import { useAuthenticationCheck, useDeepCompareEffect, useTheme } from 'src/hooks'
 import { setTitle, valueFromForm } from 'src/utils'
 import { AppState, AppThunkDispatch, EntityType, App, Form, NotificationType, RequestKey } from 'src/types'
 
@@ -21,12 +20,12 @@ import Title from 'src/components/title'
 import Section from 'src/components/section'
 import HorizontalRule from 'src/components/horizontal-rule'
 import Loading from 'src/components/pages/loading'
-import FieldLabel from 'src/components/controls/field-label'
 import TextField from 'src/components/controls/text-field'
 import TextareaField from 'src/components/controls/textarea-field'
 import ImageField from 'src/components/controls/image-field'
 import CoverImageField from 'src/components/controls/cover-image-field'
 import IconImageField from 'src/components/controls/icon-image-field'
+import StaticField from 'src/components/controls/static-field'
 import PrimaryButton from 'src/components/controls/primary-button'
 
 interface Params {
@@ -36,6 +35,7 @@ interface Params {
 const EditApp: FC = () => {
     useAuthenticationCheck()
 
+    const theme = useTheme()
     const { id } = useParams<Params>()
     const fetching = useSelector<AppState, boolean>(state => getIsFetching(state, RequestKey.UpdateApp))
     const app = useSelector<AppState, App | undefined>(state => getEntity<App>(state, EntityType.App, id))
@@ -125,7 +125,7 @@ const EditApp: FC = () => {
         }
     }
 
-    const privateKeyDisplay = showPrivateKey ? app.privateKey : ''
+    const privateKeyDisplay = showPrivateKey ? app.privateKey : '********'
 
     return (
         <div>
@@ -134,48 +134,18 @@ const EditApp: FC = () => {
                 <HorizontalRule />
 
                 <div>
-                    <div className="field">
-                        <FieldLabel>Public Key</FieldLabel>
-                        <div className="control-container">
-                            <input className="input" type="text" value={app.publicKey} readOnly />
-                            <span className="icon is-small is-left">
-                                <FontAwesomeIcon icon={faKey} />
-                            </span>
-                        </div>
-                    </div>
-                    <br />
-
-                    <div className="field">
-                        <p className="control">
-                            <button className="button" onClick={() => setShowPrivateKey(!showPrivateKey)}>
-                                <span className="icon is-small is-left">
-                                    <FontAwesomeIcon icon={faShieldAlt} />
-                                </span>
-                            </button>
-                        </p>
-                        <p className="control is-expanded">
-                            <input className="input" type="text" value={privateKeyDisplay} placeholder="Private Key" readOnly />
-                        </p>
-                    </div>
+                    <StaticField label="Public Key" icon={faKey} value={app.publicKey} />
+                    <StaticField label="Private Key" icon={faShieldAlt} value={privateKeyDisplay} />
+                    <a style={{ display: 'block', fontSize: '0.75rem', color: theme.secondary, marginTop: '-2rem' }} onClick={() => setShowPrivateKey(!showPrivateKey)}>{showPrivateKey ? 'Hide' : 'Show'}</a>
+
                     <HorizontalRule />
 
-                    <div className="field">
-                        <FieldLabel>ID</FieldLabel>
-                        <div className="control-container">
-                            <div className="icon">
-                                <FontAwesomeIcon icon={faIdCard} />
-                            </div>
-                            <div className="control">
-                                <input className="input" type="text" value={app.id} readOnly />
-                            </div>
-                        </div>
-                    </div>
-
-                    <TextField name="name" label="Name" placeholder="App Name" />
+                    <StaticField label="ID" icon={faIdCard} />
+                    <TextField name="name" label="Name" icon={faIdCard} placeholder="App Name" />
                     <TextareaField name="about" label="About" placeholder="Description of this app" />
-                    <TextField name="websiteUrl" label="Website" placeholder="Website URL (optional)" />
-                    <TextField name="companyName" label="Company" placeholder="Your company or organization (optional)" />
-                    <TextField name="version" label="Version" placeholder="Current Version of the app (ex: 0.0.1beta5)" help={`Last Version: ${app.version}`} />
+                    <TextField name="websiteUrl" label="Website" icon={faLink} placeholder="Website URL (optional)" />
+                    <TextField name="companyName" label="Company" icon={faAddressBook} placeholder="Your company or organization (optional)" />
+                    <TextField name="version" label="Version" icon={faCodeBranch} placeholder="Current Version of the app (ex: 0.0.1beta5)" help={`Last Version: ${app.version}`} />
                     <HorizontalRule />
 
                     <ImageField name="image" />
@@ -183,8 +153,8 @@ const EditApp: FC = () => {
                     <IconImageField name="iconImage" />
                     <HorizontalRule />
 
-                    <TextField name="composerUrl" label="Composer URL" placeholder="URL for the composer web page" />
-                    <TextField name="rendererUrl" label="Renderer URL" placeholder="URL for the renderer template" />
+                    <TextField name="composerUrl" label="Composer URL" icon={faLink} placeholder="URL for the composer web page" />
+                    <TextField name="rendererUrl" label="Renderer URL" icon={faLink} placeholder="URL for the renderer template" />
                     <br /><br />
 
                     <PrimaryButton text="Save" icon={faCheckCircle} loading={fetching} onClick={() => handleUpdate()} />
diff --git a/src/components/pages/group-admin.tsx b/src/components/pages/group-admin.tsx
index cf5e745..8caca69 100644
--- a/src/components/pages/group-admin.tsx
+++ b/src/components/pages/group-admin.tsx
@@ -1,8 +1,7 @@
 import React, { FC, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, useParams, useHistory } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDoorOpen, faCheckCircle, faIdCard, faEnvelope, faUserShield } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle, faIdCard } from '@fortawesome/free-solid-svg-icons'
 
 import { handleApiError } from 'src/api/errors'
 import { initForm, initField } from 'src/actions/forms'
@@ -32,11 +31,11 @@ import GroupInvitations from 'src/components/group-invitations'
 import GroupLogs from 'src/components/group-logs'
 import Loading from 'src/components/pages/loading'
 
-import FieldLabel from 'src/components/controls/field-label'
 import TextareaField from 'src/components/controls/textarea-field'
 import ImageField from 'src/components/controls/image-field'
 import CoverImageField from 'src/components/controls/cover-image-field'
 import IconImageField from 'src/components/controls/icon-image-field'
+import StaticField from 'src/components/controls/static-field'
 
 interface Params {
     id: string
@@ -122,35 +121,8 @@ const GroupAdmin: FC = () => {
                 <div>
                     {tab === '' &&
                         <div>
-                            <div className="field">
-                                <FieldLabel>ID</FieldLabel>
-                                <div className="control-container">
-                                    <div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
-                                        <FontAwesomeIcon icon={faIdCard} />
-                                    </div>
-                                    <div className="control">
-                                        <input
-                                            style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
-                                            type="text"
-                                            value={group.id}
-                                            readOnly />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="field">
-                                <FieldLabel>Name</FieldLabel>
-                                <div className="control-container">
-                                    <div className="control">
-                                        <input
-                                            style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
-                                            type="text"
-                                            value={group.name}
-                                            readOnly />
-                                    </div>
-                                </div>
-                            </div>
-
+                            <StaticField label="ID" icon={faIdCard} value={group.id} />
+                            <StaticField label="Name" value={group.name} />
                             <TextareaField name="about" label="About" placeholder="About this Community" />
                             <ImageField name="image" />
                             <CoverImageField name="coverImage" />
diff --git a/src/components/pages/self.tsx b/src/components/pages/self.tsx
index 7207d6b..771ae35 100644
--- a/src/components/pages/self.tsx
+++ b/src/components/pages/self.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, useHistory } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDoorOpen, faCheckCircle, faIdCard, faEnvelope, faUserShield } from '@fortawesome/free-solid-svg-icons'
+import { faDoorOpen, faCheckCircle, faIdCard, faEnvelope, faUserShield, faUserCircle } from '@fortawesome/free-solid-svg-icons'
 
 import { unauthenticate, updateSelf } from 'src/actions/authentication'
 import { initForm, initField } from 'src/actions/forms'
@@ -22,7 +21,6 @@ import HorizontalRule from 'src/components/horizontal-rule'
 import PrimaryButton from 'src/components/controls/primary-button'
 import SecondaryButton from 'src/components/controls/secondary-button'
 import Loading from 'src/components/pages/loading'
-import FieldLabel from 'src/components/controls/field-label'
 import TextField from 'src/components/controls/text-field'
 import TextareaField from 'src/components/controls/textarea-field'
 import SelectField from 'src/components/controls/select-field'
@@ -30,6 +28,7 @@ import CheckboxField from 'src/components/controls/checkbox-field'
 import ImageField from 'src/components/controls/image-field'
 import CoverImageField from 'src/components/controls/cover-image-field'
 import ThemeField from 'src/components/controls/theme-field'
+import StaticField from 'src/components/controls/static-field'
 
 const Self: FC = () => {
     const theme = useTheme()
@@ -96,40 +95,10 @@ const Self: FC = () => {
 
                 <HorizontalRule />
 
-                <Link style={{ color: theme.primary }} to={`/u/${user.id}`}>Your Page</Link>
-
-                <div className="field">
-                    <FieldLabel>ID</FieldLabel>
-                    <div className="control-container">
-                        <div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
-                            <FontAwesomeIcon icon={faIdCard} />
-                        </div>
-                        <div className="control">
-                            <input
-                                style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
-                                type="text"
-                                value={user.id}
-                                readOnly />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="field">
-                    <FieldLabel>Email</FieldLabel>
-                    <div className="control-container">
-                        <div className="icon" style={{ backgroundColor: theme.primary, color: theme.primaryAlternate }}>
-                            <FontAwesomeIcon icon={faEnvelope} />
-                        </div>
-                        <div className="control">
-                            <input
-                                style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.secondary, color: theme.text }}
-                                type="email"
-                                value={user.email}
-                                readOnly />
-                        </div>
-                    </div>
-                </div>
+                <PrimaryButton text="Your Page" icon={faUserCircle} onClick={() => history.push(`/u/${user.id}`)} />
 
+                <StaticField label="ID" icon={faIdCard} value={user.id} />
+                <StaticField label="ID" icon={faEnvelope} value={user.email} />
                 <TextField name="name" label="Name" placeholder="Your Display Name" />
                 <TextareaField name="about" label="About" placeholder="Your Bio" />
                 <ThemeField name="theme" label="Color" />
diff --git a/src/components/pages/view-post.tsx b/src/components/pages/view-post.tsx
index cdad0c3..8cdd5f7 100644
--- a/src/components/pages/view-post.tsx
+++ b/src/components/pages/view-post.tsx
@@ -14,6 +14,8 @@ import { setTitle } from 'src/utils'
 import { AppState, AppThunkDispatch, EntityType, Post } from 'src/types'
 
 import Title from 'src/components/title'
+import Subtitle from 'src/components/subtitle'
+import Section from 'src/components/section'
 import Loading from 'src/components/pages/loading'
 import PostComponent from 'src/components/post'
 import PostList from 'src/components/post-list'
@@ -53,6 +55,10 @@ const ViewPost: FC = () => {
 
     return (
         <div>
+            <Section>
+                <Title>Post</Title>
+            </Section>
+
             {parents.length > 0 &&
                 <div>
                     <PostList posts={parents} collapseText="Show Older Posts" />
@@ -66,14 +72,18 @@ const ViewPost: FC = () => {
 
             {authenticated &&
                 <div>
-                    <Title>Reply</Title>
+                    <Section>
+                        <Subtitle>Reply</Subtitle>
+                    </Section>
                     <Composer parent={post} onPost={fetch} />
                 </div>
             }
 
             {replies.length > 0 &&
                 <div>
-                    <Title>Replies</Title>
+                    <Section>
+                        <Subtitle>Replies</Subtitle>
+                    </Section>
                     <PostList posts={replies} />
                 </div>
             }
diff --git a/src/components/pages/view-user.tsx b/src/components/pages/view-user.tsx
index 34b8c21..9730493 100644
--- a/src/components/pages/view-user.tsx
+++ b/src/components/pages/view-user.tsx
@@ -63,7 +63,7 @@ const ViewUser: FC = () => {
         }
 
         return () => {
-            dispatch(setTheme(selectedThemeName))
+            if (selectedThemeName) dispatch(setTheme(selectedThemeName))
         }
     }, [user])
 
diff --git a/src/styles/app.css b/src/styles/app.css
index 8482e41..d1a8f35 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -399,6 +399,11 @@ div.post-info > div {
     padding: 0.8rem;
 }
 
+p.caption {
+    font-size: 0.75rem;
+    margin-top: -0.1rem;
+}
+
 div.user {
     align-items: flex-start;
     display: flex;