ui/util: convert js files to typescript

package.json

@@ -77,7 +77,7 @@
     "@types/node": "22.10.5",
     "@types/prop-types": "15.7.14",
     "@types/react": "18.3.1",
-    "@types/react-big-calendar": "1.16.0",
+    "@types/react-big-calendar": "1.16.1",
     "@types/react-dom": "18.3.1",
     "@types/react-transition-group": "4.4.12",
     "@types/react-virtualized-auto-sizer": "1.0.4",

web/src/app/util/LuxonLocalizer.ts

@@ -0,0 +1,100 @@
+import {
+  DateLocalizer,
+  DateRange,
+  DateRangeFormatFunction,
+  Formats,
+} from 'react-big-calendar'
+import { DateTime } from 'luxon'
+
+const isSameMonth = (range: DateRange): boolean => {
+  return (
+    range.start.getFullYear() === range.end.getFullYear() &&
+    range.start.getMonth() === range.end.getMonth()
+  )
+}
+
+const dateRangeFormat: DateRangeFormatFunction = (
+  range,
+  culture,
+  localizer,
+): string =>
+  `${localizer?.format(range.start, 'D', culture)} — ${localizer?.format(range.end, 'D', culture)}`
+
+const timeRangeFormat: DateRangeFormatFunction = (
+  range,
+  culture,
+  localizer,
+): string =>
+  `${localizer?.format(range.start, 't', culture)} — ${localizer?.format(range.end, 't', culture)}`
+
+const timeRangeStartFormat: DateRangeFormatFunction = (
+  range,
+  culture,
+  localizer,
+): string => `${localizer?.format(range.start, 't', culture)} — `
+
+const timeRangeEndFormat: DateRangeFormatFunction = (
+  range,
+  culture,
+  localizer,
+): string => ` — ${localizer?.format(range.end, 't', culture)}`
+
+const weekRangeFormat: DateRangeFormatFunction = (
+  range,
+  culture,
+  localizer,
+): string =>
+  `${localizer?.format(range.start, 'MMMM dd', culture)} — ${localizer?.format(
+    range.end,
+    isSameMonth(range) ? 'dd' : 'MMMM dd',
+    culture,
+  )}`
+
+export const formats: Formats = {
+  dateFormat: 'dd',
+  dayFormat: 'dd EEE',
+  weekdayFormat: 'ccc',
+
+  selectRangeFormat: timeRangeFormat,
+  eventTimeRangeFormat: timeRangeFormat,
+  eventTimeRangeStartFormat: timeRangeStartFormat,
+  eventTimeRangeEndFormat: timeRangeEndFormat,
+
+  timeGutterFormat: 't',
+
+  monthHeaderFormat: 'MMMM yyyy',
+  dayHeaderFormat: 'cccc MMM dd',
+  dayRangeHeaderFormat: weekRangeFormat,
+  agendaHeaderFormat: dateRangeFormat,
+
+  agendaDateFormat: 'ccc MMM dd',
+  agendaTimeFormat: 't',
+  agendaTimeRangeFormat: timeRangeFormat,
+}
+
+interface LuxonLocalizerOptions {
+  firstDayOfWeek: number
+}
+
+const LuxonLocalizer = (
+  DateTime: typeof import('luxon').DateTime,
+  { firstDayOfWeek }: LuxonLocalizerOptions,
+): DateLocalizer => {
+  const locale = (d: DateTime, c?: string): DateTime =>
+    c ? d.reconfigure({ locale: c }) : d
+
+  return new DateLocalizer({
+    formats,
+    firstOfWeek() {
+      return firstDayOfWeek
+    },
+
+    format(value, format, culture) {
+      return locale(DateTime.fromJSDate(value as Date), culture).toFormat(
+        format,
+      )
+    },
+  })
+}
+
+export default LuxonLocalizer

web/src/app/util/graphql.test.js → web/src/app/util/graphql.test.ts

@@ -1,5 +1,5 @@
 import { gql } from 'urql'
-import { print } from 'graphql'
+import { DocumentNode, print } from 'graphql'
 
 import {
   queryByName,
@@ -9,7 +9,8 @@ import {
   prefixQuery,
 } from './graphql'
 
-const expectEqual = (a, b) => expect(print(a)).toBe(print(b))
+const expectEqual = (a: DocumentNode, b: DocumentNode): void =>
+  expect(print(a)).toBe(print(b))
 
 describe('queryByName', () => {
   it('should fetch a single query', () => {
@@ -32,7 +33,12 @@ describe('queryByName', () => {
 })
 
 describe('fieldAlias', () => {
-  const check = (name, arg, query, expected) =>
+  const check = (
+    name: string,
+    arg: string,
+    query: DocumentNode,
+    expected: DocumentNode,
+  ): void =>
     test(name, () =>
       expect(print(fieldAlias(query, arg))).toBe(print(expected)),
     )
@@ -77,14 +83,19 @@ describe('fieldAlias', () => {
 })
 
 describe('prefixQuery', () => {
-  const check = (name, arg, query, expected) =>
+  const check = (
+    name: string,
+    arg: string,
+    query: DocumentNode,
+    expected: DocumentNode,
+  ): void =>
     test(name, () =>
       expect(print(prefixQuery(query, 'q0_'))).toBe(print(expected)),
     )
 
   check(
     'should prefix query and variables',
-    {},
+    '',
     gql`
       query ($id: ID!, $id2: ID!) {
         user(id: $id) {
@@ -113,7 +124,12 @@ describe('prefixQuery', () => {
 })
 
 describe('mapInputVars', () => {
-  const check = (name, arg, query, expected) =>
+  const check = (
+    name: string,
+    arg: Record<string, string>,
+    query: DocumentNode,
+    expected: DocumentNode,
+  ): void =>
     test(name, () =>
       expect(print(mapInputVars(query, arg))).toBe(print(expected)),
     )
@@ -183,7 +199,12 @@ describe('mapInputVars', () => {
 })
 
 describe('mergeFields', () => {
-  const check = (name, query1, query2, expected) =>
+  const check = (
+    name: string,
+    query1: DocumentNode,
+    query2: DocumentNode,
+    expected: DocumentNode,
+  ): void =>
     test(name, () =>
       expect(print(mergeFields(query1, query2))).toBe(print(expected)),
     )