Refactor home page to not use Redux

src/api.ts

@@ -40,7 +40,9 @@ class Api {
 
       const fullUrl = new URL(url, import.meta.env.VITE_API_BASE_URL)
       Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined) {
+        if (Array.isArray(value)) {
+          fullUrl.searchParams.set(key, value.join(','))
+        } else if (value !== undefined) {
           fullUrl.searchParams.set(key, String(value))
         }
       })

src/components/announcement/Announcement.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { NewsItem } from '../../features/news'
 
 import './announcement.less'
+import { NewsItem } from '../../features/news/types'
 
 const Announcement: React.FC<AnnouncementProps> = ({ item }) => (
   <div className="announcement-item">{item.content}</div>

src/components/news-list/NewsList.tsx

@@ -1,41 +1,18 @@
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { ThunkDispatch } from 'redux-thunk'
-import { Trans, useTranslation } from 'react-i18next'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 
-import { getNews, loadNews } from '../../features/news'
-import { NewsActionTypes } from '../../features/news/actionTypes'
-import { RootState } from '../../storeTypes'
 import Announcement from '../announcement'
-import { Issue } from '../Issues-list'
+import { useNewsList } from '../../features/news/hooks'
 
-type AppDispatch = ThunkDispatch<RootState, any, NewsActionTypes>
-
-const NewsList: React.FC<NewsListProps> = ({ setIssues }) => {
-  const dispatch: AppDispatch = useDispatch()
-  const news = useSelector(getNews)
+const NewsList: FC = () => {
+  const { data } = useNewsList()
   const { t } = useTranslation()
 
-  useEffect(() => {
-    dispatch(loadNews()).catch(() => {
-      setIssues([
-        {
-          key: 'news-fetch-error',
-          type: 'error',
-          message: t('news.error'),
-          field: 'news',
-        },
-      ])
-    })
-  }, [dispatch, setIssues, t])
-
-  if (news && news.length) {
+  if (data.length) {
     return (
       <div className="announcements">
-        <h1>
-          <Trans i18nKey="news.title">Announcements</Trans>
-        </h1>
-        {news.map((newsItem) => (
+        <h1>{t('news.title')}</h1>
+        {data.map((newsItem) => (
           <Announcement key={newsItem.uuid} item={newsItem} />
         ))}
       </div>
@@ -44,8 +21,4 @@ const NewsList: React.FC<NewsListProps> = ({ setIssues }) => {
   return <></>
 }
 
-export interface NewsListProps {
-  setIssues: (issues: Array<Issue>) => void
-}
-
 export default NewsList

src/components/recent-banners/RecentBanners.tsx

@@ -1,59 +1,42 @@
-import React, { FC, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
-import { ThunkDispatch } from 'redux-thunk'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { getRecentBanners, loadRecentBanners } from '../../features/banner'
-import { BannerActionTypes } from '../../features/banner/actionTypes'
-import { RootState } from '../../storeTypes'
 import BannerList from '../banner-list'
-import { Issue } from '../Issues-list'
 import LoadingOverlay from '../loading-overlay'
 
 import './recent-banners.less'
-
-type AppDispatch = ThunkDispatch<RootState, any, BannerActionTypes>
-
-export const RecentBanners: FC<RecentBannersProps> = ({
-  titleList,
-  setIssues,
-  resetIssue,
-}) => {
-  const history = useHistory()
-  const dispatch: AppDispatch = useDispatch()
-  const banners = useSelector(getRecentBanners)
-  const [loading, setLoading] = useState(false)
-  const { t } = useTranslation(undefined, { keyPrefix: 'banners' })
-
-  useEffect(() => {
-    setLoading(true)
-    resetIssue('recent-fetch-error')
-    dispatch(loadRecentBanners())
-      .catch(() =>
-        setIssues([
-          {
-            key: 'recent-fetch-error',
-            type: 'error',
-            message: t('errors.loading'),
-            field: 'recentBanners',
-          },
-        ])
-      )
-      .finally(() => setLoading(false))
-  }, [dispatch, setIssues, resetIssue, history.location, t])
+import { useUserLoggedIn } from '../../hooks/UserLoggedIn'
+import { useBannerList } from '../../features/banner/hooks'
+import { BannerFilter } from '../../features/banner/filter'
+
+export const RecentBanners: FC<RecentBannersProps> = ({ titleList }) => {
+  const { t } = useTranslation()
+  const { authenticated } = useUserLoggedIn()
+  const filter = useMemo<BannerFilter>(
+    () => ({
+      orderBy: 'created',
+      orderDirection: 'DESC',
+      online: true,
+      listTypes: authenticated ? ['none', 'done', 'todo'] : undefined,
+    }),
+    [authenticated]
+  )
+  const { status, data } = useBannerList(filter, 1, 12)
 
   return (
     <div className="recent-banners">
-      <LoadingOverlay active={loading} text={t('loadingRecent')} />
+      <LoadingOverlay
+        active={status === 'pending'}
+        text={t('banners.loadingRecent')}
+      />
       <div className="recent-banners-title">
         <h1>{titleList}</h1>
       </div>
       <BannerList
-        banners={banners}
+        banners={data}
         hasMoreBanners={false}
         applyBannerListStyles
-        hideBlacklisted
+        hideBlacklisted={false}
         showDetailsButton={false}
       />
     </div>
@@ -62,8 +45,6 @@ export const RecentBanners: FC<RecentBannersProps> = ({
 
 export interface RecentBannersProps {
   titleList: string
-  setIssues: (issues: Array<Issue>) => void
-  resetIssue: (key: string) => void
 }
 
 export default RecentBanners

src/features/banner/filter.ts

@@ -21,5 +21,5 @@ export type BannerFilter = {
   proximityLatitude?: number
   proximityLongitude?: number
   author?: string
-  listTypes?: BannerListType
+  listTypes?: BannerListType | BannerListType[]
 }

src/features/news/hooks.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import { getNews } from './api'
+import { NewsItem } from './types'
+
+interface State {
+  status: 'pending' | 'resolved' | 'rejected'
+  data: NewsItem[]
+}
+
+export const useNewsList = function () {
+  const [state, setState] = useState<State>({
+    status: 'pending',
+    data: [],
+  })
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await getNews()
+      if (response.ok) {
+        setState({
+          status: 'resolved',
+          data: response.data,
+        })
+      } else {
+        setState({
+          status: 'rejected',
+          data: [],
+        })
+      }
+    }
+    fetchData()
+  }, [setState])
+  return state
+}

src/features/news/types.ts

@@ -3,7 +3,3 @@ export interface NewsItem {
   content: string
   created: Date
 }
-
-export interface NewsState {
-  news: Array<NewsItem>
-}

src/pages/Home.tsx

@@ -1,53 +1,25 @@
-import React, { useCallback, useState } from 'react'
-import _ from 'underscore'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import NewsList from '../components/news-list'
 import RecentBanners from '../components/recent-banners'
 import { UserBannerListPreview } from '../components/user-banner-list-preview'
 import FooterMain from '../components/footer-main'
-import { Issue, IssuesList } from '../components/Issues-list'
 
 import './home.less'
 import EventsPreview from '../components/events-preview/EventsPreview'
 
-export const Home: React.FC = () => {
-  const [issues, setIssues] = useState<Array<Issue>>([])
+export const Home: FC = () => {
   const { t } = useTranslation()
   const titleList: string = t('banners.latest')
 
-  const addIssues = useCallback(
-    (iss: Array<Issue>) => {
-      setIssues((prevIssues) =>
-        _(prevIssues)
-          .chain()
-          .union(iss)
-          .uniq(false, (i) => i.key)
-          .value()
-      )
-    },
-    [setIssues]
-  )
-
-  const resetIssue = useCallback(
-    (key: string) => {
-      setIssues((prevIssues) => _(prevIssues).filter((i) => i.key !== key))
-    },
-    [setIssues]
-  )
-
   return (
     <div className="home page-container">
       <div className="announcement-and-recent-banners">
-        <IssuesList issues={issues} />
-        <NewsList setIssues={addIssues} />
+        <NewsList />
         <UserBannerListPreview />
         <EventsPreview />
-        <RecentBanners
-          titleList={titleList}
-          setIssues={addIssues}
-          resetIssue={resetIssue}
-        />
+        <RecentBanners titleList={titleList} />
       </div>
       <FooterMain />
     </div>

src/pages/error/Error.tsx

@@ -1,35 +1,14 @@
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Helmet } from 'react-helmet'
-import _ from 'underscore'
 import FooterMain from '../../components/footer-main'
-import { Issue } from '../../components/Issues-list'
 import RecentBanners from '../../components/recent-banners'
 
 import './error.less'
 
 const Error: React.FC = () => {
-  const [issues, setIssues] = useState<Array<Issue>>([])
   const { t } = useTranslation()
   const titleList: string = t('error.newestBanners')
-  const addIssues = useCallback(
-    (iss: Array<Issue>) => {
-      setIssues((prevIssues) =>
-        _(prevIssues)
-          .chain()
-          .union(iss)
-          .uniq(false, (i) => i.key)
-          .value()
-      )
-    },
-    [setIssues]
-  )
-  const resetIssue = useCallback(
-    (key: string) => {
-      setIssues((prevIssues) => _(prevIssues).filter((i) => i.key !== key))
-    },
-    [setIssues]
-  )
 
   return (
     <div className="error-page">
@@ -40,11 +19,7 @@ const Error: React.FC = () => {
         <h1>{t('error.title')}</h1>
       </div>
       <div className="error-page__content">
-        <RecentBanners
-          titleList={titleList}
-          setIssues={addIssues}
-          resetIssue={resetIssue}
-        />
+        <RecentBanners titleList={titleList} />
       </div>
       <FooterMain />
     </div>