current widget selector

api/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  arrowParen: 'avoid',
+  printWidth: 120,
+};

web/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  arrowParen: 'avoid',
+  printWidth: 120,
+};

web/src/App.js

@@ -1,13 +1,17 @@
 import React from "react";
 import useFetch from "./useFetch";
 import "./index.css";
-import Screen from './Screen'
-
+import Screen from "./Screen";
+import {CurrentWidgetProvider} from "./widgets/useCurrentWidget";
 
 function App() {
   const resp = useFetch("http://localhost:3000", {});
   console.log("FETCH data", resp.data);
-  return <Screen/>;
+  return (
+    <CurrentWidgetProvider>
+      <Screen />
+    </CurrentWidgetProvider>
+  );
 }
 
 export default App;

web/src/Screen.js

@@ -2,7 +2,7 @@ import React from "react";
 import theme from "./theme";
 import styled from "styled-components";
 import FilesTabsPanel from "./FilesTabsPanel";
-import SideIconPanel from "./SideIconPanel";
+import WidgetIconPanel from "./widgets/WidgetIconPanel";
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -54,7 +54,7 @@ export default function Screen({ children }) {
   return (
     <>
       <IconBar>
-        <SideIconPanel />
+        <WidgetIconPanel />
       </IconBar>
       <LeftPanel></LeftPanel>
       <TabsPanel>

web/src/SideIconPanel.js

@@ -1,47 +0,0 @@
-import React from "react";
-import theme from "./theme";
-import styled from "styled-components";
-import { FontIcon } from "./icons";
-
-const IconWrapper = styled.div`
-  color: ${theme.widgetMenu.iconFontColor};
-  font-size: ${theme.widgetMenu.iconFontSize};
-  height: ${theme.widgetMenu.iconSize}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    background-color: ${theme.widgetMenu.backgroundHover};
-  }
-  background-color: ${props =>
-    props.isSelected ? theme.widgetMenu.backgroundSelected : "inherit"};
-`;
-
-export default function SideIconPanel() {
-  const widgets = [
-    {
-      icon: "fa-database"
-    },
-    {
-      icon: "fa-table",
-      isSelected: true
-    },
-    {
-      icon: "fa-file-alt"
-    },
-    {
-      icon: "fa-cog"
-    },
-    {
-      icon: "fa-check"
-    }
-  ];
-
-  return widgets.map(({ icon, isSelected }) => (
-    <IconWrapper key={icon} isSelected={isSelected}>
-      <div>
-        <FontIcon name={icon} />
-      </div>
-    </IconWrapper>
-  ));
-}

web/src/widgets/WidgetIconPanel.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import theme from '../theme';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import useCurrentWidget, { useSetCurrentWidget } from './useCurrentWidget';
+
+const IconWrapper = styled.div`
+  color: ${theme.widgetMenu.iconFontColor};
+  font-size: ${theme.widgetMenu.iconFontSize};
+  height: ${theme.widgetMenu.iconSize}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => (props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit')};
+  &:hover {
+    background-color: ${theme.widgetMenu.backgroundHover};
+  }
+`;
+
+export default function WidgetIconPanel() {
+  const widgets = [
+    {
+      icon: 'fa-database',
+      name: 'database',
+    },
+    {
+      icon: 'fa-table',
+      name: 'table',
+    },
+    {
+      icon: 'fa-file-alt',
+      name: 'file',
+    },
+    {
+      icon: 'fa-cog',
+      name: 'settings',
+    },
+    // {
+    //   icon: 'fa-check',
+    //   name: 'settings',
+    // },
+  ];
+
+  const currentWidget = useCurrentWidget();
+  const setCurrentWidget = useSetCurrentWidget();
+
+  return widgets.map(({ icon, name }) => (
+    <IconWrapper key={icon} isSelected={name === currentWidget} onClick={() => setCurrentWidget(name)}>
+      <FontIcon name={icon} />
+    </IconWrapper>
+  ));
+}

web/src/widgets/useCurrentWidget.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const CurrentWidgetProviderContext = React.createContext();
+
+export function CurrentWidgetProvider({ children }) {
+  const [currentWidget, setCurrentWidget] = React.useState('database');
+  return (
+    <CurrentWidgetProviderContext.Provider value={[currentWidget, setCurrentWidget]}>
+      {children}
+    </CurrentWidgetProviderContext.Provider>
+  );
+}
+
+export default function useCurrentWidget() {
+  return React.useContext(CurrentWidgetProviderContext)[0];
+}
+
+export function useSetCurrentWidget() {
+  return React.useContext(CurrentWidgetProviderContext)[1];
+}