refactor: widget and selectors (#1090)

Author: AvivAbachi

src/pages/about/index.tsx

@@ -188,7 +188,7 @@ const Contributors = () => {
   const { contributors, isLoading, isError } = useContributions()
 
   return (
-    <Widget>
+    <Widget marginBottom>
       <h2>{t('aboutPage.contributors')}</h2>
       <p>
         {t('aboutPage.contributorsText')}

src/pages/components/OperatorSelector.tsx

@@ -23,7 +23,7 @@ export default function OperatorSelector({
     getOperators(filter).then(setOperators)
   }, [filter])
 
-  const value = operators.find((operator) => operator.id === operatorId)
+  const value = operators.find((operator) => operator.id === operatorId) || null
 
   return (
     <Autocomplete

src/pages/components/RouteSelector.tsx

@@ -21,7 +21,7 @@ const getRouteTitle = (route: BusRoute, t: TFunction<'translation', undefined>)
 
 const RouteSelector = ({ routes, routeKey, disabled, setRouteKey }: RouteSelectorProps) => {
   const { t } = useTranslation()
-  const value = routes.find((route) => route.key === routeKey)
+  const value = routes.find((route) => route.key === routeKey) || null
 
   useEffect(() => {
     routes.sort((a, b) => {

src/pages/components/StopSelector.tsx

@@ -10,21 +10,21 @@ type StopSelectorProps = {
 }
 
 const StopSelector = ({ stops, stopKey, setStopKey }: StopSelectorProps) => {
-  const valueFinned = stops.find((stop) => stop.key === stopKey)
-  const value = valueFinned ? valueFinned : null
+  const value = stops.find((stop) => stop.key === stopKey) || null
   const { t } = useTranslation()
 
   return (
     <Autocomplete
       disablePortal
       value={value}
-      onChange={(e, value) => setStopKey(value ? value.key : '0')}
+      onChange={(e, value) => setStopKey(value ? value.key : '')}
       id="stop-select"
       options={stops}
       renderInput={(params) => (
         <TextField {...params} label={formatted(t('choose_stop'), stops.length.toString())} />
       )}
       getOptionLabel={(stop) => stop.name}
+      getOptionKey={(stop) => stop.key}
     />
   )
 }

src/pages/dashboard/ArrivalByTimeChart/DayTimeChart.tsx

@@ -40,7 +40,7 @@ const DayTimeChart: FC<DayTimeChartProps> = ({ startDate, endDate, operatorId })
   )
 
   return (
-    <Widget>
+    <Widget marginBottom>
       <h2 className="title">
         {groupByHour ? t('dashboard_page_graph_title_hour') : t('dashboard_page_graph_title_day')}
       </h2>

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -71,7 +71,7 @@ function GapsByHour({ lineRef, operatorRef, fromDate, toDate }: BusLineStatistic
 
   return (
     lineRef > 0 && (
-      <Widget>
+      <Widget marginBottom>
         {isLoading && lineRef ? (
           <Skeleton active />
         ) : (

src/pages/publicAppeal/index.tsx

@@ -17,22 +17,22 @@ const PublicAppeal = () => {
           {t(`${pageName}.title`)}
         </Title>
         {tasks.map((task, i) => (
-          <Task title={task.title} description={task.description} index={i} key={i} />
+          <Task {...task} marginBottom={tasks.length - 1 === i} key={i} />
         ))}
       </Space>
     </PublicAppealStyle>
   )
 }
 
 type TaskDetails = {
-  index: number
   title: string
   description: string
+  marginBottom?: boolean
 }
 
-const Task = ({ index, title, description }: TaskDetails) => {
+const Task = ({ title, description, marginBottom }: TaskDetails) => {
   return (
-    <Widget key={index}>
+    <Widget marginBottom={marginBottom}>
       <h2 className="public">{title}</h2>
       <p>{description}</p>
       <a href="https://open-bus-stride-api.hasadna.org.il/docs">Open Bus Stride API</a>

src/pages/singleLineMap/index.tsx

@@ -45,8 +45,9 @@ const SingleLineMapPage = () => {
         }))
       })
       .catch((err) => {
-        console.error(err)
-        setSearch((current) => ({ ...current, routes: undefined, routeKey: undefined }))
+        if (err?.cause?.name !== 'AbortError') {
+          setSearch((current) => ({ ...current, routes: undefined, routeKey: undefined }))
+        }
       })
 
     return () => controller.abort()

src/shared/Widget.tsx

@@ -1,13 +1,18 @@
 import { Card, CardContent } from '@mui/material'
 import cn from 'classnames'
-
 import { useTheme } from 'src/layout/ThemeContext'
 
-const Widget = (props: { children?: React.ReactNode }) => {
+const Widget = ({
+  marginBottom,
+  children,
+}: {
+  marginBottom?: boolean
+  children?: React.ReactNode
+}) => {
   const { isDarkTheme } = useTheme()
   return (
-    <Card className={cn('card widget', { dark: isDarkTheme })}>
-      <CardContent>{props.children} </CardContent>
+    <Card className={cn('card widget', { dark: isDarkTheme, marginBottom })}>
+      <CardContent>{children}</CardContent>
     </Card>
   )
 }

src/shared/shared.css

@@ -2,8 +2,8 @@
   border-radius: 4px;
 }
 
-.widget:last-of-type {
-  margin-bottom: 20px;
+.widget.marginBottom {
+  margin-bottom: 16px;
 }
 
 .card.dark {