From 1030135c9b87221abe39ef198d0ab766d4591ba5 Mon Sep 17 00:00:00 2001
From: Iku-turso <mikko.aspiala@gmail.com>
Date: Tue, 16 Aug 2022 12:29:39 +0300
Subject: [PATCH] Format code to make ongoing refactoring a bit easier

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
---
 .../components/layout/top-bar/top-bar.tsx     | 172 ++++++++++--------
 1 file changed, 92 insertions(+), 80 deletions(-)

diff --git a/src/renderer/components/layout/top-bar/top-bar.tsx b/src/renderer/components/layout/top-bar/top-bar.tsx
index b5f79623f2..af46c5d7d0 100644
--- a/src/renderer/components/layout/top-bar/top-bar.tsx
+++ b/src/renderer/components/layout/top-bar/top-bar.tsx
@@ -33,98 +33,110 @@ interface Dependencies {
   watchHistoryState: () => () => void;
 }
 
-const NonInjectedTopBar = observer(({
-  items,
-  items2,
-  isWindows,
-  isLinux,
-  closeWindow,
-  minimizeWindow,
-  toggleMaximizeWindow,
-  watchHistoryState,
-}: Dependencies) => {
-  const elem = useRef<HTMLDivElement | null>(null);
+const NonInjectedTopBar = observer(
+  ({
+    items,
+    items2,
+    isWindows,
+    isLinux,
+    closeWindow,
+    minimizeWindow,
+    toggleMaximizeWindow,
+    watchHistoryState,
+  }: Dependencies) => {
+    const elem = useRef<HTMLDivElement | null>(null);
 
-  const windowSizeToggle = (evt: React.MouseEvent) => {
-    if (elem.current === evt.target) {
-      toggleMaximizeWindow();
-    }
-  };
+    const windowSizeToggle = (evt: React.MouseEvent) => {
+      if (elem.current === evt.target) {
+        toggleMaximizeWindow();
+      }
+    };
 
-  useEffect(() => watchHistoryState(), []);
+    useEffect(() => watchHistoryState(), []);
 
-  return (
-    <div
-      className={styles.topBar}
-      onDoubleClick={windowSizeToggle}
-      ref={elem}>
-      <div className={styles.items}>
-        {items2.get().map((item) => {
-          const Component = item.Component;
+    return (
+      <div
+        className={styles.topBar}
+        onDoubleClick={windowSizeToggle}
+        ref={elem}
+      >
+        <div className={styles.items}>
+          {items2.get().map((item) => {
+            const Component = item.Component;
 
-          return <Component key={item.id} />;
-        })}
+            return <Component key={item.id} />;
+          })}
+        </div>
+
+        <div className={styles.items}>
+          {renderRegisteredItems(items.get())}
+
+          {(isWindows || isLinux) && (
+            <div
+              className={cssNames(styles.windowButtons, {
+                [styles.linuxButtons]: isLinux,
+              })}
+            >
+              <div
+                className={styles.minimize}
+                data-testid="window-minimize"
+                onClick={minimizeWindow}
+              >
+                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                  <rect
+                    fill="currentColor"
+                    width="10"
+                    height="1"
+                    x="1"
+                    y="9" />
+                </svg>
+              </div>
+
+              <div
+                className={styles.maximize}
+                data-testid="window-maximize"
+                onClick={toggleMaximizeWindow}
+              >
+                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                  <rect
+                    width="9"
+                    height="9"
+                    x="1.5"
+                    y="1.5"
+                    fill="none"
+                    stroke="currentColor"
+                  />
+                </svg>
+              </div>
+
+              <div
+                className={styles.close}
+                data-testid="window-close"
+                onClick={closeWindow}
+              >
+                <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
+                  <polygon
+                    fill="currentColor"
+                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                  />
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-      <div className={styles.items}>
-        {renderRegisteredItems(items.get())}
-        {(isWindows || isLinux) && (
-          <div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
-            <div
-              className={styles.minimize}
-              data-testid="window-minimize"
-              onClick={minimizeWindow}
-            >
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                <rect
-                  fill="currentColor"
-                  width="10"
-                  height="1"
-                  x="1"
-                  y="9"
-                />
-              </svg>
-            </div>
-            <div
-              className={styles.maximize}
-              data-testid="window-maximize"
-              onClick={toggleMaximizeWindow}
-            >
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                <rect
-                  width="9"
-                  height="9"
-                  x="1.5"
-                  y="1.5"
-                  fill="none"
-                  stroke="currentColor"
-                />
-              </svg>
-            </div>
-            <div
-              className={styles.close}
-              data-testid="window-close"
-              onClick={closeWindow}
-            >
-              <svg shapeRendering="crispEdges" viewBox="0 0 12 12">
-                <polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1" />
-              </svg>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
-const renderRegisteredItems = (items: TopBarRegistration[]) => (
+const renderRegisteredItems = (items: TopBarRegistration[]) =>
   items.map((registration, index) => {
     if (!registration?.components?.Item) {
       return null;
     }
 
     return <registration.components.Item key={index} />;
-  })
-);
+  });
 
 export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
   getProps: (di) => ({