Merge pull request #846 from aliraza556/add-item-menu-list

Add New `Add Item` Menu List Item to Main Toolbar
stakwork · Jan 31, 2024 · 54d2b94 · 54d2b94
2 parents abc75f2 + c79a06c
commit 54d2b94
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/src/components/App/MainToolbar/__test__/index.tsx b/src/components/App/MainToolbar/__test__/index.tsx
@@ -23,6 +23,7 @@ describe('MainToolbar Component Tests', () => {
   it('renders MainToolbar component with correct elements', () => {
     render(<MainToolbar />)
 
+    expect(screen.getByText('Add Item')).toBeInTheDocument()
     expect(screen.getByText('Add Content')).toBeInTheDocument()
     expect(screen.getByText('Source Table')).toBeInTheDocument()
     expect(screen.getByText('Settings')).toBeInTheDocument()

diff --git a/src/components/App/MainToolbar/index.tsx b/src/components/App/MainToolbar/index.tsx
@@ -9,6 +9,7 @@ import { colors } from '~/utils/colors'
 
 export const MainToolbar = () => {
   const { open: openSourcesModal } = useModal('sourcesTable')
+  const { open: openItemAddModal } = useModal('addItem')
   const { open: openContentAddModal } = useModal('addContent')
   const { open: openSettingsModal } = useModal('settings')
 
@@ -17,6 +18,17 @@ export const MainToolbar = () => {
       <LogoButton>
         <img alt="Second brain" src="logo.svg" />
       </LogoButton>
+      <ActionButton
+        data-testid="add-item-modal"
+        onClick={() => {
+          openItemAddModal
+        }}
+      >
+        <IconWrapper>
+          <AddContentIcon />
+        </IconWrapper>
+        <Text>Add Item</Text>
+      </ActionButton>
       <ActionButton data-testid="add-content-modal" onClick={openContentAddModal}>
         <IconWrapper>
           <AddContentIcon />

diff --git a/src/stores/useModalStore/index.ts b/src/stores/useModalStore/index.ts
@@ -3,6 +3,7 @@ import { create } from 'zustand'
 export type AvailableModals =
   | 'budgetExplanation'
   | 'sourcesTable'
+  | 'addItem'
   | 'addContent'
   | 'editTopic'
   | 'addEdge'
@@ -22,6 +23,7 @@ const defaultData = {
   currentModals: {
     budgetExplanation: false,
     sourcesTable: false,
+    addItem: false,
     addContent: false,
     editTopic: false,
     addEdge: false,