flow: real resources!

src/client/app.jsx

@@ -12,6 +12,8 @@ import Sidebar from './sidebar';
 import SidebarIcons from './sidebar-icons';
 import {
   activeResourceUriSelector,
+  activeSidebarIndexSelector,
+  isSidebarExpandedSelector,
   resourceUrisSelector,
 } from './state';
 import {all as allTypeRenderers} from './type-renderers.scwp';
@@ -24,9 +26,9 @@ const typeRenderMap = () => Object.values(allTypeRenderers()).reduce((r, M) => {
 const App = () => {
   const [typeRenderers] = useState(typeRenderMap());
   const activeResourceUri = useSelector(activeResourceUriSelector);
+  const activeSidebarIndex = useSelector(activeSidebarIndexSelector);
+  const isSidebarExpanded = useSelector(isSidebarExpandedSelector);
   const resourceUris = useSelector(resourceUrisSelector);
-  const [activeSidebar, setActiveSidebar] = useState(0);
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
   return (
     <div className="app">
       <TypeRenderersContext.Provider value={typeRenderers}>
@@ -35,8 +37,8 @@ const App = () => {
             className="sidebar-icons-wrapper pane"
           >
             <SidebarIcons
-              active={[activeSidebar, setActiveSidebar]}
-              isExpanded={[isSidebarExpanded, setIsSidebarExpanded]}
+              activeIndex={activeSidebarIndex}
+              isExpanded={isSidebarExpanded}
             />
           </div>
           <div

src/client/app.scss

@@ -21,9 +21,11 @@
 }
 
 .sidebar-wrapper {
+  display: none;
   max-width: calc(100% - 4em);
   width: 0;
   &.expanded {
+    display: block;
     width: 24em;
   }
 }

src/client/sidebar-icons.jsx

@@ -1,7 +1,13 @@
 import {compose} from '@avocado/core';
 import classnames from 'classnames';
 import contempo from 'contempo';
-import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {useDispatch} from 'react-redux';
+
+import {
+  setIsSidebarExpanded,
+} from './state';
 
 const decorate = compose(
   contempo(require('./sidebar-icons.raw.scss')),
@@ -9,21 +15,22 @@ const decorate = compose(
 
 const SidebarIcons = (props) => {
   const {
-    active: [activeSidebar, setActiveSidebar],
-    isExpanded: [isSidebarExpanded, setIsSidebarExpanded],
+    activeIndex,
+    isExpanded,
   } = props;
+  const dispatch = useDispatch();
   return (
     <div className="sidebar-icons">
       <button
         className={classnames(
           'icon',
           'files',
-          {active: 0 === activeSidebar},
-          {expanded: 0 === activeSidebar && isSidebarExpanded},
+          {active: 0 === activeIndex},
+          {expanded: 0 === activeIndex && isExpanded},
         )}
         onClick={() => {
-          if (0 === activeSidebar) {
-            setIsSidebarExpanded(!isSidebarExpanded);
+          if (0 === activeIndex) {
+            dispatch(setIsSidebarExpanded(!isExpanded));
           }
         }}
         type="button"
@@ -42,6 +49,8 @@ const SidebarIcons = (props) => {
 };
 
 SidebarIcons.propTypes = {
+  activeIndex: PropTypes.number.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
 };
 
-export default decorate(SidebarIcons);
+export default decorate(SidebarIcons);

src/client/sidebar.jsx

@@ -97,4 +97,4 @@ const Sidebar = () => {
 Sidebar.propTypes = {
 };
 
-export default decorate(Sidebar);
+export default decorate(Sidebar);

src/client/state.js

@@ -11,9 +11,14 @@ export const activeResourceUriSelector = createSelector(
   (app) => app.activeResourceUri,
 );
 
-export const sidebarIsOpenedSelector = createSelector(
+export const activeSidebarIndexSelector = createSelector(
   appSelector,
-  (app) => app.sidebarIsOpened,
+  (app) => app.activeSidebarIndex,
+);
+
+export const isSidebarExpandedSelector = createSelector(
+  appSelector,
+  (app) => app.isSidebarExpanded,
 );
 
 export const resourceUrisSelector = createSelector(
@@ -25,8 +30,9 @@ const slice = createSlice({
   name: 'app',
   initialState: {
     activeResourceUri: '',
+    activeSidebarIndex: 0,
+    isSidebarExpanded: false,
     resourceUris: [],
-    sidebarIsOpened: false,
   },
   reducers: {
     setActiveResourceUri: (state, {payload: uri}) => {
@@ -35,15 +41,19 @@ const slice = createSlice({
         state.resourceUris.push(uri);
       }
     },
-    setSidebarIsOpened: (state, {payload: isOpened}) => {
-      state.sidebarIsOpened = isOpened;
+    setActiveSidebarIndex: (state, {payload: sidebarIndex}) => {
+      state.activeSidebarIndex = sidebarIndex;
+    },
+    setIsSidebarExpanded: (state, {payload: isExpanded}) => {
+      state.isSidebarExpanded = isExpanded;
     },
   },
 });
 
 export const {
   setActiveResourceUri,
-  setSidebarIsOpened,
+  setActiveSidebarIndex,
+  setIsSidebarExpanded,
 } = slice.actions;
 
 export default slice.reducer;

src/server/sockets/index.js

@@ -39,6 +39,7 @@ export function createSocketServer(httpServer) {
                   : resolve(stats.isDirectory() ? '' : filename)
               ));
             }));
+          // eslint-disable-next-line no-shadow
           Promise.all(promises).then((filenames) => {
             const resourceUris = filenames
               .filter((filename) => !!filename)
@@ -49,7 +50,6 @@ export function createSocketServer(httpServer) {
       }
     });
   });
-
   socketServer.io.use(socketSession(session()));
   return socketServer;
 }