Merge pull request #9 from QuickBlox/feature/provider-search-appointments

Implemented search appointments in provider app

Author: andrii-khomutovskyi-qb

packages/provider/src/icons/index.ts

@@ -30,3 +30,4 @@ export { default as ClientsSvg } from './clients.svg'
 export { default as InfoSvg } from './info.svg'
 export { default as TrashSvg } from './trash.svg'
 export { default as UpdateSvg } from './update.svg'
+export { default as SearchSvg } from './search.svg'

packages/provider/src/icons/search.svg

@@ -6,6 +6,7 @@ import FlatList from '../../components/FlatList'
 import AppointmentListItem from './ListItem'
 import useComponent, { AppointmentsProps } from './useComponent'
 import './styles.css'
+import { SearchSvg } from '../../icons'
 
 function hasUnreadMessage(
   appointment: QBAppointment,
@@ -22,17 +23,20 @@ function hasUnreadMessage(
 export default function Appointments(props: AppointmentsProps) {
   const { isOpenMenu, selected } = props
   const {
-    data: { isOffline },
+    data: { isOffline, search, appointmentsList },
     store: {
       callAppointmentId,
       callDuration,
       dialogs,
       users,
       usersLoading,
-      appointmentActiveList,
       appointmentLoading,
     },
-    handlers: { onRemoveClick, handleSelect, loadMoreAppointments },
+    handlers: {
+      onRemoveClick,
+      handleSelect,
+      handleChangeSearch,
+    },
   } = useComponent(props)
   const { t } = useTranslation()
 
@@ -61,13 +65,22 @@ export default function Appointments(props: AppointmentsProps) {
     <aside className={cn('appointments-container', { open: isOpenMenu })}>
       <Tabs value="queue">
         <Tabs.Tab name="queue" title={t('WaitingRoom')} disabled={isOffline}>
-          <FlatList
-            data={appointmentActiveList}
-            refreshing={appointmentLoading}
-            renderItem={renderListItem}
-            onEndReachedThreshold={0.8}
-            onEndReached={loadMoreAppointments}
-          />
+          <div className="appointment-search">
+            <SearchSvg className="icon" />
+            <input
+              onChange={handleChangeSearch}
+              placeholder={t('Search')}
+              type="search"
+              value={search}
+            />
+          </div>
+          <div className="appointments">
+            <FlatList
+              data={appointmentsList}
+              refreshing={appointmentLoading}
+              renderItem={renderListItem}
+            />
+          </div>
         </Tabs.Tab>
       </Tabs>
     </aside>

packages/provider/src/modules/Appointments/index.tsx

@@ -224,6 +224,48 @@
   width: 20px;
 }
 
+.appointments-container .appointment-search {
+  display: flex;
+  background-color: var(--AppointmentsSearch-backgroundColor);
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid var(--AppointmentsSearch-borderColor);;
+  box-sizing: border-box;
+  height: 45px;
+  margin: 12px;
+  padding-right: 10px;
+}
+
+.appointments-container .appointment-search input {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: var(--font-size-xl);
+  line-height: 22px;
+}
+
+.appointments-container .appointment-search input::placeholder {
+  color: var(--AppointmentsSearchPlaceholder-color);
+}
+
+.appointments-container .appointment-search .icon {
+  fill: var(--AppointmentsSearchIcon-fill);
+  margin: 10px;
+  height: 15px;
+  width: 15px;
+}
+
+.appointments-container .appointments {
+  border-top: 1px solid var(--AppointmentsList-borderColor);
+  overflow: hidden;
+  height: 100%;
+}
+
+.appointments-container .appointments .list {
+  height: 100%;
+}
+
 @media screen and (max-width: 768px) {
   .appointments-container {
     border-radius: 0;

packages/provider/src/modules/Appointments/styles.css

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { ChangeEvent, useEffect, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import {
@@ -71,6 +71,11 @@ export default createUseComponent((props: AppointmentsProps) => {
     sendSystemMessage,
   })
   const isOffline = useIsOffLine()
+  const [search, setSearch] = useState('')
+
+  const handleChangeSearch = ({
+    target: { value },
+  }: ChangeEvent<HTMLInputElement>) => setSearch(value)
 
   const {
     connected,
@@ -85,6 +90,10 @@ export default createUseComponent((props: AppointmentsProps) => {
     appointmentEntries,
   } = store
 
+  const appointmentsList = search ? appointmentActiveList.filter(
+      ({ client_id }) => users[client_id]?.full_name.toLowerCase().includes(search.toLowerCase())
+    ) : appointmentActiveList
+
   const handleSelect = (item: QBAppointment) => {
     if (isOpenMenu) toggleMenu()
 
@@ -139,11 +148,6 @@ export default createUseComponent((props: AppointmentsProps) => {
     }
   }
 
-  const loadMoreAppointments = () => {
-    if (appointmentLoading || !appointmentHasMore) return
-    handleGetAppointments(appointmentSkip + PER_PAGE)
-  }
-
   useEffect(() => {
     if (selected && appointmentActiveList && !isOffline) {
       const selectedAppointment = appointmentEntries[selected]
@@ -163,6 +167,12 @@ export default createUseComponent((props: AppointmentsProps) => {
     }
   }, [ready && connected])
 
+  useEffect(() => {
+    if (!appointmentLoading && appointmentHasMore) {
+      handleGetAppointments(appointmentSkip + PER_PAGE)
+    }
+  }, [appointmentLoading, appointmentHasMore, appointmentSkip])
+
   useEffect(() => {
     const handleSiteFocus = () => {
       handleGetAppointments(appointmentSkip)
@@ -196,11 +206,11 @@ export default createUseComponent((props: AppointmentsProps) => {
   return {
     store,
     actions,
-    data: { isOffline },
+    data: { isOffline, search, appointmentsList },
     handlers: {
       onRemoveClick,
       handleSelect,
-      loadMoreAppointments,
+      handleChangeSearch,
     },
   }
 })

packages/provider/src/modules/Appointments/useComponent.ts

@@ -202,6 +202,11 @@
   --AppointmentsItemChatUnreadDot-borderColor: var(--blue-1);
   --AppointmentsItemOnCallDots-color: var(--grey-13);
   --AppointmentsItemOnCallDots-color--selected: var(--grey-1);
+  --AppointmentsSearch-backgroundColor: var(--grey-1);
+  --AppointmentsSearch-borderColor: var(--blue-3);
+  --AppointmentsSearchPlaceholder-color: var(--blue-3);
+  --AppointmentsSearchIcon-fill: var(--blue-3);
+  --AppointmentsList-borderColor: var(--blue-3);
 
   --CallControlBtn-backgroundColor: var(--grey-1);
   --CallControlBtn-color: var(--grey-1);