Project List

Overview

Project List is a component that shows the current projects of the user.

Project List consists of 3 sub-components:

1. Project Header
2. Project Filter
3. Project View ( Grid View / List View )

Component

---

Project Header

Overview

Project Header contains the following sub-component:

• Add Project Button

  This button will call the open function of useProjectFormModal() to create a new project.

Project Filter

Overview

Project Filter contains the following sub-component:

• Search Field

  This field will set the value of searchAtom on event change.

• Layout Group Button

  This group button will set the value of viewType using enum Layout.

  /src/constants/layout.ts

  enum Layout {
      Grid: 'grid'
      List: 'list'
  }
  warning

  This component will only appear if the screen's width < 768px. This happens because if the screen is phone width ( < 768px ), it will automatically adjust the layout to a list view making this component obselete. Refer to useIsPhone for more details.

• Sort Select

  This select component will set the value of sortAtom using enum ProjectSort.

  /src/constants/project.ts

  enum ProjectSort {
      Name = 'Name a-z'
      DateCreated = 'Date Created'
      LastModified = 'Last Modified'
  }

Project View ( Grid View / List View )

Overview

This component contains a layout wrapper and an item component.

Both wrapper and item component are based on the value of viewType: Grid or List.

Wrapper Component Usage

<View
    items={array}
    itemComponent={Component}
    componentProps={{
        props1: value1
        props2: value2
    }}
/>

Parameter:

items: array of data(query)

itemComponent: the component that will contain each item

componentprops: props to be passed down to itemComponent

---

View Type

• Grid

  Wrapper: GridView

  Item Component: ProjectGridItem

• List

  Wrapper: ListView

  Item Component: ProjectListItem

warning

• For phone width, List View is the only one available. Refer to useIsPhone for more details.
• When in loading query state, it will display ProjectSkeleton based on viewType.

Hooks

---

Overview

The hooks that are used in the component are the following:

• useProjectQuery

  use case: return an array of project queries and isLoading state

• useIsPhone

  use case: return false if screen < 768px, otherwise true

• useProjectFormModal

  use case: return a function to open an add/edit project modal