refactor: move state for widget-tabs to app

.gitignore

@@ -3,4 +3,5 @@ node_modules
 /*.log
 *.lock
 
-package-lock.json
+package-lock.json
+.firebase

src/components/app.js

@@ -1,15 +1,34 @@
 import { Component } from 'preact'
 import Button from './button'
 import WidgetModal from './widget-modal'
-import { useContext, useState } from 'preact/compat'
+import { useContext, useEffect, useState } from 'preact/compat'
 import { LocaleStore } from '../store/locale'
 import LanguageSelect from './language-select'
 import WidgetTabs from './widget-tabs'
+import { TabsEnum } from '../constants/tabs'
+
+const DEFAULT_ACTIVE_TAB = TabsEnum.FILE
+const DEFAULT_TABS = Object.values(TabsEnum)
 
 export default class App extends Component {
   render(props) {
     const [isOpen, setIsOpen] = useState()
     const {state: {translate: t}} = useContext(LocaleStore)
+    const [activeTab, setActiveTab] = useState(props.activeTab || DEFAULT_ACTIVE_TAB)
+    const [tabs, setTabs] = useState(props.tabs || DEFAULT_TABS)
+
+    useEffect(() => {
+      props.tabs && setTabs(props.tabs)
+    }, [props.tabs])
+
+    useEffect(() => {
+      props.activeTab && setActiveTab(props.activeTab)
+    }, [props.activeTab])
+
+    const onClickTab = tab => e => {
+      e.preventDefault()
+      setActiveTab(tab)
+    }
 
     return (
       <div id="app">
@@ -18,8 +37,9 @@ export default class App extends Component {
 
         <WidgetModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
           <WidgetTabs
-            activeTab={props.activeTab}
-            tabs={props.tabs}
+            activeTab={activeTab}
+            tabs={tabs}
+            onClick={onClickTab}
           />
         </WidgetModal>
       </div>

src/components/widget-tabs/index.js

@@ -1,44 +1,19 @@
-import { useEffect, useState } from 'preact/compat'
 import Tabs from '../tabs'
 import TabList from '../tab-list'
 import TabButton from '../tab-button'
 import TabPanel from '../tab-panel'
-import { TabsEnum } from '../../constants/tabs'
 
-const DEFAULT_ACTIVE_TAB = TabsEnum.FILE
-const DEFAULT_TABS = Object.values(TabsEnum)
-
-const WidgetTabs = props => {
-  const [activeTab, setActiveTab] = useState(props.activeTab || DEFAULT_ACTIVE_TAB)
-  const [tabs, setTabs] = useState(props.tabs || DEFAULT_TABS)
-
-  useEffect(() => {
-    setTabs(props.tabs)
-  }, [props.tabs])
-
-  useEffect(() => {
-    setActiveTab(props.activeTab)
-  }, [props.activeTab])
-
-  const onClickTab = (tab) => {
-    return e => {
-      e.preventDefault()
-      setActiveTab(tab)
-    }
-  }
-
-  return (
-    <Tabs>
-      <TabList>
-        {tabs.map((tab) => (
-          <TabButton tab={tab} onClick={onClickTab(tab)} isActive={tab === activeTab}>
-            {tab}
-          </TabButton>
-        ))}
-      </TabList>
-      <TabPanel activeTab={activeTab} />
-    </Tabs>
-  )
-}
+const WidgetTabs = ({tabs, activeTab, onClick}) => (
+  <Tabs>
+    <TabList>
+      {tabs.map((tab) => (
+        <TabButton tab={tab} onClick={onClick(tab)} isActive={tab === activeTab}>
+          {tab}
+        </TabButton>
+      ))}
+    </TabList>
+    <TabPanel activeTab={activeTab} />
+  </Tabs>
+)
 
 export default WidgetTabs