From f5feace4a8be22491e4ab35938395c9546fd790e Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Mon, 3 Mar 2025 17:56:57 +0200
Subject: [PATCH] PM-875 - move projects to new container, add filters

---
 src/actions/projects.js                    |  96 +++++++++++++++
 src/actions/sidebar.js                     |  21 +---
 src/components/ProjectCard/index.js        |   6 +-
 src/config/constants.js                    |   2 +
 src/containers/Challenges/index.js         |  45 +------
 src/containers/Projects/index.js           | 132 +++++++++++++++++++++
 src/containers/Projects/styles.module.scss |  54 +++++++++
 src/containers/TaaSList/index.js           |  69 +++++++----
 src/containers/Tab/index.js                |  15 ++-
 src/reducers/projects.js                   |  39 +++++-
 src/reducers/sidebar.js                    |   6 +-
 src/routes.js                              |   3 +-
 12 files changed, 383 insertions(+), 105 deletions(-)
 create mode 100644 src/containers/Projects/index.js
 create mode 100644 src/containers/Projects/styles.module.scss

diff --git a/src/actions/projects.js b/src/actions/projects.js
index 5f38015c..2d88e519 100644
--- a/src/actions/projects.js
+++ b/src/actions/projects.js
@@ -1,4 +1,12 @@
+import _ from 'lodash'
+
 import {
+  PROJECT_TYPE_TAAS,
+  PROJECTS_PAGE_SIZE,
+  LOAD_PROJECTS_PENDING,
+  LOAD_PROJECTS_SUCCESS,
+  UNLOAD_PROJECTS_SUCCESS,
+  LOAD_PROJECTS_FAILURE,
   LOAD_PROJECT_BILLING_ACCOUNT,
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
   LOAD_PROJECT_DETAILS,
@@ -21,8 +29,96 @@ import {
   getProjectTypes,
   createProjectApi,
   fetchBillingAccounts,
+  fetchMemberProjects,
   updateProjectApi
 } from '../services/projects'
+import { checkAdmin } from '../util/tc'
+
+function _loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: LOAD_PROJECTS_PENDING
+    })
+
+    const filters = {
+      sort: 'lastActivityAt desc',
+      perPage: PROJECTS_PAGE_SIZE,
+      ...paramFilters
+    }
+
+    if (!_.isEmpty(projectNameOrIdFilter)) {
+      if (!isNaN(projectNameOrIdFilter)) { // if it is number
+        filters['id'] = parseInt(projectNameOrIdFilter, 10)
+      } else { // text search
+        filters['keyword'] = decodeURIComponent(projectNameOrIdFilter)
+      }
+    }
+
+    if (!checkAdmin(getState().auth.token)) {
+      filters['memberOnly'] = true
+    }
+
+    // eslint-disable-next-line no-debugger
+    const state = getState().projects
+    fetchMemberProjects(filters).then(({ projects, pagination }) => dispatch({
+      filters,
+      type: LOAD_PROJECTS_SUCCESS,
+      projects: _.uniqBy((filters.page ? state.projects || [] : []).concat(projects), 'id'),
+      total: pagination.xTotal,
+      page: pagination.xPage
+    })).catch(() => dispatch({
+      type: LOAD_PROJECTS_FAILURE
+    }))
+  }
+}
+
+export function loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
+  return async (dispatch, getState) => {
+    const _filters = _.assign({}, paramFilters)
+    if (_.isEmpty(_filters) || !_filters.type) {
+      let projectTypes = getState().projects.projectTypes
+
+      if (!projectTypes.length) {
+        dispatch({
+          type: LOAD_PROJECTS_PENDING
+        })
+        await loadProjectTypes()(dispatch)
+        projectTypes = getState().projects.projectTypes
+      }
+
+      _.assign(_filters, {
+        type: projectTypes.filter(d => d.key !== PROJECT_TYPE_TAAS).map(d => d.key)
+      })
+    }
+
+    return _loadProjects(projectNameOrIdFilter, _filters)(dispatch, getState)
+  }
+}
+
+/**
+ * Load more projects for the authenticated user
+ */
+export function loadMoreProjects () {
+  return (dispatch, getState) => {
+    const { projectFilters, projectsPage } = getState().projects
+
+    loadProjects('', _.assign({}, projectFilters, {
+      perPage: PROJECTS_PAGE_SIZE,
+      page: projectsPage + 1
+    }))(dispatch, getState)
+  }
+}
+
+/**
+ * Unloads projects of the authenticated user
+ */
+export function unloadProjects () {
+  return (dispatch) => {
+    dispatch({
+      type: UNLOAD_PROJECTS_SUCCESS
+    })
+  }
+}
 
 /**
  * Loads project details
diff --git a/src/actions/sidebar.js b/src/actions/sidebar.js
index dd521d25..7a945301 100644
--- a/src/actions/sidebar.js
+++ b/src/actions/sidebar.js
@@ -37,6 +37,7 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
     })
 
     const filters = {
+      status: 'active',
       sort: 'lastActivityAt desc',
       perPage: PROJECTS_PAGE_SIZE,
       ...paramFilters
@@ -66,26 +67,6 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
   }
 }
 
-/**
- * Load more projects for the authenticated user
- */
-export function loadMoreProjects (filterProjectName = '', paramFilters = {}) {
-  return (dispatch, getState) => {
-    const state = getState().sidebar
-
-    loadProjects(filterProjectName, _.assignIn({}, paramFilters, {
-      perPage: PROJECTS_PAGE_SIZE,
-      page: state.page + 1
-    }))(dispatch, getState)
-  }
-}
-
-export function loadTaasProjects (filterProjectName = '', paramFilters = {}) {
-  return loadProjects(filterProjectName, Object.assign({
-    type: 'talent-as-a-service'
-  }, paramFilters))
-}
-
 /**
  * Unloads projects of the authenticated user
  */
diff --git a/src/components/ProjectCard/index.js b/src/components/ProjectCard/index.js
index f639259b..9d3d7675 100644
--- a/src/components/ProjectCard/index.js
+++ b/src/components/ProjectCard/index.js
@@ -8,13 +8,12 @@ import { PROJECT_STATUSES } from '../../config/constants'
 
 import styles from './ProjectCard.module.scss'
 
-const ProjectCard = ({ projectName, projectStatus, projectId, selected, setActiveProject }) => {
+const ProjectCard = ({ projectName, projectStatus, projectId, selected }) => {
   return (
     <div className={styles.container}>
       <Link
         to={`/projects/${projectId}/challenges`}
         className={cn(styles.projectName, { [styles.selected]: selected })}
-        onClick={() => setActiveProject(parseInt(projectId))}
       >
         <div className={styles.name}>
           <span>{projectName}</span>
@@ -29,8 +28,7 @@ ProjectCard.propTypes = {
   projectStatus: PT.string.isRequired,
   projectId: PT.number.isRequired,
   projectName: PT.string.isRequired,
-  selected: PT.bool.isRequired,
-  setActiveProject: PT.func
+  selected: PT.bool
 }
 
 export default ProjectCard
diff --git a/src/config/constants.js b/src/config/constants.js
index 106c9f76..43845e41 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -451,3 +451,5 @@ export const ATTACHMENT_TYPE_LINK = 'link'
  */
 export const PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS = 'All Project Members'
 export const PROJECT_ASSETS_SHARED_WITH_ADMIN = 'Only Admins'
+
+export const PROJECT_TYPE_TAAS = 'talent-as-a-service'
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
index 72aa0ad4..93b0ae85 100644
--- a/src/containers/Challenges/index.js
+++ b/src/containers/Challenges/index.js
@@ -6,9 +6,7 @@ import React, { Component, Fragment } from 'react'
 // import { Redirect } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 import ChallengesComponent from '../../components/ChallengesComponent'
-import ProjectCard from '../../components/ProjectCard'
 // import Loader from '../../components/Loader'
 import {
   loadChallengesByPage,
@@ -18,15 +16,11 @@ import {
 } from '../../actions/challenges'
 import { loadProject, updateProject } from '../../actions/projects'
 import {
-  loadMoreProjects,
   loadProjects,
   setActiveProject,
   resetSidebarActiveParams
 } from '../../actions/sidebar'
-import styles from './Challenges.module.scss'
-import { checkAdmin, checkAdminOrCopilot } from '../../util/tc'
-import { PrimaryButton } from '../../components/Buttons'
-import InfiniteLoadTrigger from '../../components/InfiniteLoadTrigger'
+import { checkAdmin } from '../../util/tc'
 
 class Challenges extends Component {
   constructor (props) {
@@ -145,46 +139,11 @@ class Challenges extends Component {
       metadata
     } = this.props
     const { challengeTypes = [] } = metadata
-    const projectInfo = _.find(projects, { id: activeProjectId }) || {}
-    const projectComponents =
-      !dashboard &&
-      projects.map((p) => (
-        <li key={p.id}>
-          <ProjectCard
-            projectStatus={p.status}
-            projectName={p.name}
-            projectId={p.id}
-            selected={activeProjectId === `${p.id}`}
-            setActiveProject={setActiveProject}
-          />
-        </li>
-      ))
     return (
       <Fragment>
-        {!dashboard &&
-        (!!projectComponents.length ||
-          (activeProjectId === -1 && !selfService)) ? (
-            <div className={!dashboard && styles.projectSearch}>
-              {activeProjectId === -1 && !selfService && (
-                <div className={styles.buttonNewProjectWrapper}>
-                  <div>No project selected. Select one below</div>
-                  {checkAdminOrCopilot(auth.token) && (
-                    <Link className={styles.buttonNewProject} to={`/projects/new`}>
-                      <PrimaryButton text={'Create Project'} type={'info'} />
-                    </Link>
-                  )}
-                </div>
-              )}
-              <ul>{projectComponents}</ul>
-              {projects && !!projects.length && (
-                <InfiniteLoadTrigger onLoadMore={this.props.loadMoreProjects} />
-              )}
-            </div>
-          ) : null}
         {(dashboard || activeProjectId !== -1 || selfService) && (
           <ChallengesComponent
             activeProject={{
-              ...projectInfo,
               ...(reduxProjectInfo && reduxProjectInfo.id === activeProjectId
                 ? reduxProjectInfo
                 : {})
@@ -270,7 +229,6 @@ Challenges.propTypes = {
   dashboard: PropTypes.bool,
   auth: PropTypes.object.isRequired,
   loadChallengeTypes: PropTypes.func,
-  loadMoreProjects: PropTypes.func,
   metadata: PropTypes.shape({
     challengeTypes: PropTypes.array
   })
@@ -298,7 +256,6 @@ const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
 const mapDispatchToProps = {
   loadChallengesByPage,
   resetSidebarActiveParams,
-  loadMoreProjects,
   loadProject,
   loadProjects,
   updateProject,
diff --git a/src/containers/Projects/index.js b/src/containers/Projects/index.js
new file mode 100644
index 00000000..733c044c
--- /dev/null
+++ b/src/containers/Projects/index.js
@@ -0,0 +1,132 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import cn from 'classnames'
+import { DebounceInput } from 'react-debounce-input'
+import { withRouter, Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import Loader from '../../components/Loader'
+import { checkAdminOrCopilot } from '../../util/tc'
+import { PrimaryButton } from '../../components/Buttons'
+import Select from '../../components/Select'
+import ProjectCard from '../../components/ProjectCard'
+import InfiniteLoadTrigger from '../../components/InfiniteLoadTrigger'
+import { loadProjects, loadMoreProjects, unloadProjects } from '../../actions/projects'
+import { PROJECT_STATUSES } from '../../config/constants'
+
+import styles from './styles.module.scss'
+
+const Projects = ({ projects, auth, isLoading, projectsCount, loadProjects, loadMoreProjects, unloadProjects }) => {
+  const [search, setSearch] = useState()
+  const [projectStatus, setProjectStatus] = useState('')
+  const selectedStatus = useMemo(() => PROJECT_STATUSES.find(s => s.value === projectStatus))
+
+  useEffect(() => {
+    loadProjects(search, projectStatus ? { status: projectStatus } : {})
+  }, [search, projectStatus])
+
+  // unload projects on dismount
+  useEffect(() => () => unloadProjects, [])
+
+  if (isLoading && projects.length === 0) {
+    return (
+      <div className={styles.container}>
+        <Loader />
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerLine}>
+        <h2>Projects</h2>
+        {checkAdminOrCopilot(auth.token) && (
+          <Link className={styles.buttonNewProject} to={`/projects/new`}>
+            <PrimaryButton text={'New Project'} type={'info'} />
+          </Link>
+        )}
+      </div>
+      <div className={styles.searchWrapper}>
+        <div className={styles['col-6']}>
+          <div className={cn(styles.field, styles.input1)}>
+            <label>Search :</label>
+          </div>
+          <div className={styles.searchInputWrapper}>
+            <DebounceInput
+              className={styles.searchInput}
+              minLength={2}
+              debounceTimeout={300}
+              placeholder='Keyword'
+              onChange={e => setSearch(e.target.value)}
+              value={search}
+            />
+          </div>
+        </div>
+        <div className={styles['col-6']}>
+          <div className={cn(styles.field, styles.input1)}>
+            <label>Project Status:</label>
+          </div>
+          <div className={styles.searchInputWrapper}>
+            <Select
+              name='projectStatus'
+              options={PROJECT_STATUSES}
+              placeholder='All'
+              value={selectedStatus}
+              onChange={e => setProjectStatus(e ? e.value : '')}
+              isClearable
+            />
+          </div>
+        </div>
+      </div>
+      {projects.length > 0 ? (
+        <>
+          <ul>
+            {projects.map(p => (
+              <li key={p.id}>
+                <ProjectCard
+                  projectStatus={p.status}
+                  projectName={p.name}
+                  projectId={p.id}
+                />
+              </li>
+            ))}
+          </ul>
+          {projects && projects.length < projectsCount - 1 && (
+            // fix
+            <InfiniteLoadTrigger onLoadMore={loadMoreProjects} />
+          )}
+        </>
+      ) : (
+        <span>No projects available yet</span>
+      )}
+    </div>
+  )
+}
+
+Projects.propTypes = {
+  projectsCount: PropTypes.number.isRequired,
+  projects: PropTypes.array,
+  auth: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  unloadProjects: PropTypes.func.isRequired,
+  loadProjects: PropTypes.func.isRequired,
+  loadMoreProjects: PropTypes.func.isRequired
+}
+
+const mapStateToProps = ({ projects, auth }) => {
+  return {
+    projectsCount: projects.projectsCount,
+    projects: projects.projects,
+    isLoading: projects.isLoading,
+    auth
+  }
+}
+
+const mapDispatchToProps = {
+  unloadProjects: unloadProjects,
+  loadProjects: loadProjects,
+  loadMoreProjects: loadMoreProjects
+}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Projects)
+)
diff --git a/src/containers/Projects/styles.module.scss b/src/containers/Projects/styles.module.scss
new file mode 100644
index 00000000..d80341cc
--- /dev/null
+++ b/src/containers/Projects/styles.module.scss
@@ -0,0 +1,54 @@
+@import '../../styles/includes';
+
+.container {
+  padding: 20px 20px 0px;
+
+  ul {
+    background-color: $lighter-gray;
+    list-style: none;
+    width: 100%;
+    padding: 0;
+    margin-top: 0;
+    border-radius: 3px;
+    flex: 1;
+  }
+
+  div,
+  a {
+    color: $dark-gray;
+    text-decoration: none;
+  }
+}
+
+.headerLine {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 15px;
+  justify-content: space-between;
+  align-items: center;
+  .buttonNewProject {
+    min-width: 169px;
+    height: 40px;
+    text-decoration: none;
+    
+    :global {
+      span {
+        margin: 0 20px;
+      }
+    }
+  }
+}
+
+.searchWrapper {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  .searchInput {
+    width: 100%;
+    height: 40px;
+    padding: 0 10px;
+    border-radius: 3px;
+    border: 1px solid $light-gray;
+    background-color: $lighter-gray;
+  }
+}
\ No newline at end of file
diff --git a/src/containers/TaaSList/index.js b/src/containers/TaaSList/index.js
index 67610028..bdc58c50 100644
--- a/src/containers/TaaSList/index.js
+++ b/src/containers/TaaSList/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { withRouter, Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
@@ -7,15 +7,25 @@ import Loader from '../../components/Loader'
 import cn from 'classnames'
 import { checkAdmin, checkCopilot } from '../../util/tc'
 import { PrimaryButton } from '../../components/Buttons'
+import InfiniteLoadTrigger from '../../components/InfiniteLoadTrigger'
+import { loadProjects as _loadProjects, loadMoreProjects, unloadProjects as _unloadProjects } from '../../actions/projects'
+import { PROJECT_TYPE_TAAS } from '../../config/constants'
 
 import styles from './styles.module.scss'
 
-const TaaSList = ({ taasProjects, auth, isLoading }) => {
+const TaaSList = ({ projects, auth, isLoading, projectsCount, loadProjects, loadMore, unloadProjects }) => {
   const isCopilot = checkCopilot(auth.token)
   const isAdmin = checkAdmin(auth.token)
   const canEdit = isCopilot || isAdmin
 
-  if (isLoading && taasProjects.length === 0) {
+  useEffect(() => {
+    loadProjects('', { type: PROJECT_TYPE_TAAS })
+  }, [])
+
+  // unload projects on dismount
+  useEffect(() => () => unloadProjects, [])
+
+  if (isLoading && projects.length === 0) {
     return (
       <div className={styles.container}>
         <Loader />
@@ -26,7 +36,7 @@ const TaaSList = ({ taasProjects, auth, isLoading }) => {
   return (
     <div className={styles.container}>
       <div className={styles.searchHeader}>
-        <div>No project selected. Select one below</div>
+        <h2>Projects</h2>
         {(isCopilot || isAdmin) && (
           <Link className={styles.buttonCreateNewTaaS} to='/taas/new'>
             <PrimaryButton
@@ -37,18 +47,24 @@ const TaaSList = ({ taasProjects, auth, isLoading }) => {
           </Link>
         )}
       </div>
-      {taasProjects.length > 0 ? (
-        <ul>
-          {taasProjects.map(p => (
-            <li key={p.id} className={cn({ [styles.canEdit]: canEdit })}>
-              <TaaSProjectCard
-                projectName={p.name}
-                projectId={p.id}
-                canEdit={canEdit}
-              />
-            </li>
-          ))}
-        </ul>
+      {projects.length > 0 ? (
+        <>
+          <ul>
+            {projects.map(p => (
+              <li key={p.id} className={cn({ [styles.canEdit]: canEdit })}>
+                <TaaSProjectCard
+                  projectName={p.name}
+                  projectId={p.id}
+                  canEdit={canEdit}
+                />
+              </li>
+            ))}
+          </ul>
+          {projects && projects.length < projectsCount - 1 && (
+            // fix
+            <InfiniteLoadTrigger onLoadMore={loadMore} />
+          )}
+        </>
       ) : (
         <span>No TaaS projects available yet</span>
       )}
@@ -57,20 +73,29 @@ const TaaSList = ({ taasProjects, auth, isLoading }) => {
 }
 
 TaaSList.propTypes = {
-  taasProjects: PropTypes.array,
+  projectsCount: PropTypes.number.isRequired,
+  projects: PropTypes.array,
   auth: PropTypes.object.isRequired,
-  isLoading: PropTypes.bool.isRequired
+  isLoading: PropTypes.bool.isRequired,
+  loadProjects: PropTypes.func.isRequired,
+  unloadProjects: PropTypes.func.isRequired,
+  loadMore: PropTypes.func.isRequired
 }
 
-const mapStateToProps = ({ sidebar, auth }) => {
+const mapStateToProps = ({ projects, auth }) => {
   return {
-    taasProjects: sidebar.taasProjects,
-    isLoading: sidebar.isLoading,
+    projectsCount: projects.projectsCount,
+    projects: projects.projects,
+    isLoading: projects.isLoading,
     auth
   }
 }
 
-const mapDispatchToProps = {}
+const mapDispatchToProps = {
+  loadProjects: _loadProjects,
+  unloadProjects: _unloadProjects,
+  loadMore: loadMoreProjects
+}
 
 export default withRouter(
   connect(mapStateToProps, mapDispatchToProps)(TaaSList)
diff --git a/src/containers/Tab/index.js b/src/containers/Tab/index.js
index d9845f37..22853e66 100644
--- a/src/containers/Tab/index.js
+++ b/src/containers/Tab/index.js
@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import Tab from '../../components/Tab'
 import {
   loadProjects,
-  loadTaasProjects,
   setActiveProject,
   resetSidebarActiveParams,
   unloadProjects
@@ -35,7 +34,7 @@ class TabContainer extends Component {
       !isLoading &&
       !selfService &&
       // do not fetch projects for users page
-      history.location.pathname !== '/users'
+      history.location.pathname === '/'
     ) {
       this.loadProjects(this.props)
     }
@@ -46,7 +45,11 @@ class TabContainer extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    const { projectId, isLoading, selfService, projects, isLoadProjectsSuccess } = nextProps
+    const { projectId, activeProjectId, isLoading, selfService, projects, isLoadProjectsSuccess } = nextProps
+
+    if (projectId && activeProjectId < 0) {
+      this.props.setActiveProject(parseInt(projectId))
+    }
 
     if (nextProps.history.location.pathname === '/') {
       this.setState({ currentTab: 1 })
@@ -96,9 +99,7 @@ class TabContainer extends Component {
   loadProjects (props) {
     const { history } = props
 
-    if (history.location.pathname === '/taas') {
-      this.props.loadTaasProjects()
-    } else {
+    if (history.location.pathname === '/') {
       this.props.loadProjects()
     }
   }
@@ -139,7 +140,6 @@ TabContainer.propTypes = {
   isLoading: PropTypes.bool,
   isLoadProjectsSuccess: PropTypes.bool,
   loadProjects: PropTypes.func,
-  loadTaasProjects: PropTypes.func,
   unloadProjects: PropTypes.func,
   activeProjectId: PropTypes.number,
   history: PropTypes.any.isRequired,
@@ -155,7 +155,6 @@ const mapStateToProps = ({ sidebar }) => ({
 
 const mapDispatchToProps = {
   loadProjects,
-  loadTaasProjects,
   unloadProjects,
   setActiveProject,
   resetSidebarActiveParams
diff --git a/src/reducers/projects.js b/src/reducers/projects.js
index a2e9a938..888d01c0 100644
--- a/src/reducers/projects.js
+++ b/src/reducers/projects.js
@@ -3,6 +3,10 @@
  */
 import _ from 'lodash'
 import {
+  LOAD_PROJECTS_PENDING,
+  LOAD_PROJECTS_SUCCESS,
+  LOAD_PROJECTS_FAILURE,
+  UNLOAD_PROJECTS_SUCCESS,
   LOAD_PROJECT_BILLING_ACCOUNTS_PENDING,
   LOAD_PROJECT_BILLING_ACCOUNTS_SUCCESS,
   LOAD_PROJECT_BILLING_ACCOUNTS_FAILURE,
@@ -80,11 +84,44 @@ const initialState = {
   isPhasesLoading: false,
   phases: [],
   isProjectTypesLoading: false,
-  projectTypes: []
+  projectFilters: {},
+  projectTypes: [],
+  projects: [],
+  projectsCount: 0,
+  projectsPage: 0
 }
 
 export default function (state = initialState, action) {
   switch (action.type) {
+    case LOAD_PROJECTS_PENDING:
+      return { ...state, isLoading: true }
+    case LOAD_PROJECTS_SUCCESS:
+      return {
+        ...state,
+        projectFilters: action.filters,
+        projects: action.projects,
+        projectsCount: action.total,
+        projectsPage: action.page,
+        isLoading: false
+      }
+    case UNLOAD_PROJECTS_SUCCESS:
+      return {
+        ...state,
+        isLoading: false,
+        projectFilters: {},
+        projects: [],
+        projectsCount: 0,
+        projectsPage: 0
+      }
+    case LOAD_PROJECTS_FAILURE: {
+      const errorMessage = _.get(
+        action.payload,
+        'response.data.message',
+        'Failed to load projects'
+      )
+      toastFailure('Error', errorMessage)
+      return { ...state, isLoading: false }
+    }
     case LOAD_PROJECT_DETAILS_PENDING:
       return { ...state, isLoading: true }
     case LOAD_PROJECT_DETAILS_FAILURE: {
diff --git a/src/reducers/sidebar.js b/src/reducers/sidebar.js
index be25da00..19dce5a6 100644
--- a/src/reducers/sidebar.js
+++ b/src/reducers/sidebar.js
@@ -16,7 +16,6 @@ const initialState = {
   activeProjectId: -1,
   isLoading: false,
   projects: [],
-  taasProjects: [],
   total: 0,
   page: 0,
   isLoadProjectsSuccess: false
@@ -29,10 +28,7 @@ export default function (state = initialState, action) {
     case LOAD_PROJECTS_SUCCESS:
       return {
         ...state,
-        projects: _.filter(action.projects, p => p.type !== 'talent-as-a-service'),
-        taasProjects: _.filter(action.projects, {
-          type: 'talent-as-a-service'
-        }),
+        projects: action.projects,
         total: action.total,
         page: action.page,
         isLoading: false,
diff --git a/src/routes.js b/src/routes.js
index fee5af10..aa87a527 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -11,6 +11,7 @@ import TopBarContainer from './containers/TopbarContainer'
 import FooterContainer from './containers/FooterContainer'
 import Tab from './containers/Tab'
 import Challenges from './containers/Challenges'
+import Projects from './containers/Projects'
 import TaaSList from './containers/TaaSList'
 import ProjectAssets from './containers/ProjectAssets'
 import TaaSProjectForm from './containers/TaaSProjectForm'
@@ -195,7 +196,7 @@ class Routes extends React.Component {
           />
           <Route exact path='/projects'
             render={() => renderApp(
-              <Challenges menu='NULL' key='projects' />,
+              <Projects />,
               <TopBarContainer />,
               <Tab />,
               <FooterContainer />