From e1cba6d07c779ed5a9380b35e5255557bc3ec595 Mon Sep 17 00:00:00 2001
From: tscz <tscz@users.noreply.github.com>
Date: Sun, 19 Jan 2020 14:55:38 +0900
Subject: [PATCH]  #12 Move add section button and deactivate buttons to
 non-implemented functions

---
 src/pages/structure/structurePage.tsx | 49 +++++++++++++++++++++------
 src/states/analysis/analysisSlice.ts  |  3 +-
 src/views/structure/structureView.tsx | 21 +-----------
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/pages/structure/structurePage.tsx b/src/pages/structure/structurePage.tsx
index fc9e39c..7d21da5 100644
--- a/src/pages/structure/structurePage.tsx
+++ b/src/pages/structure/structurePage.tsx
@@ -10,6 +10,7 @@ import {
   Popover,
   Tooltip
 } from "@material-ui/core";
+import AddIcon from "@material-ui/icons/Add";
 import LoopIcon from "@material-ui/icons/Loop";
 import PauseIcon from "@material-ui/icons/Pause";
 import PlayArrowIcon from "@material-ui/icons/PlayArrow";
@@ -34,6 +35,7 @@ import {
   triggeredPlay,
   updatedPlaybackSettings
 } from "../../states/audio/audioSlice";
+import { DialogType, openedDialog } from "../../states/dialog/dialogsSlice";
 import {
   enabledSyncFirstMeasureStart,
   LoadingStatus
@@ -63,6 +65,7 @@ interface PropsFromDispatch {
   enabledSyncFirstMeasureStart: typeof enabledSyncFirstMeasureStart;
   updatedRhythm: typeof updatedRhythm;
   updatedPlaybackSettings: typeof updatedPlaybackSettings;
+  openedDialog: typeof openedDialog;
 }
 
 interface Props {}
@@ -214,11 +217,16 @@ class StructurePage extends React.Component<AllProps, State> {
                   />
                 )}
 
-                <WaveformControlButton title="Loop" icon={<LoopIcon />} />
+                <WaveformControlButton
+                  title="Loop"
+                  icon={<LoopIcon />}
+                  disabled={true}
+                />
                 <WaveformControlButton
                   title="Metronome"
                   icon={<TimerIcon />}
                   onClick={e => this.handleClick(e)}
+                  disabled={true}
                 />
                 <Popover
                   style={{ height: "400px" }}
@@ -253,7 +261,23 @@ class StructurePage extends React.Component<AllProps, State> {
         topRight={
           <View title="Song Measures" body={<StructureNavigationView />}></View>
         }
-        bottom={<View title="Song Structure" body={<StructureView />}></View>}
+        bottom={
+          <View
+            title="Song Structure"
+            action={
+              <>
+                <WaveformControlButton
+                  title="Add section"
+                  icon={<AddIcon />}
+                  onClick={() =>
+                    this.props.openedDialog(DialogType.ADD_SECTION)
+                  }
+                />
+              </>
+            }
+            body={<StructureView />}
+          ></View>
+        }
       ></ContentLayout>
     );
   }
@@ -262,17 +286,21 @@ class StructurePage extends React.Component<AllProps, State> {
 const WaveformControlButton = (props: {
   title: string;
   icon: ReactElement;
+  disabled?: boolean;
   onClick?: (e?: any) => void;
 }) => {
   return (
     <Tooltip title={props.title}>
-      <IconButton
-        onClick={props.onClick}
-        size="small"
-        style={{ marginTop: "8px", marginRight: "5px" }}
-      >
-        {props.icon}
-      </IconButton>
+      <>
+        <IconButton
+          onClick={props.onClick}
+          size="small"
+          style={{ marginTop: "8px", marginRight: "5px" }}
+          disabled={props.disabled}
+        >
+          {props.icon}
+        </IconButton>
+      </>
     </Tooltip>
   );
 };
@@ -297,6 +325,7 @@ const mapDispatchToProps = {
   triggeredPause,
   enabledSyncFirstMeasureStart,
   updatedRhythm,
-  updatedPlaybackSettings
+  updatedPlaybackSettings,
+  openedDialog
 };
 export default connect(mapStateToProps, mapDispatchToProps)(StructurePage);
diff --git a/src/states/analysis/analysisSlice.ts b/src/states/analysis/analysisSlice.ts
index 956598d..024ff6c 100644
--- a/src/states/analysis/analysisSlice.ts
+++ b/src/states/analysis/analysisSlice.ts
@@ -81,7 +81,8 @@ const analysisSlice = createSlice({
           state.audioDuration
         );
 
-        state.sections = undefinedSection(state.measures.allIds.length - 1);
+        if (state.sections.allIds.length === 0)
+          state.sections = undefinedSection(state.measures.allIds.length - 1);
       }),
   reducers: {
     addedSection(state, action: PayloadAction<Section>) {
diff --git a/src/views/structure/structureView.tsx b/src/views/structure/structureView.tsx
index 249d906..19a2a90 100644
--- a/src/views/structure/structureView.tsx
+++ b/src/views/structure/structureView.tsx
@@ -8,7 +8,6 @@ import {
   TableHead,
   TableRow
 } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
 import RemoveIcon from "@material-ui/icons/Remove";
 import React, { Component } from "react";
 import { connect } from "react-redux";
@@ -23,7 +22,6 @@ import {
   SectionType,
   updatedSection
 } from "../../states/analysis/analysisSlice";
-import { DialogType, openedDialog } from "../../states/dialog/dialogsSlice";
 import { ApplicationState, NormalizedObjects } from "../../states/store";
 import ArrayUtil from "../../util/ArrayUtil";
 
@@ -36,7 +34,6 @@ interface PropsFromDispatch {
   addedSection: typeof addedSection;
   updatedSection: typeof updatedSection;
   removedSection: typeof removedSection;
-  openedDialog: typeof openedDialog;
 }
 
 type AllProps = PropsFromState & PropsFromDispatch;
@@ -153,21 +150,6 @@ class StructureView extends Component<AllProps> {
                 </TableRow>
               );
             })}
-            <TableRow key="last">
-              <TableCell component="th" scope="row">
-                <IconButton
-                  onClick={() =>
-                    this.props.openedDialog(DialogType.ADD_SECTION)
-                  }
-                  size="small"
-                >
-                  <AddIcon></AddIcon>
-                </IconButton>
-              </TableCell>
-              <TableCell />
-              <TableCell />
-              <TableCell />
-            </TableRow>
           </TableBody>
         </Table>
       </TableContainer>
@@ -185,7 +167,6 @@ const mapStateToProps = ({ analysis }: ApplicationState) => {
 const mapDispatchToProps = {
   addedSection,
   updatedSection,
-  removedSection,
-  openedDialog
+  removedSection
 };
 export default connect(mapStateToProps, mapDispatchToProps)(StructureView);