feat: changes time and date input to react-aria (#317)

* feat: changes time input to react-aria * chore: removes irrelevant test
AtB-AS · Aug 5, 2024 · cc5b58d · cc5b58d
1 parent 54a9684
commit cc5b58d
Show file tree

Hide file tree

Showing 6 changed files with 1,322 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@atb-as/config-specs": "^3.27.0",
     "@atb-as/theme": "^10.4.1",
     "@github/combobox-nav": "^3.0.1",
+    "@internationalized/date": "^3.5.5",
     "@isaacs/ttlcache": "^1.4.1",
     "@leile/lobo-t": "^1.0.5",
     "@mapbox/polyline": "^1.2.1",
@@ -59,6 +60,7 @@
     "next": "14.2.5",
     "next-sitemap": "^4.2.3",
     "react": "18.3.1",
+    "react-aria-components": "^1.3.1",
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "^15.5.0",
     "satori": "^0.10.13",

diff --git a/src/modules/search-time/selector/__tests__/selector.test.tsx b/src/modules/search-time/selector/__tests__/selector.test.tsx
@@ -121,25 +121,6 @@ describe('search time selector', function () {
     expect(onChange).toHaveBeenCalled();
   });
 
-  it('should call onChange when time changes', async () => {
-    const onChange = vi.fn();
-    const output = render(
-      <SearchTimeSelector
-        initialState={{ mode: 'arriveBy', dateTime: 0 }}
-        onChange={onChange}
-      />,
-    );
-
-    const time = output.getByLabelText('Tid');
-
-    const newTime = format(addHours(new Date(), 1), 'HH:mm');
-
-    fireEvent.change(time, { target: { value: newTime } });
-
-    expect(time).toHaveValue(newTime);
-    expect(onChange).toHaveBeenCalled();
-  });
-
   it('should not show arriveBy', () => {
     const onChange = vi.fn();
     const output = render(

diff --git a/src/modules/search-time/selector/index.tsx b/src/modules/search-time/selector/index.tsx
@@ -9,6 +9,7 @@ import {
 import { SEARCH_MODES, SearchMode, SearchTime } from '../types';
 import style from './selector.module.css';
 import { fromLocalTimeToCET, setTimezone } from '@atb/utils/date';
+import TimeSelector from './time-selector';
 
 type SearchTimeSelectorProps = {
   onChange: (state: SearchTime) => void;
@@ -89,15 +90,15 @@ export default function SearchTimeSelector({
     });
   };
 
-  const internalOnTimeChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!event.target.value) return;
+  const internalOnTimeChange = (time: string) => {
+    if (!time) return;
 
-    setSelectedTime(event.target.value);
+    setSelectedTime(time);
 
     onChange({
       mode: selectedMode.mode,
       dateTime: new Date(
-        selectedDate.toISOString().slice(0, 10) + 'T' + event.target.value,
+        selectedDate.toISOString().slice(0, 10) + 'T' + time,
       ).getTime(),
     });
   };
@@ -162,21 +163,11 @@ export default function SearchTimeSelector({
                   onChange={internalOnDateChange}
                 />
               </div>
-              <div className={style.timeSelector}>
-                <label
-                  htmlFor="searchTimeSelector-time"
-                  data-testid="searchTimeSelector-time"
-                >
-                  {t(ModuleText.SearchTime.time)}
-                </label>
 
-                <input
-                  type="time"
-                  id="searchTimeSelector-time"
-                  value={selectedTime}
-                  onChange={internalOnTimeChange}
-                />
-              </div>
+              <TimeSelector
+                value={selectedTime}
+                onChange={internalOnTimeChange}
+              />
             </div>
           </motion.div>
         )}

diff --git a/src/modules/search-time/selector/selector.module.css b/src/modules/search-time/selector/selector.module.css
@@ -93,7 +93,8 @@
 }
 
 .dateSelector label,
-.timeSelector label {
+.timeSelector label,
+.timeSelectorLabel {
   padding: var(--spacings-medium);
   padding-right: 0;
   height: var(--height);
@@ -112,6 +113,19 @@
   border-bottom-right-radius: 0.75rem;
 }
 
+.timeSelectorInput {
+  height: var(--height);
+  padding: var(--spacings-medium);
+  color: var(--static-background-background_0-text);
+  flex: 1;
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  display: flex;
+}
+.timeSelectorSegment:focus {
+  background: var(--static-background-background_2-background);
+}
+
 .dateSelector input[type='date']:focus,
 .timeSelector input[type='time']:focus {
   outline: 0;

diff --git a/src/modules/search-time/selector/time-selector.tsx b/src/modules/search-time/selector/time-selector.tsx
@@ -0,0 +1,43 @@
+import {
+  DateInput,
+  DateSegment,
+  Label,
+  TimeField,
+} from 'react-aria-components';
+
+import { ModuleText, useTranslation } from '@atb/translations';
+import { parseTime } from '@internationalized/date';
+import style from './selector.module.css';
+
+export type TimeSelectorProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+export default function TimeSelector({ value, onChange }: TimeSelectorProps) {
+  const { t } = useTranslation();
+  const parsedValue = parseTime(value);
+
+  return (
+    <TimeField
+      value={parsedValue}
+      onChange={(change) => onChange(change.toString())}
+      hourCycle={24}
+      shouldForceLeadingZeros
+      className={style.timeSelector}
+      data-testid="searchTimeSelector-time"
+      granularity="minute"
+    >
+      <Label className={style.timeSelectorLabel}>
+        {t(ModuleText.SearchTime.time)}
+      </Label>
+      <DateInput className={style.timeSelectorInput}>
+        {(segment) => (
+          <DateSegment
+            className={style.timeSelectorSegment}
+            segment={segment}
+          />
+        )}
+      </DateInput>
+    </TimeField>
+  );
+}