Added last update, cache strategy, telegram fail notifications, teachers photos

src/app/agregator/schedule.ts

@@ -4,6 +4,7 @@ import contentTypeParser from 'content-type'
 // import { parse } from 'node-html-parser'
 import { JSDOM } from 'jsdom'
 import { content as mockContent } from './mock'
+import { reportParserError } from '@/app/logger'
 
 // ПС-7: 146
 export async function getSchedule(groupID: number, groupName: string): Promise<Day[]> {
@@ -17,11 +18,13 @@ export async function getSchedule(groupID: number, groupName: string): Promise<D
       return parsePage(root, groupName)
     } catch(e) {
       console.error('Error while parsing lk.ks.psuti.ru')
+      reportParserError(new Date().toISOString(), 'Не удалось сделать парсинг для группы', groupName)
       throw e
     }
   } else {
     console.error(page.status, contentType)
     console.error(content.length > 500 ? content.slice(0, 500 - 3) + '...' : content)
+    reportParserError(new Date().toISOString(), 'Не удалось получить страницу для группы', groupName)
     throw new Error('Error while fetching lk.ks.psuti.ru')
   }
 }

src/app/logger.ts

@@ -0,0 +1,18 @@
+import TelegramBot from 'node-telegram-bot-api'
+
+const token = process.env.PARSING_FAILURE_NOTIFICATIONS_TELEGRAM_BOTAPI_TOKEN
+const ownerID = process.env.PARSING_FAILURE_NOTIFICATIONS_TELEGRAM_CHAT_ID
+
+let bot: TelegramBot
+if (!token || !ownerID) {
+  console.warn('Telegram Token is not specified. This means you won\'t get any notifications about parsing failures.')
+} else {
+  bot = new TelegramBot(token, { polling: false })
+}
+
+
+export async function reportParserError(...text: string[]) {
+  if (!token || !ownerID) return
+
+  await bot.sendMessage(ownerID, text.join(' '))
+}

src/entities/last-update-at/index.tsx

@@ -0,0 +1,14 @@
+import { formatDistanceStrict } from 'date-fns'
+import { ru as dateFnsRuLocale } from 'date-fns/locale'
+
+export function LastUpdateAt({ date }: {
+  date: Date
+}) {
+  return (
+    <div className='flex md:justify-end px-4 md:h-0'>
+      <span className='text-sm text-border md:whitespace-pre-wrap md:text-right'>
+        Последнее обновление:{'\n'}{formatDistanceStrict(date, Date.now(), { locale: dateFnsRuLocale, addSuffix: true })}
+      </span>
+    </div>
+  )
+}

src/features/add-group/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Button } from '@/shadcn/ui/button'
+import { MdAdd } from 'react-icons/md'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shadcn/ui/dialog'
+import Link from 'next/link'
+import coolEmoji from './1925.png'
+import Image from 'next/image'
+import { BsTelegram } from 'react-icons/bs'
+import { SlSocialVkontakte } from 'react-icons/sl'
+
+export function AddGroupButton() {
+  const [popupVisible, setPopupVisible] = React.useState(false)
+
+  const handleOpenPopup = () => {
+    setPopupVisible(true)
+  }
+
+  return (
+    <>
+      <Button variant='secondary' onClick={handleOpenPopup}><MdAdd /></Button>
+      <Popup open={popupVisible} onClose={() => setPopupVisible(false)} />
+    </>
+  )
+}
+
+function Popup({ open, onClose }: {
+  open: boolean
+  onClose: () => any
+}) {
+  return (
+    <Dialog open={open} onOpenChange={isOpen => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Добавить группу</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          Если вы хотите добавить свою группу на сайт, скиньтесь всей группой и задонатьте мне 500 ₽
+        </DialogDescription>
+        <DialogDescription>
+          На сайте не только появится ваше расписание, но оно будет обновляться каждую неделю. А если во время парсинга произойдет ошибка — я сразу получу об этом уведомление в телеграм, потому что у меня настроен бот.
+        </DialogDescription>
+        <DialogDescription>
+          Для меня добавить вашу группу это даже не одна строка кода, а одно нажатие клавиши, но я хочу чтобы этот сайт был доступен только самым лучшим и избранным, достойных престижа <Image src={coolEmoji} width={14} height={14} alt='' className='inline align-text-bottom' />
+        </DialogDescription>
+        <DialogFooter className='!justify-start !flex-row mt-3 gap-3'>
+          <Link href='https://t.me/hloth'>
+            <Button tabIndex={-1} className='gap-3'><BsTelegram /> Мой телеграм</Button>
+          </Link>
+          <Link href='https://vk.com/hloth'>
+            <Button tabIndex={-1} className='gap-3'><SlSocialVkontakte /> Мой ВКонтакте</Button>
+          </Link>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/pages/[group].tsx

@@ -4,22 +4,27 @@ import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
 import { getSchedule } from '@/app/agregator/schedule'
 import { NextSerialized, nextDeserializer, nextSerialized } from '@/app/utils/date-serializer'
 import { NavBar } from '@/widgets/navbar'
+import { LastUpdateAt } from '@/entities/last-update-at'
 
 type PageProps = NextSerialized<{
   schedule: Day[]
+  parsedAt: Date
 }>
 
 export default function HomePage(props: PageProps) {
-  const { schedule } = nextDeserializer(props)
+  const { schedule, parsedAt } = nextDeserializer(props)
 
   return (
     <>
       <NavBar />
+      <LastUpdateAt date={parsedAt} />
       <Schedule days={schedule} />
     </>
   )
 }
 
+const cachedSchedules = new Map<string, { lastFetched: Date, results: Day[] }>()
+const maxCacheDurationInMS = 1000 * 60 * 60
 export async function getServerSideProps(context: GetServerSidePropsContext<{ group: string }>): Promise<GetServerSidePropsResult<PageProps>> {
   const groups: { [group: string]: [number, string] } = {
     ps7: [146, 'ПС-7'],
@@ -27,11 +32,24 @@ export async function getServerSideProps(context: GetServerSidePropsContext<{ gr
   }
   const group = context.params?.group
   if (group && Object.hasOwn(groups, group) && group in groups) {
-    const schedule = await getSchedule(...groups[group])
+    let schedule
+    let parsedAt
+
+    const cachedSchedule = cachedSchedules.get(group)
+    if (cachedSchedule?.lastFetched && Date.now() - cachedSchedule.lastFetched.getTime() < maxCacheDurationInMS) {
+      schedule = cachedSchedule.results
+      parsedAt = cachedSchedule.lastFetched
+    } else {
+      schedule = await getSchedule(...groups[group])
+      parsedAt = new Date()
+      cachedSchedules.set(group, { lastFetched: new Date(), results: schedule })
+    }
+
     return {
-      props: {
-        schedule: nextSerialized(schedule)
-      }
+      props: nextSerialized({
+        schedule: schedule,
+        parsedAt: parsedAt
+      })
     }
   } else {
     return {

src/shared/data/teachers.ts

@@ -14,7 +14,7 @@ export const teachers = [
   },
   {
     name: 'Амукова Светлана Николаевна',
-    picture: 'https://ks.psuti.ru/images/stories/emp/',
+    picture: 'https://ks.psuti.ru/images/stories/emp/амукова.jpg',
     pronouns: 'she'
   },
   {
@@ -36,7 +36,7 @@ export const teachers = [
   },
   {
     name: 'Арефьев Андрей Андреевич',
-    picture: 'https://ks.psuti.ru/images/stories/ks-news/2016/prepodavateli-foto/%20class=',
+    picture: 'https://ks.psuti.ru/images/stories/ks-news/2016/prepodavateli-foto/арефьев.jpg',
     pronouns: 'he'
   },
   {
@@ -107,7 +107,7 @@ export const teachers = [
   },
   {
     name: 'Ларионова Софья Николаевна',
-    picture: 'https://ks.psuti.ru/images/stories/ks-news/2016/prepodavateli-foto/.jpg',
+    picture: 'https://ks.psuti.ru/images/stories/ks-news/2016/prepodavateli-foto/larionova.jpg',
     pronouns: 'she'
   },
   {

src/widgets/navbar/index.tsx

@@ -1,19 +1,20 @@
+import { AddGroupButton } from '@/features/add-group'
 import { ThemeSwitcher } from '@/features/theme-switch'
 import { Button } from '@/shadcn/ui/button'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import cx from 'classnames'
 
 export function NavBar() {
-  const { resolvedTheme } = useTheme()
+  const { resolvedTheme, theme } = useTheme()
 
   return (
     <header className="w-full p-2">
-      <nav className={cx('rounded-lg p-2 w-full flex justify-between', { 'bg-slate-200': resolvedTheme === 'light', 'bg-slate-900': resolvedTheme === 'dark' })}>
+      <nav className={`rounded-lg p-2 w-full flex justify-between ${(resolvedTheme || theme) === 'light' ? 'bg-slate-200' : ''} ${(resolvedTheme || theme) === 'dark' ? 'bg-slate-900' : ''}`}>
         <ul className="flex gap-2">
           <NavBarItem url="/ps7">ПС-7</NavBarItem>
           <NavBarItem url="/pks35k">ПКС-35к</NavBarItem>
+          <AddGroupButton />
         </ul>
         <ThemeSwitcher />
       </nav>
@@ -30,7 +31,7 @@ function NavBarItem({ url, children }: React.PropsWithChildren<{
   return (
     <li>
       <Link href={url}>
-        <Button tabIndex={-1} variant={isActive ? 'default' : 'outline'}>{children}</Button>
+        <Button tabIndex={-1} variant={isActive ? 'default' : 'secondary'}>{children}</Button>
       </Link>
     </li>
   )

src/widgets/schedule/day.tsx

@@ -18,17 +18,18 @@ export function Day({ day }: {
     .some(lesson => 'subject' in lesson && lesson.subject.length > 20)
 
   return (
-    <div className="flex flex-col gap-5">
-      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-        {dayOfWeek} <span className='text-muted ml-3'>{Intl.DateTimeFormat('ru-RU', {
+    <div className="flex flex-col gap-3 md:gap-5">
+      <h1 className="scroll-m-20 text-2xl md:text-4xl font-extrabold tracking-tight lg:text-5xl">
+        {dayOfWeek} <span className='text-border ml-3'>{Intl.DateTimeFormat('ru-RU', {
           day: 'numeric',
           month: 'long',
           // year: 'numeric'
         }).format(day.date)}</span>
       </h1>
-      <div className='overflow-hidden'>
-        <div className='overflow-auto'>
-          <div className="flex flex-row gap-4 w-max">
+      <div>
+        <div className='overflow-auto md:snap-x md:snap-proximity md:-translate-x-16 md:w-[calc(100%+8rem)] scrollbar-hide'>
+          <div className="flex flex-col md:flex-row gap-4 w-full md:w-max">
+            <div className='snap-start hidden md:block' style={{ flex: '0 0 3rem' }} />
             {day.lessons.map((lesson, i) => (
               <Lesson 
                 width={longNames ? 450 : 350}
@@ -36,6 +37,7 @@ export function Day({ day }: {
                 key={i} 
               />
             ))}
+            <div className='snap-start hidden md:block' style={{ flex: `0 0 calc(100vw - 4rem - ${longNames ? 450 : 350}px - 1rem)` }} />
           </div>
         </div>
       </div>

src/widgets/schedule/index.tsx

@@ -1,14 +1,16 @@
 import type { Day as DayType } from '@/shared/model/day'
 import { Day } from '@/widgets/schedule/day'
+import { useRouter } from 'next/router'
 
 export function Schedule({ days }: {
   days: DayType[]
 }) {
+  const group = useRouter().query['group']
 
   return (
-    <div className="flex flex-col p-16 gap-14">
+    <div className="flex flex-col p-8 md:p-16 gap-12 md:gap-14">
       {days.map((day, i) => (
-        <Day day={day} key={i} />
+        <Day day={day} key={`${group}_day${i}`} />
       ))}
     </div>
   )

src/widgets/schedule/lesson.tsx

@@ -60,8 +60,8 @@ export function Lesson({ lesson, width = 350 }: {
   }
 
   return (
-    <Card className={`w-[${width}px] min-w-[${width}px] max-w-[${width}px] flex flex-col relative overflow-hidden`} style={{ minWidth: width, maxWidth: width }}> 
-      {lesson.isChange && <div className='absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#ffc60026] to-[#95620026]'></div>}
+    <Card className={`w-full ${width === 450 ? `md:w-[450px] md:min-w-[450px] md:max-w-[450px]` : `md:w-[350px] md:min-w-[350px] md:max-w-[350px]`} flex flex-col relative overflow-hidden snap-start scroll-ml-16 shrink-0`}> 
+      {lesson.isChange && <div className='absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#ffc60026] to-[#95620026] pointer-events-none'></div>}
       <CardHeader>
         <div className='flex gap-4'>
           {hasTeacher ? (
@@ -97,7 +97,7 @@ export function Lesson({ lesson, width = 350 }: {
         {lesson.topic ? (
           <span className='leading-relaxed hyphens-auto'>{lesson.topic}</span>
         ) : (
-          !isFallbackDiscipline  && <span className='text-muted font-semibold'>Нет описания пары</span>
+          !isFallbackDiscipline  && <span className='text-border font-semibold'>Нет описания пары</span>
         )}
       </CardContent>
       {(Boolean(lesson.resources.length) || hasPlace) && (