Merge pull request #53 from nattvara/fix-ui-quirks

Fix minor UI quirks with new UI

web-ui/src/components/course/course-content/course-content.tsx

@@ -80,12 +80,12 @@ export default function CourseContent(props: CourseContentProps) {
 
       {/* Separate KTH Play and YouTube videos on desktop */}
       <Row>
-        <Col sm={0} md={12}>
+        <Col xs={0} sm={0} md={12}>
           <Divider orientation="left">KTH Play</Divider>
           <LectureList source="kth" courseCode={course.course_code} />
         </Col>
-        <Col sm={0} md={1}></Col>
-        <Col sm={0} md={11}>
+        <Col xs={0} sm={0} md={1}></Col>
+        <Col xs={0} sm={0} md={11}>
           <Divider orientation="left">Youtube</Divider>
           <LectureList source="youtube" courseCode={course.course_code} />
         </Col>

web-ui/src/components/image/image-upload/image-upload.less

@@ -12,6 +12,20 @@
     margin: 0;
   }
 
+  &.compact {
+    > div:first-child {
+      height: 150px;
+      padding: 0px 20px;
+    }
+
+    *.icon {
+      text-align: center;
+      font-size: 30px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+
   > div:first-child {
     padding: 32px 10px;
     height: 300px;

web-ui/src/components/image/image-upload/image-upload.tsx

@@ -29,11 +29,12 @@ interface ImageResponse extends ServerResponse {
 interface ImageUploadProps {
   uploadId?: string;
   noMargin?: boolean;
+  compact?: boolean;
   onUploadComplete: (image: ImageType) => void;
 }
 
 export default function ImageUpload(props: ImageUploadProps) {
-  const { uploadId, onUploadComplete, noMargin } = props;
+  const { uploadId, onUploadComplete, noMargin, compact } = props;
 
   const [id, setId] = useState<null | string>(null);
   const [error, setError] = useState<string>('');
@@ -111,7 +112,9 @@ export default function ImageUpload(props: ImageUploadProps) {
       {contextHolder}
       <Row>
         <Dragger
-          className={`${styles.dragger} ${noMargin ? styles.no_margin : ''}`}
+          className={`${styles.dragger} ${noMargin ? styles.no_margin : ''} ${
+            compact === true ? styles.compact : ''
+          }`}
           {...uploadProps}
         >
           {(id === null || image === null) && (
@@ -124,17 +127,26 @@ export default function ImageUpload(props: ImageUploadProps) {
               <Row
                 className={`${styles.title} ${hovering ? styles.hovering : ''}`}
               >
-                <Title level={3}>Ask a question about an assignment</Title>
+                {(compact === undefined || compact === false) && (
+                  <Title level={3}>Ask a question about an assignment</Title>
+                )}
+                {compact === true && (
+                  <Title level={5}>
+                    Ask a question about another assignment
+                  </Title>
+                )}
               </Row>
               <Row
                 className={`${styles.subtitle} ${
                   hovering ? styles.hovering : ''
                 }`}
               >
-                <Title level={5}>
-                  Click or drag an image of an assignment, lecture slide or lab
-                  to this area to upload
-                </Title>
+                {(compact === undefined || compact === false) && (
+                  <Title level={5}>
+                    Click or drag an image of an assignment, lecture slide or
+                    lab to this area to upload
+                  </Title>
+                )}
               </Row>
             </>
           )}

web-ui/src/components/lecture/lecture-list/lecture-list.less

@@ -48,4 +48,18 @@
       width: 100% !important;
     }
   }
+
+  .item {
+    margin-bottom: 20px;
+  }
+}
+
+.load_more {
+  width: 100%;
+  margin-top: 80px;
+  margin-bottom: 200px;
+}
+
+.hits {
+  margin-top: 10px;
 }

web-ui/src/components/lecture/lecture-list/lecture-list.tsx

@@ -1,6 +1,6 @@
 import styles from './lecture-list.less';
 import { Lecture } from '@/types/lecture';
-import { Row, Input, Space, Col } from 'antd';
+import { Row, Input, Typography, Col, Button } from 'antd';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import apiClient, { ServerErrorResponse, ServerResponse } from '@/http';
@@ -13,13 +13,18 @@ import {
   CATEGORY_LECTURE_LIST,
   EVENT_ERROR_RESPONSE,
   EVENT_GOTO_LECTURE,
+  EVENT_LOAD_MORE,
   EVENT_SEARCHED,
 } from '@/matomo/events';
 
 const { Search } = Input;
 
+const { Paragraph } = Typography;
+
 const AUTO_UPDATE_INTERVAL = 10000;
 
+const PAGINATE_AFTER = 25;
+
 interface LectureResponse extends ServerResponse {
   data: Lecture[];
 }
@@ -34,7 +39,10 @@ export default function LectureList(props: LectureListProps) {
 
   const [firstLoad, setFirstLoad] = useState<boolean>(true);
   const [lectureQuery, setLectureQuery] = useState<string>('');
+  const [lastQuery, setLastQuery] = useState<string>('');
+  const [lastCourseCode, setLastCourseCode] = useState<string>('');
   const [lectures, setLectures] = useState<Lecture[]>([]);
+  const [limit, setLimit] = useState<number>(PAGINATE_AFTER);
 
   const { isLoading: isSearchingLectures, mutate: doLectureSearch } =
     useMutation(
@@ -60,7 +68,16 @@ export default function LectureList(props: LectureListProps) {
             data: res.data,
           };
           setLectures(result.data);
+          if (
+            lectureQuery !== lastQuery ||
+            lastCourseCode !== courseCode ||
+            firstLoad
+          ) {
+            setLimit(Math.min(PAGINATE_AFTER, result.data.length));
+          }
           setFirstLoad(false);
+          setLastQuery(lectureQuery);
+          setLastCourseCode(courseCode);
         },
         onError: (err: ServerErrorResponse) => {
           console.log(err);
@@ -79,6 +96,16 @@ export default function LectureList(props: LectureListProps) {
     emitEvent(CATEGORY_LECTURE_LIST, EVENT_SEARCHED, query);
   };
 
+  const loadMore = () => {
+    if (limit + PAGINATE_AFTER > lectures.length) {
+      setLimit(lectures.length);
+    } else {
+      setLimit(limit + PAGINATE_AFTER);
+    }
+
+    emitEvent(CATEGORY_LECTURE_LIST, EVENT_LOAD_MORE, ACTION_NONE);
+  };
+
   const goToLecture = async (lecture: Lecture, newTab = false) => {
     const url = `/lectures/${lecture.public_id}/${lecture.language}/questions`;
 
@@ -97,7 +124,11 @@ export default function LectureList(props: LectureListProps) {
 
   useEffect(() => {
     searchLectures('');
-  }, [courseCode]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    if (courseCode !== lastCourseCode) {
+      setFirstLoad(true);
+    }
+  }, [courseCode, lastCourseCode]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -123,34 +154,60 @@ export default function LectureList(props: LectureListProps) {
         />
       </Row>
 
-      <Row className={styles.result_container}>
-        {isSearchingLectures && firstLoad && (
-          <SearchResultLoading size={4} min={1} max={100} />
-        )}
-        <Space
-          direction="vertical"
-          size="large"
-          className={styles.result_inner_container}
-        >
-          {lectures.map((lecture, index) => {
-            return (
-              <Row key={lecture.public_id + lecture.language}>
-                <Col span={2} className={styles.row_number}>
-                  {index + 1}
-                </Col>
-                <Col span={22}>
-                  <LecturePreviewCompact
-                    lecture={lecture}
-                    onClick={() => goToLecture(lecture)}
-                    onMetaClick={() => goToLecture(lecture, true)}
-                    onCtrlClick={() => goToLecture(lecture, true)}
-                  />
-                </Col>
-              </Row>
-            );
-          })}
-        </Space>
-      </Row>
+      {!firstLoad && (
+        <Row className={styles.result_container}>
+          {isSearchingLectures && firstLoad && (
+            <SearchResultLoading size={4} min={1} max={100} />
+          )}
+          <div className={styles.result_inner_container}>
+            {lectures.map((lecture, index) => {
+              if (index + 1 > limit) {
+                return <div key={lecture.public_id + lecture.language}></div>;
+              }
+
+              return (
+                <Row
+                  key={lecture.public_id + lecture.language}
+                  className={styles.item}
+                >
+                  <Col span={2} className={styles.row_number}>
+                    {index + 1}
+                  </Col>
+                  <Col span={22}>
+                    <LecturePreviewCompact
+                      lecture={lecture}
+                      onClick={() => goToLecture(lecture)}
+                      onMetaClick={() => goToLecture(lecture, true)}
+                      onCtrlClick={() => goToLecture(lecture, true)}
+                    />
+                  </Col>
+                </Row>
+              );
+            })}
+          </div>
+
+          <div className={styles.load_more}>
+            <Row justify="center" className={styles.full_width}>
+              <Col>
+                <Button
+                  onClick={() => loadMore()}
+                  type="primary"
+                  key="btn"
+                  size="large"
+                  disabled={lectures.length <= limit}
+                >
+                  Load {PAGINATE_AFTER} more hits
+                </Button>
+              </Col>
+            </Row>
+            <Row justify="center" className={styles.hits}>
+              <Paragraph>
+                Showing {limit} / {lectures.length} lectures
+              </Paragraph>
+            </Row>
+          </div>
+        </Row>
+      )}
     </>
   );
 }

web-ui/src/pages/assignments/index.less

@@ -11,3 +11,11 @@
 .full_width {
   width: 100%;
 }
+
+.image_preview {
+  width: 100%;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  padding: 10px;
+  overflow: hidden;
+}

web-ui/src/pages/assignments/index.tsx

@@ -10,11 +10,16 @@ import {
   Space,
   Typography,
   notification,
+  Image as AntImage,
 } from 'antd';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'umi';
-import apiClient, { ServerErrorResponse, ServerResponse } from '@/http';
+import apiClient, {
+  ServerErrorResponse,
+  ServerResponse,
+  makeUrl,
+} from '@/http';
 import { Image } from '@/types/search';
 import ImageUpload from '@/components/image/image-upload/image-upload';
 import ImageProgress from '@/components/image/image-progress/image-progress';
@@ -99,6 +104,8 @@ export default function AssignmentsIndexPage() {
     fetchImage();
   };
 
+  const previewUrl = makeUrl(`/assignments/image/${id}/img`);
+
   useEffect(() => {
     registerPageLoad();
   }, []);
@@ -174,10 +181,17 @@ export default function AssignmentsIndexPage() {
         <Row>
           <Col sm={24} md={7} className={styles.padding_left_right}>
             <Space direction="vertical" size="large">
+              <Row>
+                <AntImage
+                  src={previewUrl}
+                  className={styles.image_preview}
+                  preview={true}
+                />
+              </Row>
               <Row>
                 <ImageUpload
-                  uploadId={uploadId}
                   noMargin={true}
+                  compact={true}
                   onUploadComplete={(image) => onImageUploadComplete(image)}
                 />
               </Row>