fix: make EditorMode store

hackforplay · Nov 17, 2019 · 9e6006d · 9e6006d
1 parent ec7ab8e
commit 9e6006d
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 97 deletions.
diff --git a/src/FloorView.tsx b/src/FloorView.tsx
@@ -4,22 +4,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Icon } from './Button';
 import flex from './css/flex.scss';
 import floor from './css/floor-view.scss';
-import { EditorMode } from './Root';
-import { actions, SS } from './store';
+import { actions, EditorMode, SS } from './store';
 
-export interface FloorViewProps {
-  setEditorMode: React.Dispatch<React.SetStateAction<EditorMode>>;
-}
+export interface FloorViewProps {}
 
 export interface FloorItemProps {
   appendable?: boolean;
   color: string;
   index: number;
   selected?: boolean;
-  setEditorMode: React.Dispatch<React.SetStateAction<EditorMode>>;
 }
 
-export function FloorView({ setEditorMode }: FloorViewProps) {
+export function FloorView({  }: FloorViewProps) {
   const selected = useSelector((state: SS) => state.floor.selected);
 
   return (
@@ -29,7 +25,6 @@ export function FloorView({ setEditorMode }: FloorViewProps) {
           key={i}
           index={i + 1}
           color={color}
-          setEditorMode={setEditorMode}
           selected={i + 1 === selected}
           appendable={i + 1 === array.length}
         />
@@ -42,14 +37,13 @@ export function FloorItem({
   appendable,
   color,
   index,
-  selected,
-  setEditorMode
+  selected
 }: FloorItemProps) {
   const dispatch = useDispatch();
 
   const onClick = React.useCallback(() => {
     dispatch(actions.setFloor(index));
-    setEditorMode(EditorMode.Map);
+    dispatch(actions.setEditorMode(EditorMode.Map));
   }, [index]);
 
   return (

diff --git a/src/FooterPane.tsx b/src/FooterPane.tsx
@@ -1,22 +1,22 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
 import { IconButton } from './Button';
 import flex from './css/flex.scss';
 import footer from './css/footer.scss';
 import { Asset } from './dummy-assets';
 import { Scroller } from './Scroller';
+import { actions, EditorMode } from './store';
 
 export interface FooterPaneProps {
   assets: Asset[];
   onRequestClose: () => void;
-  onSelectAsset: () => void;
   search: string;
 }
 
 export function FooterPane({
   assets,
   onRequestClose,
-  onSelectAsset,
   search
 }: FooterPaneProps) {
   if (search) {
@@ -90,7 +90,6 @@ export function FooterPane({
                     key={asset.id}
                     asset={asset}
                     onRequestClose={onRequestClose}
-                    onSelectAsset={onSelectAsset}
                   />
                 ))}
             </div>
@@ -104,16 +103,12 @@ export function FooterPane({
 export interface AssetButtonProps {
   asset: Asset;
   onRequestClose: () => void;
-  onSelectAsset: () => void;
 }
 
-export function AssetButton({
-  asset,
-  onRequestClose,
-  onSelectAsset
-}: AssetButtonProps) {
+export function AssetButton({ asset, onRequestClose }: AssetButtonProps) {
+  const dispatch = useDispatch();
   const click = React.useCallback(() => {
-    onSelectAsset();
+    dispatch(actions.setEditorMode(EditorMode.Store));
     onRequestClose();
   }, []);
 

diff --git a/src/MapView.tsx b/src/MapView.tsx
@@ -1,36 +1,29 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button } from './Button';
 import flex from './css/flex.scss';
 import map from './css/map-view.scss';
 import selector from './css/selector.scss';
-import { EditorMode } from './Root';
 import { Scroller } from './Scroller';
-import { SS } from './store';
+import { actions, EditorMode, SS } from './store';
 
 export type Tab = 'mine' | 'official' | 'others';
 type Refs = {
   [tab in Tab]: React.RefObject<HTMLDivElement>;
 };
 export const tabs: Tab[] = ['mine', 'official', 'others'];
 
-export interface MapViewProps {
-  setEditorMode: React.Dispatch<React.SetStateAction<EditorMode>>;
-}
+export interface MapViewProps {}
 
-export function MapView({ setEditorMode }: MapViewProps) {
+export function MapView({  }: MapViewProps) {
   const [tab, setTab] = React.useState<Tab>('mine');
   const refs: Refs = {
     mine: React.useRef(null),
     official: React.useRef(null),
     others: React.useRef(null)
   };
 
-  const set = React.useCallback(() => {
-    setEditorMode(EditorMode.Code);
-  }, []);
-
   const handleScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
     const margin = 20; // safety margin for smooth scroll [px]
     const viewTop =
@@ -90,7 +83,7 @@ export function MapView({ setEditorMode }: MapViewProps) {
         {tabs.map(id => (
           <div key={id} id={id} className={map.group} ref={refs[id]}>
             {Array.from({ length: 15 }).map((_, i) => (
-              <MapViewItem key={i} onClick={set} />
+              <MapViewItem key={i} />
             ))}
           </div>
         ))}
@@ -99,11 +92,14 @@ export function MapView({ setEditorMode }: MapViewProps) {
   );
 }
 
-export interface MapViewItemProps {
-  onClick: () => void;
-}
+export interface MapViewItemProps {}
+
+export function MapViewItem({  }: MapViewItemProps) {
+  const dispatch = useDispatch();
+  const onClick = React.useCallback(() => {
+    dispatch(actions.setEditorMode(EditorMode.Code));
+  }, []);
 
-export function MapViewItem({ onClick }: MapViewItemProps) {
   return (
     <div className={map.responsive}>
       <div className={map.responsiveContent}>

diff --git a/src/StoreView.tsx b/src/StoreView.tsx
@@ -1,32 +1,31 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
 import { IconButton } from './Button';
 import './completion';
 import view from './css/code-view.scss';
 import flex from './css/flex.scss';
-import { EditorMode } from './Root';
+import { actions, EditorMode } from './store';
 
-export interface StoreViewProps {
-  setEditorMode: React.Dispatch<React.SetStateAction<EditorMode>>;
-}
+export interface StoreViewProps {}
 
-export function StoreView({ setEditorMode }: StoreViewProps) {
+export function StoreView({  }: StoreViewProps) {
   return (
     <>
       <h1>STORE VIEW</h1>
-      <Installer needPayment={false} setEditorMode={setEditorMode} />
+      <Installer needPayment={false} />
     </>
   );
 }
 
 export interface Installer {
   needPayment: boolean;
-  setEditorMode: React.Dispatch<React.SetStateAction<EditorMode>>;
 }
 
-export function Installer({ needPayment, setEditorMode }: Installer) {
+export function Installer({ needPayment }: Installer) {
+  const dispatch = useDispatch();
   const onClick = React.useCallback(() => {
-    setEditorMode(EditorMode.Code);
+    dispatch(actions.setEditorMode(EditorMode.Code));
   }, []);
 
   return (

diff --git a/src/footer.tsx b/src/footer.tsx
@@ -1,19 +1,18 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
 import { Balloon } from './Balloon';
 import { IconButton } from './Button';
 import flex from './css/flex.scss';
 import footer from './css/footer.scss';
 import { dummyAssets } from './dummy-assets';
 import { FooterPane } from './FooterPane';
+import { actions, EditorMode } from './store';
 import { Transition } from './Transition';
 
-export interface FooterProps {
-  onSelectAsset: () => void;
-  onSelectName: () => void;
-}
+export interface FooterProps {}
 
-export function Footer({ onSelectAsset, onSelectName }: FooterProps) {
+export function Footer({  }: FooterProps) {
   const [opened, setOpened] = React.useState(false);
   const close = React.useCallback(() => {
     setOpened(false);
@@ -28,12 +27,7 @@ export function Footer({ onSelectAsset, onSelectName }: FooterProps) {
         className={classNames(footer.container, flex.vertical)}
         exiting={footer.hidden}
       >
-        <FooterPane
-          assets={assets}
-          onRequestClose={close}
-          onSelectAsset={onSelectName}
-          search={search}
-        />
+        <FooterPane assets={assets} onRequestClose={close} search={search} />
       </Transition>
       <div
         className={classNames(
@@ -61,27 +55,30 @@ export function Footer({ onSelectAsset, onSelectName }: FooterProps) {
           />
         ) : (
           <>
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
+            <FooterItem />
+            <FooterItem />
             <div className={footer.divider}></div>
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
-            <FooterItem onClick={onSelectAsset} />
+            <FooterItem />
+            <FooterItem />
+            <FooterItem />
+            <FooterItem />
+            <FooterItem />
+            <FooterItem />
           </>
         )}
       </div>
     </>
   );
 }
 
-export interface FooterItemProps {
-  onClick: () => void;
-}
+export interface FooterItemProps {}
+
+export function FooterItem({  }: FooterItemProps) {
+  const dispatch = useDispatch();
+  const onClick = React.useCallback(() => {
+    dispatch(actions.setEditorMode(EditorMode.Code));
+  }, []);
 
-export function FooterItem({ onClick }: FooterItemProps) {
   return (
     <button className={footer.item} onClick={onClick}>
       <div style={{ backgroundColor: 'blue' }}></div>

diff --git a/src/root.tsx b/src/root.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 import { CodeView } from './CodeView';
 import flex from './css/flex.scss';
 import font from './css/font.scss';
@@ -8,23 +9,15 @@ import { FloorView } from './FloorView';
 import { Footer } from './Footer';
 import { Header } from './Header';
 import { MapView } from './MapView';
+import { EditorMode, SS } from './store';
 import { StoreView } from './StoreView';
 import { Transition } from './Transition';
 
-export enum EditorMode {
-  Map,
-  Store,
-  Code
-}
-
 export interface RootProps {
   code: string;
 }
 
 export function Root({ code }: RootProps) {
-  const [editorMode, setEditorMode] = React.useState<EditorMode>(
-    EditorMode.Map
-  );
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
   const [bringFront, setBringFront] = React.useState(false);
   const focusGame = React.useCallback(() => {
@@ -37,27 +30,22 @@ export function Root({ code }: RootProps) {
     setBringFront(false);
   }, []);
 
-  const openNewAsset = React.useCallback(() => {
-    setEditorMode(EditorMode.Code);
-  }, []);
-  const openStore = React.useCallback(() => {
-    setEditorMode(EditorMode.Store);
-  }, []);
+  const editorMode = useSelector((state: SS) => state.mode.editorMode);
 
   return (
     <div className={classNames(region.root, flex.vertical, font.main)}>
       <Header />
       <div className={classNames(region.outer, flex.horizontal, flex.stretch)}>
         <div className={region.floor}>
-          <FloorView setEditorMode={setEditorMode} />
+          <FloorView />
         </div>
         <div className={classNames(region.inner)}>
           <Transition
             in={editorMode === EditorMode.Map}
             className={region.mapView}
             exiting={region.exiting}
           >
-            <MapView setEditorMode={setEditorMode} />
+            <MapView />
           </Transition>
           <Transition
             in={editorMode === EditorMode.Store}
@@ -68,7 +56,7 @@ export function Root({ code }: RootProps) {
                 : region.exitingLeft
             }
           >
-            <StoreView setEditorMode={setEditorMode} />
+            <StoreView />
           </Transition>
           <Transition
             in={editorMode === EditorMode.Code}
@@ -90,7 +78,7 @@ export function Root({ code }: RootProps) {
           ></iframe>
         </div>
       </div>
-      <Footer onSelectAsset={openNewAsset} onSelectName={openStore} />
+      <Footer />
     </div>
   );
 }
diff --git a/src/store/enums.ts b/src/store/enums.ts
@@ -0,0 +1,5 @@
+export enum EditorMode {
+  Map,
+  Store,
+  Code
+}