feat: ✨ account switching

dfrnoch · Mar 26, 2024 · 7467747 · 7467747
1 parent 1c0e316
commit 7467747
Show file tree

Hide file tree

Showing 23 changed files with 128 additions and 111 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/.DS_Store b/.github/.DS_Store
diff --git a/src-tauri/.DS_Store b/src-tauri/.DS_Store
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/bindings.ts b/src/bindings.ts
@@ -13,7 +13,7 @@ export function getCompany(id: number | null) {
 }
 
 export function createCompany(data: CreateCompanyData) {
-  return invoke<number>("create_company", { data });
+  return invoke<Company>("create_company", { data });
 }
 
 export function migrateAndPopulate() {

diff --git a/src/i18n/dict/index.ts b/src/i18n/dict/index.ts
@@ -1,11 +1,11 @@
-import { Flatten } from '@solid-primitives/i18n'
-import { LANG } from '@/constants'
-import en from './en.json'
-import cs from './cs.json'
+import type { Flatten } from "@solid-primitives/i18n";
+import { LANG } from "@/constants";
+import en from "./en.json";
+import cs from "./cs.json";
 
-export type Dict = Flatten<typeof en>
+export type Dict = Flatten<typeof en>;
 
 export default {
   [LANG.EN]: en,
   [LANG.CS]: cs,
-} 
+};
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -3,7 +3,7 @@ import * as i18n from "@solid-primitives/i18n";
 import { makePersisted } from "@solid-primitives/storage";
 import { createSignal } from "solid-js";
 import { LANG } from "@/constants";
-import dict, { Dict } from "./dict";
+import dict, { type Dict } from "./dict";
 
 export const [locale, setLocale] = makePersisted(
   createSignal<LANG>(Reflect.has(dict, navigator.language) ? (navigator.language as LANG) : LANG.EN),

diff --git a/src/screens/Dashboard/components/Box.tsx b/src/screens/Dashboard/components/Box.tsx
@@ -1,4 +1,4 @@
-import { ParentComponent } from "solid-js";
+import type { ParentComponent } from "solid-js";
 
 const Box: ParentComponent = (props) => {
   return (

diff --git a/src/screens/Dashboard/components/Popup/Popup.tsx b/src/screens/Dashboard/components/Popup/Popup.tsx
@@ -1,4 +1,4 @@
-import { ParentComponent } from "solid-js";
+import type { ParentComponent } from "solid-js";
 
 const Popup: ParentComponent<{}> = (props) => {
   return <div>{props.children}</div>;

diff --git a/src/screens/Dashboard/components/Sidebar/Button.tsx b/src/screens/Dashboard/components/Sidebar/Button.tsx
@@ -1,5 +1,5 @@
 import { A } from "@solidjs/router";
-import { JSX, ParentComponent } from "solid-js";
+import type { JSX, ParentComponent } from "solid-js";
 
 const SidebarButton: ParentComponent<{
   icon?: JSX.Element;

diff --git a/src/screens/Dashboard/components/Sidebar/Profile/Button.tsx b/src/screens/Dashboard/components/Sidebar/Profile/Button.tsx
@@ -1,4 +1,4 @@
-import { ParentComponent } from "solid-js";
+import type { ParentComponent } from "solid-js";
 
 interface IProfileButtonProps {
   onClick: () => void;

diff --git a/src/screens/Dashboard/components/Sidebar/Section.tsx b/src/screens/Dashboard/components/Sidebar/Section.tsx
@@ -1,4 +1,4 @@
-import { ParentComponent } from "solid-js";
+import type { ParentComponent } from "solid-js";
 
 interface ISidebarSectionProps {
   title: string;

diff --git a/src/screens/Dashboard/components/Sidebar/index.tsx b/src/screens/Dashboard/components/Sidebar/index.tsx
@@ -18,20 +18,39 @@ import {
 import { Hr } from "@/shared/components/Menu/Hr";
 import { DisclosureStateChild, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "terracotta";
 import { type Company, getCompanies } from "@/bindings";
+import { useNavigate } from "@solidjs/router";
+
+interface SidebarButtonData {
+  target: string;
+  icon: JSX.Element;
+  label: string;
+}
+
+interface SidebarSectionData {
+  title: string;
+  buttons: SidebarButtonData[];
+}
 
 const Sidebar: Component = () => {
   const [t] = useI18n();
+  const navigate = useNavigate();
   const company = useSelector((state) => state.companyService.company);
-  const [companies, setCompanies] = createSignal<Company[]>([company]);
+  const stateService = useSelector((state) => state.stateService);
+
+  const [companies, setCompanies] = createSignal<Company[]>([]);
+  const [selected, setSelected] = createSignal<Company>(company);
 
   onMount(async () => {
-    const data = await getCompanies(company.id);
-    setCompanies((prev) => [...prev, ...data]);
+    const data = await getCompanies(stateService.state.companyId || undefined);
+    setCompanies([company, ...data]);
   });
 
-  const [selected, setSelected] = createSignal(companies()[0]);
+  const setCompany = (company: Company) => {
+    stateService.updateState({ companyId: company.id });
+    navigate("/");
+  };
 
-  const sidebarSections = [
+  const sidebarSections: SidebarSectionData[] = [
     {
       title: t("sidebar.section.sales"),
       buttons: [
@@ -80,7 +99,7 @@ const Sidebar: Component = () => {
           {t("sidebar.button.settings")}
         </SidebarButton>
         <Hr />
-        <Listbox defaultOpen={false} value={selected()} onSelectChange={setSelected}>
+        <Listbox value={selected()} onSelectChange={setSelected} defaultOpen={false}>
           <ListboxButton class="text-sm flex flex-row items-center justify-start gap-2.5 lg:gap-4 hover:bg-neutral-100/40 dark:hover:bg-neutral-100/25 bg-transparent rounded-[5px] px-2 py-[3px] w-full">
             <div class="flex h-8 w-8 items-center justify-center lg:h-10 lg:w-10 rounded-full">
               <img
@@ -89,14 +108,7 @@ const Sidebar: Component = () => {
                 class="rounded-full"
               />
             </div>
-            <span
-              class="block truncate"
-              onClick={() => {
-                console.log(companies());
-              }}
-            >
-              {company.name}
-            </span>
+            <span class="block truncate">{company.name}</span>
           </ListboxButton>
           <div class="flex flex-col w-full">
             <div class="relative">
@@ -117,7 +129,11 @@ const Sidebar: Component = () => {
                     >
                       <For each={companies()}>
                         {(company): JSX.Element => (
-                          <ListboxOption class="focus:outline-none group" value={company}>
+                          <ListboxOption
+                            class="focus:outline-none group"
+                            value={company}
+                            onClick={() => setCompany(company)}
+                          >
                             {({ isActive, isSelected }): JSX.Element => (
                               <div
                                 classList={{
@@ -136,7 +152,7 @@ const Sidebar: Component = () => {
                                 >
                                   {company.name}
                                 </span>
-                                {isSelected() ? (
+                                {isSelected() && (
                                   <span
                                     classList={{
                                       "text-primary": isActive(),
@@ -146,19 +162,14 @@ const Sidebar: Component = () => {
                                   >
                                     <FiCheck aria-hidden="true" />
                                   </span>
-                                ) : null}
+                                )}
                               </div>
                             )}
                           </ListboxOption>
                         )}
                       </For>
-                      {/* Option to create company */}
-                      <ListboxOption
-                        value={""}
-                        class="focus:outline-none group"
-                        onclick={() => console.log("create company")}
-                      >
-                        {({ isActive, isSelected }): JSX.Element => (
+                      <ListboxOption value={""} class="focus:outline-none group" onClick={() => navigate("/setup")}>
+                        {({ isActive }): JSX.Element => (
                           <div
                             classList={{
                               "text-primary bg-material-selection": isActive(),
@@ -176,15 +187,7 @@ const Sidebar: Component = () => {
                             >
                               <FiPlus />
                             </span>
-                            <span
-                              classList={{
-                                "font-medium": isSelected(),
-                                "font-normal": !isSelected(),
-                                "block truncate": true,
-                              }}
-                            >
-                              {t("sidebar.button.company.create")}
-                            </span>
+                            <span class="block truncate">{t("sidebar.button.company.create")}</span>
                           </div>
                         )}
                       </ListboxOption>

diff --git a/src/screens/Dashboard/components/StatBox.tsx b/src/screens/Dashboard/components/StatBox.tsx
@@ -1,4 +1,4 @@
-import { Component, Show } from "solid-js";
+import { type Component, Show } from "solid-js";
 // import { Platform } from "@tauri-apps/plugin-os";
 
 const StatBox: Component<{

diff --git a/src/screens/Dashboard/components/Table/ActionButton.tsx b/src/screens/Dashboard/components/Table/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { Component } from "solid-js";
+import type { Component } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
 interface ActionButtonProps {

diff --git a/src/screens/Dashboard/components/Table/Pagination.tsx b/src/screens/Dashboard/components/Table/Pagination.tsx
@@ -1,4 +1,4 @@
-import { For, Component } from "solid-js";
+import { For, type Component } from "solid-js";
 
 interface PaginationProps {
   currentPage: number;

diff --git a/src/screens/Dashboard/components/Table/Row.tsx b/src/screens/Dashboard/components/Table/Row.tsx
@@ -1,4 +1,4 @@
-import { Component, For, Show } from "solid-js";
+import { type Component, For, Show } from "solid-js";
 import ActionButton from "./ActionButton";
 
 interface TableRowProps<T> {

diff --git a/src/screens/Dashboard/components/Table/index.tsx b/src/screens/Dashboard/components/Table/index.tsx
@@ -1,4 +1,4 @@
-import { createSignal, createEffect, For, JSX, Component } from "solid-js";
+import { createSignal, createEffect, For, type JSX, type Component } from "solid-js";
 import Pagination from "./Pagination";
 import TableHead from "./TableHeader";
 import TableRow from "./Row";

diff --git a/src/screens/Dashboard/components/TitleBar.tsx b/src/screens/Dashboard/components/TitleBar.tsx
@@ -1,4 +1,4 @@
-import { Component, For, Show, createMemo } from "solid-js";
+import { type Component, For, Show, createMemo } from "solid-js";
 import { useLocation } from "@solidjs/router";
 import { useI18n } from "@/i18n";
 import { FiBell, FiSearch } from "solid-icons/fi";