refactor(page) : component-ize lecture room page(#47)

frontend/package.json

@@ -15,8 +15,10 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-native-elements": "^3.4.3",
+    "react-pull-to-refresh": "^2.0.1",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-toastify": "^9.1.1",
     "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"

frontend/src/components/Components.jsx

@@ -6,6 +6,8 @@ import CertificateFrame from "components/CertificateFrame";
 import LectureBox from "components/LectureBox";
 import GradeSelect from "components/GradeSelect";
 import ThemedToast from "components/ThemedToast";
+import TrendingLecture from "components/TrendingLecture";
+import RecentLectures from "components/RecentLectures";
 
 export {Topbar};
 export {VerticalInput};
@@ -15,3 +17,5 @@ export {CertificateFrame};
 export {LectureBox};
 export {GradeSelect};
 export {ThemedToast};
+export {TrendingLecture};
+export {RecentLectures};

frontend/src/components/GradeSelect.jsx

@@ -4,7 +4,7 @@ import * as Styled from "styles/ComponentStyles";
 function GradeSelect(props){
     return (<>
     <Styled.GradeSelect name="choice" value={props.contents.target} onChange={(e)=>{props.contents.set(e.target.value);}}>
-            <option selected default value="" disabled > Enter your grade </option>
+            <option default value="" disabled > Enter your grade </option>
             <option value="4">🖼️초등학교 4학년</option>
             <option value="5">🖼️초등학교 5학년</option>
             <option value="6">🖼️초등학교 6학년</option>

frontend/src/components/LectureBox.jsx

@@ -1,4 +1,5 @@
 import * as Styled from "styles/ComponentStyles";
+import * as Component from "components/Components";
 import { useNavigate } from "react-router-dom";
 import blackboard from "img/blackboard-compressed.jpg";
 import { useAtom } from "jotai";
@@ -19,12 +20,11 @@ function LectureBox(props){
     var Likes="Likes";
     if (LanguageChange===0){
         Likes="Likes";
-
     }
     else if(LanguageChange===1){
         Likes="추천";
-
     };
+
     return (
         <Styled.LectureBoxFrame width={props.width} onClick={handleLectureClick}>
             <img alt="lecture-thumb" src={imgUrl}/>

frontend/src/components/RecentLectures.jsx

@@ -0,0 +1,94 @@
+import React , {useEffect, useState} from "react";
+import { useAtom } from "jotai";
+import { LanguageChangeAtom } from "util/atom";
+import { toast } from 'react-toastify';
+
+import * as Styled from "styles/ComponentStyles";
+import * as Component from "components/Components";
+import ModularRequest from "util/ModularRequest";
+
+import right from "img/right.png";
+import left from "img/left.png";
+
+function RecentLectures(props){
+    const [LanguageChange,setLanguageChange] = useAtom(LanguageChangeAtom);
+    const notify = (content)=> toast(content);
+
+    const grade = props.grade;
+
+    const [recentLectures, setRecentLectures] = useState([]);
+    const [isLoaded, setIsLoaded] = useState(false);
+    let [page, setPage] = useState(1);
+    const [isEmpty, setIsEmpty] = useState(true);
+
+    const total = (Math.floor((recentLectures.length-1)/4)+1);
+
+    var RecentVideos="Recent Videos";
+    var emptyRecent = "there is no empty lecture to show.";
+    if (LanguageChange===0){
+        RecentVideos="Recent Videos";
+        emptyRecent = "there is no empty lecture to show.";
+    } 
+    else if(LanguageChange===1){
+        RecentVideos="최근 올라온 강의";
+        emptyRecent="최근 강의가 없습니다";
+    }
+
+    useEffect(()=>{
+        try{
+            let m2 = new ModularRequest({
+                "path" : `course/recent?grade=${grade}&number=16`,
+                "method" : "get",
+                "headers" : {
+                    "Authorization" : `Bearer ${localStorage.getItem('login-token')}`,
+                    "Content-Type": 'application/json',
+                }
+            });
+
+            m2.send().then((res)=>{
+                    if(res.status=== 200) {
+                        setRecentLectures(res.data.details);
+                        setIsLoaded(true);
+                        setIsEmpty(false);
+                    } else {
+                        setIsEmpty(true);
+                        setIsLoaded(true);
+                    }
+                }
+            );
+        } catch (e) {
+            setRecentLectures([]);
+            console.log("error in reading trendings");
+        }
+    },[grade]);
+
+    function handlePageShiftClick(toLeft){
+        if(toLeft){ if(page>1) setPage(--page);}
+        else { if(page<total) setPage(++page);}
+    }
+
+
+
+    return (
+        <>
+            <Styled.UnderlinedTitle>{RecentVideos}</Styled.UnderlinedTitle>
+            {isLoaded &&((isEmpty)?<Styled.EmptyBox width="100%">{emptyRecent}</Styled.EmptyBox>:<>
+            <Styled.LectureGroupScrollWrapper>
+                <Styled.LectureGroup offset={-page+1}>
+                    {recentLectures.map((dat)=><Component.LectureBox key={dat.course_id} src={dat} width="calc(40vw - 5px)"></Component.LectureBox>)}
+                </Styled.LectureGroup>
+            </Styled.LectureGroupScrollWrapper>
+
+            <Styled.Buttongroup>
+                <img alt="left" src={left} onClick={()=>{handlePageShiftClick(true);}}/>
+                <span>{page}/{total}</span>
+                <img alt="right" src={right} onClick={()=>{handlePageShiftClick(false);}}/>
+            </Styled.Buttongroup>
+            </>
+            )}
+        </>
+    );
+}
+
+export default RecentLectures;
+

frontend/src/components/TrendingLecture.jsx

@@ -0,0 +1,70 @@
+import React , {useEffect, useState} from "react";
+import { useAtom } from "jotai";
+import { LanguageChangeAtom } from "util/atom";
+import { toast } from 'react-toastify';
+
+import * as Styled from "styles/ComponentStyles";
+import * as Component from "components/Components";
+import ModularRequest from "util/ModularRequest";
+
+
+function TrendingLecture(props){
+    const [LanguageChange,setLanguageChange] = useAtom(LanguageChangeAtom);
+    const [trending, setTrending] = useState({}); 
+    const [isEmpty, setIsEmpty] = useState(true);
+    const notify = (content)=> toast(content);
+
+    var bestLecture="Best Lecture";
+    var emptyTrending="there is no trending lecture to show.";
+
+    if (LanguageChange===0){
+        bestLecture="Trending Lecture";
+        emptyTrending="there is no trending lecture to show.";
+    }
+    else if(LanguageChange===1){
+        bestLecture="추천수 높은 강의";
+        emptyTrending = "추천수 높은 강의가 없습니다.";
+    };
+
+    const grade = props.grade;
+
+
+
+    useEffect(()=>{
+            try {
+                let m1 = new ModularRequest({
+                    "path" : `course/trending?grade=${grade}`,
+                    "method" : "get",
+                    "headers" : {
+                        "Authorization" : `Bearer ${localStorage.getItem('login-token')}`,
+                        "Content-Type": 'application/json',
+                    }
+                });
+
+                m1.send().then((res)=>{
+                    if(res.status=== 200) {
+                        setIsEmpty(false);
+                       setTrending(res.data.details);
+                    } 
+                  }
+                );
+
+            } catch (e) {
+                setTrending({});
+                console.log("error in reading trendings");
+                console.error(e.message);
+            }
+    },[]);
+
+
+
+    return (
+        <>
+            <Styled.UnderlinedTitle align="center">{bestLecture}</Styled.UnderlinedTitle>
+            {(!isEmpty)?<Component.LectureBox src={trending}></Component.LectureBox>:<Styled.EmptyBox width="100%">{emptyTrending}</Styled.EmptyBox>}
+        </>
+    );
+}
+
+export default TrendingLecture;
+