Migrate LectureGroupBlock to typescript

src/components/blocks/LectureGroupBlock.jsx → src/components/blocks/LectureGroupBlock.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
+import { useTranslation } from 'react-i18next';
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lecture from '../../shapes/model/subject/lecture';
+
+interface lectureGroupBlockProps {
+  lectureGroup: lecture[];
+  isRaised: boolean;
+  isDimmed: boolean;
+  isTaken: boolean;
+  children?: React.ReactNode;
+}
+
+const LectureGroupBlock: React.FC<lectureGroupBlockProps> = ({
+  lectureGroup,
+  isRaised,
+  isDimmed,
+  isTaken,
+  children,
+}) => {
+  const { t } = useTranslation();
 
-const LectureGroupBlock = ({ t, lectureGroup, isRaised, isDimmed, isTaken, children }) => {
   return (
     <div
       className={classNames(
@@ -25,11 +39,4 @@ const LectureGroupBlock = ({ t, lectureGroup, isRaised, isDimmed, isTaken, child
   );
 };
 
-LectureGroupBlock.propTypes = {
-  lectureGroup: PropTypes.arrayOf(lectureShape).isRequired,
-  isRaised: PropTypes.bool.isRequired,
-  isDimmed: PropTypes.bool.isRequired,
-  isTaken: PropTypes.bool.isRequired,
-};
-
-export default withTranslation()(React.memo(LectureGroupBlock));
+export default React.memo(LectureGroupBlock);

src/components/blocks/LectureGroupBlockRow.jsx → src/components/blocks/LectureGroupBlockRow.tsx

@@ -1,14 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 import { getProfessorsShortStr, getClassroomStr } from '../../utils/lectureUtils';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lecture from '../../shapes/model/subject/lecture';
 
-const LectureGroupBlockRow = ({
-  t,
+type lectureVoidFunc = (x: lecture) => void;
+interface lectureGroupBlockRowProps {
+  lecture: lecture;
+  isHighlighted: boolean;
+  inTimetable: boolean;
+  isTimetableReadonly: boolean;
+  inCart: boolean;
+  fromCart: boolean;
+  addToCart: lectureVoidFunc;
+  addToTable: lectureVoidFunc;
+  deleteFromCart: lectureVoidFunc;
+  onMouseOver?: lectureVoidFunc;
+  onMouseOut?: lectureVoidFunc;
+  onClick?: lectureVoidFunc;
+}
+
+const LectureGroupBlockRow: React.FC<lectureGroupBlockRowProps> = ({
   lecture,
   isHighlighted,
   inTimetable,
@@ -22,6 +36,7 @@ const LectureGroupBlockRow = ({
   onMouseOut,
   onClick,
 }) => {
+  const { t } = useTranslation();
   const getClass = (lec) => {
     switch (lec.class_title.length) {
       case 1:
@@ -37,17 +52,17 @@ const LectureGroupBlockRow = ({
     ? (event) => {
         onMouseOver(lecture);
       }
-    : null;
+    : undefined;
   const handleMouseOut = onMouseOut
     ? (event) => {
         onMouseOut(lecture);
       }
-    : null;
+    : undefined;
   const handleClick = onClick
     ? (event) => {
         onClick(lecture);
       }
-    : null;
+    : undefined;
   const handleDeleteFromCartClick = (event) => {
     event.stopPropagation();
     deleteFromCart(lecture);
@@ -133,19 +148,4 @@ const LectureGroupBlockRow = ({
   );
 };
 
-LectureGroupBlockRow.propTypes = {
-  lecture: lectureShape.isRequired,
-  isHighlighted: PropTypes.bool.isRequired,
-  inTimetable: PropTypes.bool.isRequired,
-  isTimetableReadonly: PropTypes.bool.isRequired,
-  inCart: PropTypes.bool.isRequired,
-  fromCart: PropTypes.bool.isRequired,
-  addToCart: PropTypes.func.isRequired,
-  addToTable: PropTypes.func.isRequired,
-  deleteFromCart: PropTypes.func.isRequired,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onClick: PropTypes.func,
-};
-
-export default withTranslation()(React.memo(LectureGroupBlockRow));
+export default React.memo(LectureGroupBlockRow);

src/components/blocks/LectureGroupSimpleBlock.jsx → src/components/blocks/LectureGroupSimpleBlock.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 import { getProfessorsShortStr } from '../../utils/lectureUtils';
+import lecture from '../../shapes/model/subject/lecture';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+interface lectureGroupSimpleBlockProps {
+  lectures: lecture[];
+}
 
-const LectureGroupSimpleBlock = ({ t, lectures }) => {
+const LectureGroupSimpleBlock: React.FC<lectureGroupSimpleBlockProps> = ({ lectures }) => {
+  const { t } = useTranslation();
   const getClass = (lecture) => {
     if (!lecture.class_title) {
       return classNames('');
@@ -37,8 +40,4 @@ const LectureGroupSimpleBlock = ({ t, lectures }) => {
   );
 };
 
-LectureGroupSimpleBlock.propTypes = {
-  lectures: PropTypes.arrayOf(lectureShape).isRequired,
-};
-
-export default withTranslation()(React.memo(LectureGroupSimpleBlock));
+export default React.memo(LectureGroupSimpleBlock);

src/components/blocks/LectureSimpleBlock.jsx → src/components/blocks/LectureSimpleBlock.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 
-import lectureShape from '../../shapes/model/subject/LectureShape';
+import lecture from '@/shapes/model/subject/lecture';
+interface lectureSimpleBlockProps {
+  lecture: lecture;
+  isRaised: boolean;
+  isDimmed: boolean;
+  hasReview: boolean;
+  onClick?: (x: lecture) => void;
+}
+const LectureSimpleBlock: React.FC<lectureSimpleBlockProps> = ({
+  lecture,
+  isRaised,
+  isDimmed,
+  hasReview,
+  onClick,
+}) => {
+  const { t } = useTranslation();
 
-const LectureSimpleBlock = ({ t, lecture, isRaised, isDimmed, hasReview, onClick }) => {
   const handleClick = onClick
     ? (event) => {
         onClick(lecture);
       }
-    : null;
+    : undefined;
 
   return (
     <div
@@ -33,12 +46,4 @@ const LectureSimpleBlock = ({ t, lecture, isRaised, isDimmed, hasReview, onClick
   );
 };
 
-LectureSimpleBlock.propTypes = {
-  lecture: lectureShape.isRequired,
-  isRaised: PropTypes.bool.isRequired,
-  isDimmed: PropTypes.bool.isRequired,
-  hasReview: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(React.memo(LectureSimpleBlock));
+export default React.memo(LectureSimpleBlock);

src/shapes/model/subject/classtime.tsx

@@ -0,0 +1,13 @@
+interface classtime {
+  building_code: string;
+  classroom: string;
+  classroom_en: string;
+  classroom_short: string;
+  classroom_short_en: string;
+  room_name: string;
+  day: number;
+  begin: number;
+  end: number;
+}
+
+export default classtime;

src/shapes/model/subject/examtime.tsx

@@ -0,0 +1,8 @@
+interface examtime {
+  day: number;
+  str: string;
+  str_en: string;
+  begin: number;
+  end: number;
+}
+export default examtime;

src/shapes/model/subject/lecture.tsx

@@ -0,0 +1,40 @@
+import classtime from './classtime';
+import examtime from './examtime';
+import nestedProfessor from './nestedProfessor';
+
+interface lecture {
+  id: number;
+  title: string;
+  title_en: string;
+  course: number;
+  old_code: string;
+  class_no: string;
+  year: number;
+  semester: 1 | 2 | 3 | 4;
+  code: string;
+  department: number;
+  department_code: string;
+  department_name: string;
+  department_name_en: string;
+  type: string;
+  type_en: string;
+  limit: number;
+  num_people: number;
+  is_english: boolean;
+  num_classes: number;
+  num_labs: number;
+  credit: number;
+  credit_au: number;
+  common_title: string;
+  common_title_en: string;
+  class_title: string;
+  class_title_en: string;
+  review_total_weight: number;
+  professors: nestedProfessor;
+  grade: number;
+  load: number;
+  speech: number;
+  classtimes: classtime[];
+  examtimes: examtime[];
+}
+export default lecture;

src/shapes/model/subject/nestedProfessor.tsx

@@ -0,0 +1,7 @@
+interface nestedProfessor {
+  name: string;
+  name_en: string;
+  professor_id: number;
+  review_total_weight: number;
+}
+export default nestedProfessor;