split appbar code

2022-08-10 20:31:42 +00:00
parent 20555f642b
commit 838075c3d9
7 changed files with 286 additions and 236 deletions
--- a/app/javascript/components/Appbar/AppbarTabs.tsx
+++ b/app/javascript/components/Appbar/AppbarTabs.tsx
@@ -0,0 +1,75 @@
+import { ChartBarIcon, ClipboardListIcon } from "@heroicons/react/outline";
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import { useHistory, useLocation } from 'react-router';
+
+import { DashboardRoutePaths, QuestionRoutePaths } from "../../routes";
+import { RootState } from "../../services/store";
+import { turnOff } from "../../services/store/unsavedChanges";
+import { Dialog } from '../Dialog';
+
+export const AppbarTabs = () => {
+  const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
+  const dispatch = useDispatch()
+  const location = useLocation()
+  const history = useHistory()
+
+  const [newPath, setNewPath] = useState<string>()
+
+  const handleForcedRedirect = () => {
+    if (!newPath) return
+
+    dispatch(turnOff())
+
+    setNewPath(undefined)
+    history.push(newPath)
+  }
+
+  const handleLinkClick = (pathname: string) => {
+    if (unsavedChanges) {
+      setNewPath(pathname)
+    } else {
+      history.push(pathname)
+    }
+  }
+
+
+  const links = [{
+    icon: <ChartBarIcon className="w-6" />,
+    tabel: 'Painel',
+    pathname: DashboardRoutePaths.index,
+    isCurrent: location.pathname.includes('dashboard'),
+  },
+  {
+    icon: <ClipboardListIcon className="w-6" />,
+    tabel: 'Edição',
+    pathname: QuestionRoutePaths.index,
+    isCurrent: location.pathname.includes('question'),
+  }]
+
+  return (
+    <>
+      <Dialog
+        isOpen={!!newPath}
+        setIsOpen={(value) => setNewPath(value ? newPath : undefined)}
+        onConfirmation={handleForcedRedirect}
+        title="Modificações não Salvas"
+        text="Todas as alterações serão descartadas. Deseja continuar?"
+      />
+      <div className="h-full flex items-center pl-4">
+        {links.map((link) => (
+          <button
+            className={`h-full flex items-center px-2 mx-2 text-gray-300 hover:bg-primary-dark ${link.isCurrent ? 'underline bg-primary-dark' : ''}`}
+            key={`navbar-link-${link.pathname}`}
+            onClick={() => handleLinkClick(link.pathname)}
+          >
+            <span className="pr-2 ">
+              {link.icon}
+            </span>
+            {link.tabel}
+          </button>
+        ))}
+      </div>
+    </>
+  )
+}