Merge pull request #87 from MTR-Today/develop

.node-version

@@ -1 +1 @@
-20.3.0
+20.3.1

package.json

@@ -27,14 +27,14 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@react-hookz/web": "23.0.1",
-    "@tanstack/react-query": "4.29.15",
-    "@tanstack/router": "0.0.1-beta.89",
+    "@tanstack/react-query": "4.29.17",
+    "@tanstack/router": "0.0.1-beta.86",
     "color": "4.2.3",
     "constate": "3.3.2",
     "dayjs": "1.11.8",
     "framer-motion": "10.12.17",
     "i18next": "23.2.3",
-    "mtr-kit": "1.7.1",
+    "mtr-kit": "1.10.0",
     "ramda": "0.29.0",
     "react": "18.2.0",
     "react-device-detect": "2.2.3",
@@ -48,17 +48,17 @@
     "wretch": "2.5.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.5",
-    "@commitlint/config-conventional": "17.6.5",
+    "@commitlint/cli": "17.6.6",
+    "@commitlint/config-conventional": "17.6.6",
     "@spotify/eslint-config": "15.0.0",
     "@tanstack/eslint-plugin-query": "4.29.9",
     "@types/color": "3.0.3",
     "@types/ramda": "0.29.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@types/react-helmet": "6.1.6",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@vitejs/plugin-react": "4.0.1",
     "eslint": "8.43.0",
     "eslint-plugin-fp": "2.3.0",

src/Router.tsx

@@ -1,7 +1,9 @@
 import { RootRoute, Route, Router, createHashHistory } from '@tanstack/router'
 
-import { ControlledMap } from './containers/ControlledMap'
+import { AboutUs } from './containers/AboutUs'
 import { Layout } from './containers/Layout'
+import { StopDetail } from './containers/StopDetail'
+import { StopSchedules } from './containers/StopSchedules'
 
 const rootRoute = new RootRoute({
   component: Layout,
@@ -10,17 +12,42 @@ const rootRoute = new RootRoute({
 const indexRoute = new Route({
   getParentRoute: () => rootRoute,
   path: '/',
-  component: ControlledMap,
+  component: () => <></>,
 })
 
-const routeTree = rootRoute.addChildren([indexRoute])
+const aboutUsRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/about-us',
+  component: AboutUs,
+})
+
+const stopDetailRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/stops/$stop',
+  component: StopDetail,
+})
+
+export const stopScheduleRoute = new Route({
+  getParentRoute: () => stopDetailRoute,
+  path: 'schedules',
+  component: StopSchedules,
+})
+
+stopDetailRoute.addChildren([stopScheduleRoute])
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  aboutUsRoute,
+  stopDetailRoute,
+])
 
 const hashHistory = createHashHistory()
 
 export const router = new Router({ routeTree, history: hashHistory })
 
+// Quick fix: https://github.com/TanStack/router/issues/555
 declare module '@tanstack/router' {
-  interface Register {
+  interface RegisterRouter {
     router: typeof router
   }
 }

src/components/LineBuilder/Stop.tsx

@@ -17,7 +17,7 @@ export const Stop: React.FC<Props> = ({ stop, namePosition = 'bottom' }) => {
   const { colorMode } = useColorMode()
   const { stops, schedules, color } = useLine()
 
-  const { schedule } = schedules.find(item => item.code === stop) || {}
+  const { schedule } = schedules.find(item => item.stop === stop) || {}
   const config = stops.find(item => item.code === stop)
 
   const getDisplayTime = useCallback(

src/containers/AboutUs/index.tsx

@@ -0,0 +1,62 @@
+import {
+  Box,
+  Button,
+  Heading,
+  Img,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { useNavigate } from '@tanstack/router'
+import { useTranslation } from 'react-i18next'
+import { IoLogoGithub } from 'react-icons/io'
+
+import packageJson from '../../../package.json'
+import logo from '../../assets/logo.svg'
+
+export const AboutUs: React.FC = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      onCloseComplete={() => {
+        navigate({ to: '/' })
+      }}
+      isCentered
+      size="xs"
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{t('about_us')}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Stack spacing={2} alignItems="center" mb="4">
+            <Box borderWidth="4px" borderRadius="lg" overflow="hidden">
+              <Img src={logo} w="128px" />
+            </Box>
+            <Heading as="h1" fontSize="lg">
+              MTR Today
+            </Heading>
+            <Box color="GrayText">v{packageJson.version}</Box>
+            <Link href="https://github.com/mtr-today">
+              <Button size="sm" leftIcon={<IoLogoGithub />}>
+                {t('source_code')}
+              </Button>
+            </Link>
+          </Stack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

src/containers/Layout/Header.tsx

@@ -1,10 +1,14 @@
-import { HamburgerIcon, SunIcon, TimeIcon } from '@chakra-ui/icons'
+import {
+  HamburgerIcon,
+  InfoOutlineIcon,
+  SunIcon,
+  TimeIcon,
+} from '@chakra-ui/icons'
 import {
   Box,
   Flex,
   IconButton,
   Img,
-  Link,
   Menu,
   MenuButton,
   MenuDivider,
@@ -14,9 +18,9 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import styled from '@emotion/styled'
+import { Link as RouterLink } from '@tanstack/router'
 import { lines } from 'mtr-kit'
 import { useTranslation } from 'react-i18next'
-import { IoLogoGithub } from 'react-icons/io'
 import { MdGTranslate } from 'react-icons/md'
 
 import logoDark from '../../assets/logoDark.svg'
@@ -142,9 +146,9 @@ export const Header: React.FC = () => {
             </RadioSwitch>
           </MenuItem>
           <MenuDivider />
-          <Link href="https://github.com/mtr-today">
-            <MenuItem icon={<IoLogoGithub />}>{t('source_code')}</MenuItem>
-          </Link>
+          <RouterLink to="/about-us">
+            <MenuItem icon={<InfoOutlineIcon />}>{t('about_us')}</MenuItem>
+          </RouterLink>
         </MenuList>
       </Menu>
     </Flex>

src/containers/Layout/index.tsx

@@ -1,14 +1,25 @@
 import { useColorMode } from '@chakra-ui/react'
+import { useQuery } from '@tanstack/react-query'
 import { Outlet } from '@tanstack/router'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
+import { schedulesContext } from '../../contexts/schedulesContext'
+import { scheduleApi } from '../../services/scheduleApi'
+import { ControlledMap } from '../ControlledMap'
 import { Header } from './Header'
 
 export const Layout = () => {
   const { colorMode } = useColorMode()
   const { t } = useTranslation()
 
+  const { data: schedules = [] } = useQuery({
+    queryKey: ['schedules'],
+    queryFn: () => scheduleApi.list(),
+    refetchInterval: 10000,
+    refetchOnMount: true,
+  })
+
   return (
     <>
       <Helmet>
@@ -21,7 +32,10 @@ export const Layout = () => {
         <title>{t('title')}</title>
       </Helmet>
       <Header />
-      <Outlet />
+      <schedulesContext.Provider value={schedules}>
+        <ControlledMap />
+        <Outlet />
+      </schedulesContext.Provider>
     </>
   )
 }

src/containers/MtrMap/EndTip.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps, useColorMode } from '@chakra-ui/react'
 import c from 'color'
-import { LineCode, lines } from 'mtr-kit'
-import { memo, useContext, useMemo } from 'react'
+import { LineCode, lineMap } from 'mtr-kit'
+import { memo, useContext } from 'react'
 
 import { mapContext } from '../../contexts/mapContext'
 
@@ -10,10 +10,7 @@ export const EndTip: React.FC<
 > = memo(({ coord: [x, y], line, flip = false, ...props }) => {
   const { hoveringLine } = useContext(mapContext)
   const { colorMode } = useColorMode()
-  const color = useMemo(
-    () => lines.find(item => item.code === line)?.color,
-    [line]
-  )
+  const color = lineMap[line].color
 
   return (
     <Box

src/containers/MtrMap/Line.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import c from 'color'
-import { LineCode, lines } from 'mtr-kit'
-import { memo, useCallback, useContext, useMemo } from 'react'
+import { LineCode, lineMap } from 'mtr-kit'
+import { memo, useCallback, useContext } from 'react'
 import { roundCorners } from 'svg-round-corners'
 
 import { mapContext } from '../../contexts/mapContext'
@@ -12,10 +12,7 @@ export const Line: React.FC<
   const { hoveringLine, setHoveringLine } = useContext(mapContext)
   const { colorMode } = useColorMode()
 
-  const color = useMemo(
-    () => lines.find(item => item.code === line)?.color,
-    [line]
-  )
+  const color = lineMap[line].color
 
   const handleMouseEnter = useCallback(() => {
     setHoveringLine(line)

src/containers/MtrMap/Name.tsx

@@ -1,12 +1,12 @@
 import { Box, BoxProps } from '@chakra-ui/react'
-import { stops } from 'mtr-kit'
-import { memo, useContext, useMemo } from 'react'
+import { stopMap } from 'mtr-kit'
+import { memo, useContext } from 'react'
 
 import { stopContext } from '../../contexts/stopContext'
 
 export const Name: React.FC<BoxProps> = memo(props => {
   const { stop, hovering } = useContext(stopContext)
-  const config = useMemo(() => stops.find(item => item.code === stop), [stop])
+  const config = stop ? stopMap[stop] : undefined
 
   return (
     <Box position="absolute" textAlign="center" {...props}>