flow: real resources!

This commit is contained in:
cha0s 2020-06-28 08:30:38 -05:00
parent 10ec12fe7f
commit 6c1e339e17
7 changed files with 66 additions and 42 deletions

View File

@ -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

View File

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

View File

@ -1,3 +1,4 @@
/* eslint-disable */
!function(root, factory) {
"object" == typeof exports && "object" == typeof module ? module.exports = factory() : "function" == typeof define && define.amd ? define([], factory) : "object" == typeof exports ? exports.ReactSortableTreeThemeFileExplorer = factory() : root.ReactSortableTreeThemeFileExplorer = factory();
}("undefined" != typeof self ? self : this, function() {

View File

@ -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);

View File

@ -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;

View File

@ -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;
}