Modify session data file type

Author: Hyeokmin Kwon

src/api/sessions.json src/api/data/sessions.tssrc/api/sessions.json renamed to src/api/data/sessions.ts

@@ -1,4 +1,6 @@
-[
+import { APIPretalxSessions } from "models/api/session";
+
+export const SESSIONS: APIPretalxSessions = [
     {
         "code": "TGEZYJ",
         "speakers": [
@@ -211,7 +213,7 @@
         "track_id": null,
         "state": "confirmed",
         "abstract": "당신의 Electron 프로젝트에 Python을 연결하여 날개를 달아주고 싶으신 분들의 위한 세션",
-        "description": "## 나무로 만든 플라이어 1호의 엔진\r\n\r\n- **Electron의 범용성과 이식성 (중학생에게 교육 봉사를 할 때, 그리고 이 기술을 사용하는 디코 슬랙 등)**\r\n- **ElectronJS기술의 개요**\r\n- **JS만으로는 할 수 없지만 파이썬은 할 수 있는것, 파이썬의 Pandas와 Flask라는 날개를 달아줄 것임**\r\n- **Pandas와 Flask의 개요 (electron 복습)**\r\n\r\n## **어플리케이션을 위한 웹 기술과 파이썬이 만난다면**\r\n\r\n- **내가 했던 사이드 프로젝트를 기준으로 설명할것임**\r\n- **작은 가게를 운영하는 사람들을 위한 재고 관리 앱을 만들어봄**\r\n- **다루는 주제 키워드(사용된 것들) : Pandas, Matplotlib, 웹 electronJS, Notion API**\r\n- **일렉트론에 판다스 설치하기**\r\n- **pandas가 일렉트론의 HTML 데이터 테이블을 읽게 통합하기**\r\n- **데이터는 JSON 형식으로 변환되지 않고 HTML에서 직접 추출됩니다. 이때, document.querySelectorAll 메서드를 사용하여 각 셀의 내용을 가져옵니다.**\r\n\r\n## **웹 프레임워크를 위한 파이썬 시각화**\r\n\r\n- **Pandas를 사용하여 HTML 테이블에서 가져온 데이터를 DataFrame으로 변환하고, 이를 기반으로 다양한 분석을 수행합니다.**\r\n- **Matplotlib을 프로젝트내에 설치하고 이용해 차트를 생성함**\r\n- **Matplotlib 차트가 생성되어 폴더에 생겼지만, Electron 내에서 제대로 표시되지 않는 경우가 있었음.**\r\n- **웹 프레임워크 내에서 생성되는 만큼, HTML내의 <img>태그를 이용. 테이블의 수정을 30초마다 반영**\r\n\r\n## **쉽지 않은 Flask라는 날개를 달아주는 과정**\r\n\r\n- **일렉트론에 Flask설치하기 , 일렉트론 내부에 설치하는 구조이면서도 FLask는 별도로 실행되는 구조**\r\n- **그 안에다가 또 Flask-CORS 패키지를 설치하고 허용.**\r\n- **웹 Electron의 까다로은 보안 구조 파헤치기 , Main.js에서 허용하기**\r\n\r\n## **결론**\r\n\r\n- **웹 어플리케이션 기술인 일렉트론에 파이썬이라는 날개를 달아주는 것은 많은 가능성을 열 수 있음 (JS가 못하는 것)**\r\n- **다만 사용자의 컴퓨터에 반드시 파이썬이 설치되어 있어야 할 것임. 없다면 배포할 때 파이썬을 같이 배포하는 방법이 있지만 이는 빌드된 앱이 지나치게 무거워질 수 있음**\r\n- **생각보다 많은 메모리를 차지함. 그럼에도 파이썬은 웹 프레임워크에 있어서도 다양하게 쓰일 것**\r\n- **감사합니다.**",
+        "description": `## 나무로 만든 플라이어 1호의 엔진\r\n\r\n- **Electron의 범용성과 이식성 (중학생에게 교육 봉사를 할 때, 그리고 이 기술을 사용하는 디코 슬랙 등)**\r\n- **ElectronJS기술의 개요**\r\n- **JS만으로는 할 수 없지만 파이썬은 할 수 있는것, 파이썬의 Pandas와 Flask라는 날개를 달아줄 것임**\r\n- **Pandas와 Flask의 개요 (electron 복습)**\r\n\r\n## **어플리케이션을 위한 웹 기술과 파이썬이 만난다면**\r\n\r\n- **내가 했던 사이드 프로젝트를 기준으로 설명할것임**\r\n- **작은 가게를 운영하는 사람들을 위한 재고 관리 앱을 만들어봄**\r\n- **다루는 주제 키워드(사용된 것들) : Pandas, Matplotlib, 웹 electronJS, Notion API**\r\n- **일렉트론에 판다스 설치하기**\r\n- **pandas가 일렉트론의 HTML 데이터 테이블을 읽게 통합하기**\r\n- **데이터는 JSON 형식으로 변환되지 않고 HTML에서 직접 추출됩니다. 이때, document.querySelectorAll 메서드를 사용하여 각 셀의 내용을 가져옵니다.**\r\n\r\n## **웹 프레임워크를 위한 파이썬 시각화**\r\n\r\n- **Pandas를 사용하여 HTML 테이블에서 가져온 데이터를 DataFrame으로 변환하고, 이를 기반으로 다양한 분석을 수행합니다.**\r\n- **Matplotlib을 프로젝트내에 설치하고 이용해 차트를 생성함**\r\n- **Matplotlib 차트가 생성되어 폴더에 생겼지만, Electron 내에서 제대로 표시되지 않는 경우가 있었음.**\r\n- **웹 프레임워크 내에서 생성되는 만큼, HTML내의 <img>태그를 이용. 테이블의 수정을 30초마다 반영**\r\n\r\n## **쉽지 않은 Flask라는 날개를 달아주는 과정**\r\n\r\n- **일렉트론에 Flask설치하기 , 일렉트론 내부에 설치하는 구조이면서도 FLask는 별도로 실행되는 구조**\r\n- **그 안에다가 또 Flask-CORS 패키지를 설치하고 허용.**\r\n- **웹 Electron의 까다로은 보안 구조 파헤치기 , Main.js에서 허용하기**\r\n\r\n## **결론**\r\n\r\n- **웹 어플리케이션 기술인 일렉트론에 파이썬이라는 날개를 달아주는 것은 많은 가능성을 열 수 있음 (JS가 못하는 것)**\r\n- **다만 사용자의 컴퓨터에 반드시 파이썬이 설치되어 있어야 할 것임. 없다면 배포할 때 파이썬을 같이 배포하는 방법이 있지만 이는 빌드된 앱이 지나치게 무거워질 수 있음**\r\n- **생각보다 많은 메모리를 차지함. 그럼에도 파이썬은 웹 프레임워크에 있어서도 다양하게 쓰일 것**\r\n- **감사합니다.**`,
         "duration": 30,
         "slot_count": 1,
         "do_not_record": false,

src/api/session.ts

@@ -1,5 +1,4 @@
-import { APIPretalxSessions } from "models/api/session";
-import SESSIONS from "./sessions.json";
+import { SESSIONS } from "./data/sessions";
 
 export const listSessions = async () => {
   // const result = await instance.get("/2024/sessions/");
@@ -10,7 +9,7 @@ export const listSessions = async () => {
   //     throw new Error("세션 목록을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.");
   // }
 
-  return SESSIONS as APIPretalxSessions;
+  return SESSIONS;
 };
 
 export const retrieveSession = async (code: string) => {
@@ -22,7 +21,7 @@ export const retrieveSession = async (code: string) => {
   //     throw new Error("세션을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.");
   // }
 
-  const filtered = (SESSIONS as APIPretalxSessions).filter((session) => session.code === code);
+  const filtered = SESSIONS.filter((session) => session.code === code);
   if (filtered.length !== 1)
     throw new Error("세션을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.");
 

src/models/api/session.ts

@@ -2,9 +2,12 @@ export type APIPretalxSessions = {
   code: string;
   submission_type: {[key: string]: string};
   submission_type_id: number;
+  track: unknown;
+  track_id: unknown;
   state: string;
 
   image: string | null;
+  resources: unknown;
   title: string;
   abstract: string | null;
   description: string | null;
@@ -15,10 +18,11 @@ export type APIPretalxSessions = {
   slot: {
     start: string | null;
     end: string | null;
-    room: {[key: string]: string};
+    room: {[key: string]: string} | null;
     room_id: number | null;
   } | null;
   duration: number | null;
+  slot_count: unknown;
   do_not_record: boolean;
   is_featured: boolean;
 
@@ -47,4 +51,8 @@ export type APIPretalxSessions = {
 
   tags: string[];
   tag_ids: number[];
+
+  created?: unknown;
+  pending_state?: unknown;
+  room?: unknown;
 }[]

src/pages/Session/detail.tsx

@@ -57,7 +57,8 @@ const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }
   if (
     R.isObjectType(session.slot) &&
     R.isString(session.slot.start) &&
-    R.isString(session.slot.end)
+    R.isString(session.slot.end) &&
+    session.slot.room !== null
   ) {
     const startTime = new Date(session.slot.start);
     const endTime = new Date(session.slot.end);

src/pages/Session/timetable.tsx

@@ -88,7 +88,7 @@ const getTimeTableData: (data: APIPretalxSessions) => TimeTableData = (data) =>
 
   // Fill timeTableData with session data
   data.forEach((session) => {
-    if (session.slot?.start && session.slot?.end) {
+    if (session.slot?.start && session.slot?.end && session.slot.room) {
       const start = new Date(session.slot.start);
       const durationMin = (new Date(session.slot.end).getTime() - start.getTime()) / 1000 / 60;
       timeTableData[getDateStr(start)][getPaddedTime(start)][getRoomName(session.slot.room)] = {