From ebc3e97c9fdaabfc4fcd9c35525f302ad3a8cb45 Mon Sep 17 00:00:00 2001
From: Kirill Rogovoy <kirill@rogovoy.me>
Date: Sun, 25 Jul 2021 14:38:05 +0300
Subject: Move showTweaks to tweaks.tsx

---
 components/tweaks.tsx | 19 +++++++++++++++----
 pages/index.tsx       | 51 ++++++++++++++++-----------------------------------
 2 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index a082306..ab5a6a7 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -25,6 +25,7 @@ import {
   Tooltip,
   VStack,
 } from '@chakra-ui/react'
+import { useState } from 'react'
 import Scrollbars from 'react-custom-scrollbars-2'
 import { initialPhysics, initialFilter } from './config'
 
@@ -35,11 +36,22 @@ export interface TweakProps {
   setThreeDim: (newValue: boolean) => void
   filter: typeof initialFilter
   setFilter: any
-  onClose: () => void
 }
 
 export const Tweaks = (props: TweakProps) => {
-  const { physics, setPhysics, threeDim, filter, setFilter, onClose } = props
+  const { physics, setPhysics, threeDim, filter, setFilter } = props
+  const [showTweaks, setShowTweaks] = useState(true)
+
+  if (!showTweaks) {
+    return <Box position="absolute" zIndex="overlay" marginTop="2%" marginLeft="2%">
+      <IconButton
+        aria-label="Settings"
+        icon={<SettingsIcon />}
+        onClick={() => setShowTweaks(true)}
+      />
+    </Box>
+  }
+
   return (
     <Box
       zIndex="overlay"
@@ -51,7 +63,6 @@ export const Tweaks = (props: TweakProps) => {
       borderRadius="md"
       maxH={650}
       paddingBottom={5}
-      //overflowY="scroll"
     >
       <Box display="flex" justifyContent="flex-end">
         <Tooltip label="Reset settings to defaults">
@@ -62,7 +73,7 @@ export const Tweaks = (props: TweakProps) => {
             colorScheme="purple"
           />
         </Tooltip>
-        <CloseButton onClick={onClose} />
+        <CloseButton onClick={() => setShowTweaks(false)} />
       </Box>
       <Scrollbars
         autoHeight
diff --git a/pages/index.tsx b/pages/index.tsx
index d39db81..ded8a1c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,12 +12,7 @@ import { GraphData, NodeObject } from 'force-graph'
 import { useWindowSize } from '@react-hook/window-size'
 import { useAnimation } from '@lilib/hooks'
 
-import {
-  Button,
-  Box,
-  IconButton,
-  useTheme,
-} from '@chakra-ui/react'
+import { Button, Box, IconButton, useTheme } from '@chakra-ui/react'
 
 import { SettingsIcon } from '@chakra-ui/icons'
 import { initialPhysics, initialFilter } from '../components/config'
@@ -59,15 +54,13 @@ export default function Home() {
 export function GraphPage() {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [filter, setFilter] = usePersistantState('filter', initialFilter)
-  //  const [theme, setTheme] = useState(initialTheme)
   const [graphData, setGraphData] = useState<GraphData | null>(null)
   const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
 
   const nodeByIdRef = useRef<NodeById>({})
-  const parentNodesByFileRef = useRef<any>({}) //useRef<ParentNodesByFile>({})
   const linksByNodeIdRef = useRef<LinksByNodeId>({})
 
-  const updateGraphData = () => {
+  const fetchGraphData = () => {
     return fetch('http://localhost:35901/graph')
       .then((res) => res.json())
       .then((orgRoamGraphData: OrgRoamGraphReponse) => {
@@ -95,18 +88,17 @@ export function GraphPage() {
       const emacsNodeId = e.data
       setEmacsNodeId(emacsNodeId)
     })
-    updateGraphData()
+    fetchGraphData()
   }, [])
 
   useEffect(() => {
     if (!emacsNodeId) {
       return
     }
-    updateGraphData()
+    fetchGraphData()
   }, [emacsNodeId])
 
   const [threeDim, setThreeDim] = useState(false)
-  const [showTweaks, setShowTweaks] = useState(true)
 
   if (!graphData) {
     return null
@@ -114,29 +106,17 @@ export function GraphPage() {
 
   return (
     <Box display="flex" justifyContent="space-between">
-      {showTweaks ? (
-        <Tweaks
-          {...{
-            physics,
-            setPhysics,
-            threeDim,
-            setThreeDim,
-            filter,
-            setFilter,
-          }}
-          onClose={() => {
-            setShowTweaks(false)
-          }}
-        />
-      ) : (
-        <Box position="absolute" zIndex="overlay" marginTop="2%" marginLeft="2%">
-          <IconButton
-            aria-label="Settings"
-            icon={<SettingsIcon />}
-            onClick={() => setShowTweaks(true)}
-          />
-        </Box>
-      )}
+      <Tweaks
+        {...{
+          physics,
+          setPhysics,
+          threeDim,
+          setThreeDim,
+          filter,
+          setFilter,
+        }}
+      />
+
       <Button
         position="absolute"
         marginRight="2%"
@@ -148,6 +128,7 @@ export function GraphPage() {
       >
         {threeDim ? '3D' : '2D'}{' '}
       </Button>
+      
       <Graph
         nodeById={nodeByIdRef.current!}
         linksByNodeId={linksByNodeIdRef.current!}
-- 
cgit v1.2.3