Merge pull request #32 from hato-org/dev

Deploy to master

.env.development

@@ -1,7 +1,7 @@
-VITE_APP_NAME='Hato (Dev)'
-VITE_REPO_URL='https://github.com/hato-org/hato'
-VITE_STATUSPAGE_URL='https://status.hato.cf'
-VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
-VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
-VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
+VITE_APP_NAME='Hato (Dev)'
+VITE_REPO_URL='https://github.com/hato-org/hato'
+VITE_STATUSPAGE_URL='https://status.hato.cf'
+VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
+VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
+VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
 VITE_GOOGLE_CLIENT_ID='933844444976-d5n9lrv65rr50l2v5q42cqmkcmsl13ej.apps.googleusercontent.com'

.env.local-api

@@ -1,7 +1,7 @@
-VITE_APP_NAME='Hato (Dev)'
-VITE_REPO_URL='https://github.com/hato-org/hato'
-VITE_STATUSPAGE_URL='https://status.hato.cf'
-VITE_API_URL='http://localhost:8460'
-VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
-VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
+VITE_APP_NAME='Hato (Dev)'
+VITE_REPO_URL='https://github.com/hato-org/hato'
+VITE_STATUSPAGE_URL='https://status.hato.cf'
+VITE_API_URL='http://localhost:8460'
+VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
+VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
 VITE_GOOGLE_CLIENT_ID='933844444976-d5n9lrv65rr50l2v5q42cqmkcmsl13ej.apps.googleusercontent.com'

.env.production

@@ -1,7 +1,7 @@
-VITE_APP_NAME='Hato'
-VITE_REPO_URL='https://github.com/hato-org/hato'
-VITE_STATUSPAGE_URL='https://status.hato.cf'
-VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
-VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
-VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
+VITE_APP_NAME='Hato'
+VITE_REPO_URL='https://github.com/hato-org/hato'
+VITE_STATUSPAGE_URL='https://status.hato.cf'
+VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
+VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
+VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
 VITE_GOOGLE_CLIENT_ID='933844444976-d5n9lrv65rr50l2v5q42cqmkcmsl13ej.apps.googleusercontent.com'

.env.staging

@@ -1,8 +1,8 @@
-NODE_ENV=production
-VITE_APP_NAME='Hato (Staging)'
-VITE_REPO_URL='https://github.com/hato-org/hato/tree/dev'
-VITE_STATUSPAGE_URL='https://status.hato.cf'
-VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
-VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
-VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
+NODE_ENV=production
+VITE_APP_NAME='Hato (Staging)'
+VITE_REPO_URL='https://github.com/hato-org/hato/tree/dev'
+VITE_STATUSPAGE_URL='https://status.hato.cf'
+VITE_API_URL='https://yrmpojmxdi.execute-api.ap-northeast-1.amazonaws.com'
+VITE_STATUS_API_URL='https://hato-status.pman.workers.dev'
+VITE_API_DOCS_URL='https://www.postman.com/pman2976/workspace/hato/documentation/18361719-05a57e57-1807-406c-a684-3a2fba667af9'
 VITE_GOOGLE_CLIENT_ID='933844444976-d5n9lrv65rr50l2v5q42cqmkcmsl13ej.apps.googleusercontent.com'

.eslintrc.json

@@ -42,7 +42,7 @@
     "@typescript-eslint/no-use-before-define": "off",
     "no-underscore-dangle": "off",
     "no-console": "warn",
-    "no-nested-ternary": "warn",
+    "no-nested-ternary": "off",
     "import/extensions": "off",
     "import/prefer-default-export": "off"
   }

CHANGELOG.mdx

@@ -13,6 +13,27 @@ export const YouTubeEmbed = ({ id }) => (
 
 # Changelog
 
+## 2024-12-07
+
+### 交通情報ページリニューアル
+
+従来は近隣路線の運行情報のみ表示していた交通情報ページですが、
+
+- 屋代高校前駅から発車する次の列車のカウントダウン
+- それらの列車の各駅停車時刻
+
+が表示されるようになりました。また、運行情報のUI改善を行いました。  
+カウントダウンについては以前よりホーム画面ウィジェットでは利用可能でしたが、より詳細に情報を確認することが可能になっています。  
+今後他路線連絡駅での連絡列車の表示や、屋代高校前駅の時刻表を表形式で表示できるようにする予定です。（実現時期未定）
+
+### Hatoの更新について
+
+2022年のリリースから月1回ペースで少しずつ更新を続けてきたHatoですが、主開発者の環境変化により、更新ペースがかなり遅くなってしまっています。  
+まだ開発途上ということもあり、利便性や使用感にまだ課題が多く残されているにも関わらず、現在使っていただいているユーザーの皆様には感謝しかありません。本当にありがとうございます。  
+Hatoはユーザーの方々の協力なしでは続いていけないアプリですので、今後もぜひHatoを使っていただけると嬉しいです。
+
+---
+
 ## 2024-01-10
 
 **あけましておめでとうございます。本年もHatoをよろしくお願いいたします。**

package.json

@@ -95,5 +95,6 @@
     "vite-plugin-pwa": "^0.17.2",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.4"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/@types/transit.d.ts

@@ -20,3 +20,15 @@ interface DiaInfo {
   description: string;
   updatedAt: string;
 }
+
+interface TransitTimetable {
+  starting: string;
+  destination: string;
+  stations: TransitTimetableStation[];
+}
+
+interface TransitTimetableStation {
+  name: string;
+  arriveAt?: string;
+  departAt?: string;
+}

src/components/calendar/AddEventDrawer.tsx

@@ -198,7 +198,7 @@ const AddEventDrawer = React.memo(
                       }),
                     }}
                     options={searchRes}
-                    loadOptions={(value) => searchTags(value)}
+                    loadOptions={(value) => searchTags(value || '*')}
                     isLoading={searchPending}
                     value={tags}
                     onChange={(e: readonly Tag[]) => setTags(e as Tag[])}

src/components/calendar/Calendar.tsx

@@ -91,15 +91,13 @@ const Calendar = React.memo(
                     >
                       <Text
                         color={
-                          /* eslint-disable no-nested-ternary */
                           isSameMonth(date, day)
                             ? isSaturday(day)
                               ? 'blue.400'
                               : isSunday(day)
                                 ? 'red.400'
                                 : 'title'
                             : 'description'
-                          /* eslint-enable no-nested-ternary */
                         }
                         textStyle="title"
                         fontSize="xs"
@@ -141,37 +139,31 @@ const Calendar = React.memo(
                               px={{ base: 0, md: '2px' }}
                               py={{ base: 0, md: '1px' }}
                               bg={
-                                /* eslint-disable no-nested-ternary */
                                 event.external
                                   ? event.isAllDay
                                     ? 'green.400'
                                     : 'green.50'
                                   : event.isAllDay
                                     ? 'blue.400'
                                     : 'blue.50'
-                                /* eslint-enable no-nested-ternary */
                               }
                               color={
-                                /* eslint-disable no-nested-ternary */
                                 event.external
                                   ? event.isAllDay
                                     ? 'white'
                                     : 'green.400'
                                   : event.isAllDay
                                     ? 'white'
                                     : 'blue.400'
-                                /* eslint-enable no-nested-ternary */
                               }
                               _hover={{
-                                /* eslint-disable no-nested-ternary */
                                 bg: event.external
                                   ? event.isAllDay
                                     ? 'green.500'
                                     : 'green.100'
                                   : event.isAllDay
                                     ? 'blue.500'
                                     : 'blue.100',
-                                /* eslint-enable no-nested-ternary */
                               }}
                               transition="all .2s ease"
                               as={RouterLink}

src/components/cards/Timetable.tsx

@@ -90,7 +90,6 @@ function Timetable() {
         ) : (
           <Error type="userScheduleNotSet" />
         )}
-        {/* eslint-enable no-nested-ternary */}
       </VStack>
       <DivisionEditor date={date} isOpen={isOpen} onClose={onClose} />
     </>

src/components/cards/Transit.tsx

@@ -1,37 +1,33 @@
 import React from 'react';
 import {
   Box,
-  Center,
   Collapse,
   Heading,
   HStack,
   Icon,
   LinkBox,
   Skeleton,
   Spacer,
-  StackDivider,
+  Stack,
   Text,
   useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
 import { TbChevronRight } from 'react-icons/tb';
-import { differenceInMinutes, differenceInSeconds, format } from 'date-fns/esm';
 import { useSeconds } from 'use-seconds';
-import DiaStatus from '../transit/DiaStatus';
-import { useTransit } from '@/services/transit';
-
-const formatTimeDifference = (dateLeft: Date, dateRight: Date) => {
-  const diffSec = differenceInSeconds(dateLeft, dateRight);
-  const diffMin = differenceInMinutes(dateLeft, dateRight);
-
-  return `${diffMin}:${Math.abs(diffSec - 60 * diffMin)
-    .toString()
-    .padStart(2, '0')}`;
-};
+import { useDiainfo, useTransitTimetable } from '@/services/transit';
+import StatusAlert from '../transit/StatusAlert';
+import Error from './Error';
+import {
+  PrimaryUpcomingTrainCountdown,
+  SecondoryUpcomingTrainCountdown,
+} from '../transit/Upcoming';
+import { dayNumberToString, formatTimeStringToDate } from '@/utils/transit';
 
 export default function Transit() {
-  const { data, isPending } = useTransit();
+  // const { data, isPending } = useTransit();
+  const { data: diaInfo, status, error } = useDiainfo();
 
   return (
     <VStack spacing={4} w="100%" align="flex-start">
@@ -48,85 +44,82 @@ export default function Transit() {
         </HStack>
       </LinkBox>
       <VStack p={2} align="flex-start" w="100%">
-        <DiaStatus />
+        {status === 'error' ? (
+          <Error error={error} />
+        ) : (
+          <Skeleton w="full" rounded="xl" isLoaded={status !== 'pending'}>
+            <StatusAlert lines={diaInfo} />
+          </Skeleton>
+        )}
         <Text textStyle="title" fontSize="lg">
           長野方面
         </Text>
-        <Skeleton w="100%" rounded="xl" isLoaded={!isPending}>
-          <TransitButton transits={data?.nagano} />
-        </Skeleton>
+        <UpcomingTrainsStack dest="nagano" />
         <Text textStyle="title" fontSize="lg">
           上田方面
         </Text>
-        <Skeleton w="100%" rounded="xl" isLoaded={!isPending}>
-          <TransitButton transits={data?.ueda} />
-        </Skeleton>
+        <UpcomingTrainsStack dest="ueda" />
       </VStack>
     </VStack>
   );
 }
 
-const TransitButton = React.memo(
-  ({ transits }: { transits?: TransitInfo[] }) => {
-    const { isOpen, onToggle } = useDisclosure();
-    const [date] = useSeconds();
-    const upcomingTransit = transits?.filter(
-      (transit) => new Date(transit.leaveAt).valueOf() > Date.now(),
-    );
+function UpcomingTrainsStack({ dest }: { dest: 'nagano' | 'ueda' }) {
+  const { isOpen, onToggle } = useDisclosure();
+  const [date] = useSeconds();
+  const day = dayNumberToString(date.getDay());
 
-    return upcomingTransit?.length ? (
-      <VStack w="100%" spacing={0} rounded="xl" layerStyle="button">
-        <HStack w="100%" p={2} onClick={onToggle}>
-          <StackDivider borderWidth={2} borderColor="blue.400" rounded="full" />
-          <VStack spacing={0} align="flex-start">
-            <Text textStyle="title" fontSize="xl">
-              {format(new Date(upcomingTransit[0].leaveAt), 'HH:mm')}
-            </Text>
-            <Text textStyle="description">
-              {upcomingTransit[0].destination}行
-            </Text>
-          </VStack>
-          <Spacer />
-          <Text textStyle="title" fontSize="3xl">
-            {formatTimeDifference(new Date(upcomingTransit[0].leaveAt), date)}
-          </Text>
-        </HStack>
-        <Box w="100%">
+  const { data, isPending } = useTransitTimetable({
+    dest,
+    kind: day,
+  });
+
+  const upcoming = data
+    ?.map(({ starting, destination, stations }) => {
+      const yashiroSta = stations.find(({ name }) => name === '屋代高校前');
+
+      const arriveDate = formatTimeStringToDate(date, yashiroSta?.arriveAt);
+      const departDate = formatTimeStringToDate(date, yashiroSta?.departAt);
+
+      return {
+        starting,
+        destination,
+        stations,
+        arriveAt: arriveDate,
+        departAt: departDate,
+      };
+    })
+    .filter(({ departAt }) => departAt > date);
+
+  return (
+    <Skeleton w="full" rounded="xl" isLoaded={!isPending}>
+      <VStack spacing={0} layerStyle="button" rounded="xl">
+        <PrimaryUpcomingTrainCountdown
+          date={date}
+          train={upcoming?.[0]}
+          onClick={onToggle}
+        />
+        <Box w="full">
           <Collapse in={isOpen}>
-            {upcomingTransit.slice(1).map((transit) => (
-              <TransitQueue
-                key={transit.leaveAt}
-                date={date}
-                transit={transit}
-              />
-            ))}
+            {(upcoming?.length ?? 0) > 2 && (
+              <Stack
+                flexDirection={{ base: 'column', md: 'row' }}
+                spacing={{ base: 0, md: 2 }}
+                w="full"
+              >
+                <SecondoryUpcomingTrainCountdown
+                  date={date}
+                  train={upcoming?.[1]}
+                />
+                <SecondoryUpcomingTrainCountdown
+                  date={date}
+                  train={upcoming?.[2]}
+                />
+              </Stack>
+            )}
           </Collapse>
         </Box>
       </VStack>
-    ) : (
-      <Center w="100%" py={2}>
-        <Text textStyle="description" fontWeight="bold">
-          次の電車はありません
-        </Text>
-      </Center>
-    );
-  },
-);
-
-const TransitQueue = React.memo(
-  ({ date, transit }: { date: Date; transit: TransitInfo }) => (
-    <HStack w="100%" p={2} pl={6}>
-      <StackDivider borderWidth={1} borderColor="blue.400" rounded="full" />
-      <VStack spacing={0} align="flex-start">
-        <Text fontSize="md">{format(new Date(transit.leaveAt), 'HH:mm')}</Text>
-        <Text textStyle="description" fontSize="2xs">
-          {transit.destination}行
-        </Text>
-      </VStack>
-      <Spacer />
-      <Text textStyle="title">
-        {formatTimeDifference(new Date(transit.leaveAt), date)}
-      </Text>
-    </HStack>
-  ),
-);
+    </Skeleton>
+  );
+}