Code abstraction and styling

Abstracted button control panel from Group.tsx to its own file and styled some components in edit mode, specifically temporary elements but also the button container.
hampfh · Feb 3, 2021 · 1721f4a · 1721f4a
1 parent 4354ba2
commit 1721f4a
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 56 deletions.
diff --git a/client/src/components/templates/content_rendering/Group.tsx b/client/src/components/templates/content_rendering/Group.tsx
@@ -6,14 +6,14 @@ import { IAppState } from 'state/reducers/app'
 import RenderContent, { CONTENT_OBJECT_WIDTH } from './RenderContent'
 
 import TemporaryFields from './TemporaryFields'
-import GroupForm from './GroupForm'
 import { v4 as uuid } from "uuid"
-import { deleteGroup, onSubmitElement, onSubmitGroup, updateGroup } from "functions/contentRequests"
+import { onSubmitElement, updateGroup } from "functions/contentRequests"
 import { StateForComponent as NewElement } from "components/templates/content_rendering/TemporaryFields"
 import "./RenderData.css"
 import "./Group.css"
 import Dummy from '../content_objects/Dummy'
 import { calculateIndexFromRelative, insertDummyPositionIntoContent, submitElementReorder } from 'functions/content_reordering'
+import GroupButtonPanel from './GroupButtonPanel'
 
 const MAX_EDIT_ELEMENTS_PER_ROW = 3
 
@@ -22,13 +22,13 @@ function Group(props: PropsForComponent) {
     const [newElement, setNewElement] = useState<{
         parentGroup: string,
         type: ContentType
-    } | undefined>(undefined)
+    }>()
 
     const [newGroup, setNewGroup] = useState<{
         parentGroup: string,
         name: string,
         isSubGroup: boolean
-    } | undefined>(undefined)
+    }>()
 
     const [content, setContent] = useState<ContentObject[]>(props.group.content)
 
@@ -196,7 +196,7 @@ function Group(props: PropsForComponent) {
                 : null}
 
                 { // Generate temporary elements
-                    newElement && props.group._id.toString() === newElement.parentGroup.toString() ?
+                    newElement && props.group._id.toString() === newElement.parentGroup.toString() && props.app.flags.editMode ?
                     <TemporaryFields 
                         onSubmitElement={async (temporaryElement: NewElement) => {
                             onSubmitElement(temporaryElement, newElement, props.app.fingerprint!) 
@@ -209,43 +209,14 @@ function Group(props: PropsForComponent) {
             </div>
             { // Control panel for group
                 props.app.flags.editMode ? 
-                    <>
-                        <button onClick={() => setNewElement({ parentGroup: props.group._id, type: ContentType.TEXT })}>Add text</button>
-                        <button onClick={() => setNewElement({ parentGroup: props.group._id, type: ContentType.LINK })}>Add link</button>
-                        <button onClick={() => setNewElement({ parentGroup: props.group._id, type: ContentType.DEADLINE })}>Add deadline</button>
-                        <GroupForm
-                            key={uuid()}
-                            forRoot={false}
-                            parentId={props.group._id}
-                            newGroup={newGroup}
-                            createGroup={(isSubGroup: boolean) => setNewGroup({
-                                parentGroup: props.group._id,
-                                name: "",
-                                isSubGroup: isSubGroup
-                            })}
-                            submitGroup={(name) => onSubmitGroup(name, newGroup!, props.app.fingerprint!)}
-                        />
-                        {props.group.depth > 1 ?
-                            <button onClick={() => deleteGroup(props.group._id, props.app.fingerprint!)}>Delete this group</button>
-                            : null
-                        }
-                        <div>
-                            <button onClick={() => 
-                                updateGroup(
-                                    props.group._id, 
-                                    "split", 
-                                    !props.group.split,
-                                    props.app.fingerprint!)}
-                                >{props.group.split ? "Disable" : "Enable"} split</button>
-                            <button onClick={() => 
-                                updateGroup(
-                                    props.group._id, 
-                                    "column", 
-                                    !props.group.column, 
-                                    props.app.fingerprint!)}
-                                >{props.group.column ? "Disable" : "Enable"} column</button>
-                        </div>
-                    </> : null
+                    <GroupButtonPanel 
+                        group={props.group}
+                        newGroup={newGroup}
+                        updateGroup={updateGroup}
+                        setNewGroup={setNewGroup}
+                        setNewElement={setNewElement}
+                        fingerprint={props.app.fingerprint!}
+                    /> : null
             }
         </div>
     )

diff --git a/client/src/components/templates/content_rendering/GroupButtonPanel.css b/client/src/components/templates/content_rendering/GroupButtonPanel.css
@@ -0,0 +1,27 @@
+
+.GroupButtonContainer {
+    display: grid;
+    justify-content: center;
+}
+
+.GroupButtonContainer div {
+    margin: 0.25rem 0;
+}
+
+.GroupButtonContainer div button {
+    margin: 0.1rem
+}
+
+.GroupButtonContainerNewContent {
+
+}
+
+.GroupButtonContainerOptions {
+    display: flex;
+    justify-content: center;
+}
+
+.GroupButtonContainerDeleteGroup {
+    display: flex;
+    justify-content: center;
+}
diff --git a/client/src/components/templates/content_rendering/GroupButtonPanel.tsx b/client/src/components/templates/content_rendering/GroupButtonPanel.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import GroupForm from './GroupForm'
+import { v4 as uuid } from "uuid"
+import { deleteGroup, onSubmitGroup, updateGroup } from 'functions/contentRequests'
+import { ContentType } from 'components/utilities/contentTypes'
+import "./GroupButtonPanel.css"
+
+export default function GroupButtonPanel(props: PropForComponent) {
+    return (
+        <div className="GroupButtonContainer">
+            <div className="GroupButtonContainerNewContent">
+                <button onClick={() => props.setNewElement({ parentGroup: props.group._id, type: ContentType.TEXT })}>Add text</button>
+                <button onClick={() => props.setNewElement({ parentGroup: props.group._id, type: ContentType.LINK })}>Add link</button>
+                <button onClick={() => props.setNewElement({ parentGroup: props.group._id, type: ContentType.DEADLINE })}>Add deadline</button>
+                <GroupForm
+                    key={uuid()}
+                    forRoot={false}
+                    parentId={props.group._id}
+                    newGroup={props.newGroup}
+                    createGroup={(isSubGroup: boolean) => props.setNewGroup({
+                        parentGroup: props.group._id,
+                        name: "",
+                        isSubGroup: isSubGroup
+                    })}
+                    submitGroup={(name) => onSubmitGroup(name, props.newGroup, props.fingerprint)}
+                />
+            </div>
+            <div className="GroupButtonContainerOptions">
+                <button onClick={() => 
+                    updateGroup(
+                        props.group._id, 
+                        "split", 
+                        !props.group.split,
+                        props.fingerprint!)}
+                    >{props.group.split ? "Disable" : "Enable"} split</button>
+                <button onClick={() => 
+                    updateGroup(
+                        props.group._id, 
+                        "column", 
+                        !props.group.column, 
+                        props.fingerprint!)}
+                    >{props.group.column ? "Disable" : "Enable"} column</button>
+            </div>
+            {props.group.depth > 1 ?
+                <div className="GroupButtonContainerDeleteGroup">
+                    <button onClick={() => deleteGroup(props.group._id, props.fingerprint)}>Delete this group</button>
+                </div> : null
+            }
+        </div>
+    )
+}
+
+interface PropForComponent {
+    group: Group,
+    fingerprint: string,
+    newGroup?: {
+        parentGroup: string,
+        name: string,
+        isSubGroup: boolean
+    },
+    updateGroup: (id: string, setting: "split" | "column" | "placement", value: number | boolean, fingerprint: string) => void,
+    setNewElement: (data: {
+        parentGroup: string,
+        type: ContentType
+    }) => void,
+    setNewGroup: (data: {
+        parentGroup: string,
+        name: string,
+        isSubGroup: boolean
+    }) => void
+}
diff --git a/client/src/components/templates/content_rendering/RenderData.css b/client/src/components/templates/content_rendering/RenderData.css
@@ -1,15 +1,5 @@
 @import "../../root.css";
 
-.tempNewFieldsWrapper {
-	width: 100%;
-}
-
-.tempNewFieldsContainer {
-	display: grid;
-	margin: 0 auto;
-	width: 30rem;
-}
-
 .DataRendererWrapper {
 	width: 100%;
 }

diff --git a/client/src/components/templates/content_rendering/TemporaryFields.css b/client/src/components/templates/content_rendering/TemporaryFields.css
@@ -0,0 +1,17 @@
+.tempNewFieldsWrapper {
+	width: 100%;
+}
+
+.tempNewFieldsContainer {
+	display: grid;
+	margin: 0 auto;
+	max-width: 10rem;
+}
+
+.temporaryLabel {
+    color: #fff;
+}
+
+.temporaryField::placeholder {
+    color: #fff;
+}
diff --git a/client/src/components/templates/content_rendering/TemporaryFields.tsx b/client/src/components/templates/content_rendering/TemporaryFields.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Moment from "moment"
 import { ContentType } from 'components/utilities/contentTypes'
+import "./TemporaryFields.css"
 
 export default class TemporaryFields extends Component<PropsForComponent, StateForComponent> {
 
@@ -52,8 +53,9 @@ export default class TemporaryFields extends Component<PropsForComponent, StateF
 		return (
 			<div className="tempNewFieldsWrapper">
 				<div className="tempNewFieldsContainer">
-					<label htmlFor="fieldOne">{this.state.type === "TEXT" ? "Title" : this.state.type === "LINK" ? "Link" : "Text"}</label>
+					<label className="temporaryLabel" htmlFor="fieldOne">{this.state.type === "TEXT" ? "Title" : this.state.type === "LINK" ? "Link" : "Text"}</label>
 					<input
+						className="editModeInputField temporaryField"
 						name="fieldOne"
 						placeholder={this.state.type === "TEXT" ? "New title" : "New display text"}
 						onChange={(event) => this._checkTemporaryField(event, "first")}
@@ -68,8 +70,9 @@ export default class TemporaryFields extends Component<PropsForComponent, StateF
 						}}>Deadline is not formatted correctly</p>
 						: null
 					}
-					<label htmlFor="fieldTwo">{this.state.type === "TEXT" ? "Text" : this.state.type === "LINK" ? "Link" : "Deadline (YYYY-MM-DD HH:mm)"}</label>
+					<label className="temporaryLabel" htmlFor="fieldTwo">{this.state.type === "TEXT" ? "Text" : this.state.type === "LINK" ? "Link" : "Deadline (YYYY-MM-DD HH:mm)"}</label>
 					<input
+						className="editModeInputField temporaryField"
 						name="fieldTwo" placeholder={this.state.type === "TEXT" ? "New text" : this.state.type === "LINK" ? "New link" : "YYYY-MM-DD HH:mm"}
 						onChange={(event) => this._checkTemporaryField(event, "second")}
 						value={this.state.fieldTwo}

diff --git a/client/src/functions/contentRequests.ts b/client/src/functions/contentRequests.ts
@@ -83,9 +83,9 @@ export async function onSubmitGroup(name: string, newGroup: {
     parentGroup: string,
     name: string,
     isSubGroup: boolean
-}, fingerprint: string) {
+} | undefined, fingerprint: string) {
 
-    if (!newGroup?.parentGroup)
+    if (!newGroup || !newGroup?.parentGroup)
         return
 
     let submitObject: {