Cleanup frontend files

hanichris · May 1, 2023 · 33d6d88 · 33d6d88
1 parent c1f1962
commit 33d6d88
Show file tree

Hide file tree

Showing 35 changed files with 1,062 additions and 850 deletions.
diff --git a/frontend/.eslintrc.mjs → frontend/.eslintrc.cjs b/frontend/.eslintrc.mjs → frontend/.eslintrc.cjs
@@ -23,7 +23,7 @@ module.exports = {
     },
     ecmaVersion: 2018,
     sourceType: 'module',
-    project: './tsconfig.json'
+    project: 'frontend/tsconfig.json'
   },
   plugins: ['jest', 'react', '@typescript-eslint'],
   settings: {
@@ -44,6 +44,7 @@ module.exports = {
     }
   },
   rules: {
+    quotes: [2, "single", { "avoidEscape": true }],
     'max-classes-per-file': 'off',
     'no-underscore-dangle': 'off',
     'no-console': 'off',

diff --git a/frontend/package.json b/frontend/package.json
@@ -7,8 +7,8 @@
     "start": "vite --port 3000",
     "build": "tsc --incremental --noEmit && vite build",
     "preview": "vite preview",
-    "lint": "./node_modules/.bin/eslint *.js *.ts --fix",
-    "check-lint": "./node_modules/.bin/eslint *.js *.ts",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx  --fix",
+    "check-lint": "eslint . --ext .js,.jsx,.ts,.tsx ",
     "fmt": "prettier --write .",
     "check-fmt": "prettier --check .",
     "semifix": "semistandard --fix .",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
-import { useRoutes } from "react-router-dom";
-import routes from "./router";
+import { useRoutes } from 'react-router-dom';
+import routes from './router';
 
 function App() {
   const content = useRoutes(routes);

diff --git a/frontend/src/components/ChannelCard.tsx b/frontend/src/components/ChannelCard.tsx
@@ -1,28 +1,26 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-import {format} from "timeago.js";
-import { IVideo, IChannel } from "../utils/types"
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { format } from 'timeago.js';
+import { IChannel } from '../utils/types';
 
 const Container = styled.div`
-  width: ${(props: any) => props.type !== "sm" && "360px"};
-  margin-bottom: ${(props: any) => (props.type === "sm" ? "10px" : "45px")};
+  width: ${(props: any) => props.type !== 'sm' && '360px'};
+  margin-bottom: ${(props: any) => (props.type === 'sm' ? '10px' : '45px')};
   cursor: pointer;
-  display: ${(props: any) => props.type === "sm" && "flex"};
+  display: ${(props: any) => props.type === 'sm' && 'flex'};
   gap: 10px;
 `;
 
 const Image = styled.img`
   width: 100%;
-  height: ${(props: any) => (props.type === "sm" ? "120px" : "202px")};
+  height: ${(props: any) => (props.type === 'sm' ? '120px' : '202px')};
   background-color: #999;
   flex: 1;
 `;
 
 const Details = styled.div`
   display: flex;
-  margin-top: ${(props: any) => props.type !== "sm" && "16px"};
+  margin-top: ${(props: any) => props.type !== 'sm' && '16px'};
   gap: 12px;
   flex: 1;
 `;
@@ -32,7 +30,7 @@ const ChannelImage = styled.img`
   height: 38px;
   border-radius: 50%;
   background-color: #999;
-  display: ${(props: any) => props.type === "sm" && "none"};
+  display: ${(props: any) => props.type === 'sm' && 'none'};
 `;
 
 const Texts = styled.div``;
@@ -55,54 +53,27 @@ const Info = styled.div`
   color: ${({ theme }) => theme.textSoft};
 `;
 
-const ChannelCard = ({ channel }: { channel:IChannel}) => {
-  // const [channel, setChannel] = useState<IChannel>({
-  //   _id: "",
-  //   name: "",
-  //   description: "",
-  //   imgUrl: "",
-  //   views: 0,
-  //   tags: [],
-  //   likes: [],
-  //   dislikes: [],
-  //   videos: [],
-  //   subscribers: 0,
-  //   isPublic: false,
-  // });
-  const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
-  // useEffect(() => {
-  //   const fetchChannel = async () => {
-  //     const res = await axios.get(`${SERVER_ENDPOINT}/channels/${channel.channelId}/view`);
-  //     setChannel(res.data);
-  //   };
-  //   fetchChannel();
-  // }, [channel.userId]);
-
+function ChannelCard({ channel }: { channel: IChannel }) {
   return (
-    <Link to={`/channels/${channel._id}`} style={{ textDecoration: "none" }}>
-      <Container
-        // type={type}
-        >
-        <Image
-          // type={type}
-          src={channel.imgUrl}
-        />
-        <Details 
-        // type={type}
-        >
-          <ChannelImage
-            // type={type}
-            src={channel.imgUrl}
-          />
+    <Link to={`/channels/${channel._id}`} style={{ textDecoration: 'none' }}>
+      <Container>
+        <Image src={channel.imgUrl} />
+        <Details>
+          <ChannelImage src={channel.imgUrl} />
           <Texts>
             <Title>{channel.name}</Title>
             <ChannelName>{channel.name}</ChannelName>
-            <Info>{channel.views} views • {format(channel.createdAt)}</Info>
+            <Info>
+              {channel.views}
+              {' '}
+              views •
+              {format(channel.createdAt)}
+            </Info>
           </Texts>
         </Details>
       </Container>
     </Link>
   );
-};
+}
 
 export default ChannelCard;
diff --git a/frontend/src/components/Comment.tsx b/frontend/src/components/Comment.tsx
@@ -1,9 +1,9 @@
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
-import { IChannel, IComment } from "../utils/types";
-import {format} from "timeago.js";
-import useStore from "../store";
+import axios from 'axios';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+import { format } from 'timeago.js';
+import { IComment } from '../utils/types';
+import useStore from '../store';
 
 const Container = styled.div`
   display: flex;
@@ -40,44 +40,37 @@ const Text = styled.span`
 `;
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
-const Comment = ({ videoId, comment }: {videoId: string, comment: IComment}) => {
+function Comment({
+  videoId,
+  comment,
+}: {
+  videoId: string;
+  comment: IComment;
+}) {
   const store = useStore();
   const user = store.authUser;
-  // const [channel, setChannel] = useState<IChannel>({
-  //   _id: "",
-  //   name: "",
-  //   description: "",
-  //   imgUrl: "",
-  //   views: 0,
-  //   tags: [],
-  //   likes: [],
-  //   dislikes: [],
-  //   videos: [],
-  //   subscribers: 0,
-  //   isPublic: false,
-  //   createdAt: ""
-  // });
 
   useEffect(() => {
-      const fetchComment = async () => {
-        const videoRes = await axios.get(`${SERVER_ENDPOINT}/videos/${videoId}`);
-        // const userRes = await axios.get(`${SERVER_ENDPOINT}/users/${videoRes.data.userId}`);
-        // setChannel(userRes.data)
-      };
-      fetchComment();
+    const fetchComment = async () => {
+      const videoRes = await axios.get(`${SERVER_ENDPOINT}/videos/${videoId}`);
+    };
+    fetchComment();
   }, [videoId]);
 
   return (
     <Container>
       <Avatar src={user?.avatar} />
       <Details>
         <Name>
-          {user?.username} • {format(comment.createdAt)}
+          {user?.username}
+          {' '}
+          •
+          {format(comment.createdAt)}
         </Name>
         <Text>{comment.description}</Text>
       </Details>
     </Container>
   );
-};
+}
 
 export default Comment;
diff --git a/frontend/src/components/Comments.tsx b/frontend/src/components/Comments.tsx
@@ -1,12 +1,12 @@
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types';
 import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import Comment from './Comment';
-import { IChannel, IUser, IVideo, IComment } from "../utils/types";
-import { useNavigate } from "react-router-dom";
-import useStore from "../store";
-import { toast } from "react-toastify";
+import { IComment } from '../utils/types';
+import useStore from '../store';
 
 const Container = styled.div``;
 
@@ -43,59 +43,44 @@ const Button = styled.button`
 
 const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
 
-const Comments = ( {videoId}: {videoId: string} ) => {
+function Comments({ videoId }: { videoId: string }) {
   const navigate = useNavigate();
   const store = useStore();
   const [newcomment, setNewComment] = useState<string>();
   const [comments, setComments] = useState<Array<IComment>>([]);
-  // const [currentUser, setUser] = useState<IUser>({
-  //   _id: "",
-  // username: "",
-  // email: "",
-  // avatar: "",
-  // subscriptions: [],
-  // history: [],
-  // channels: [],
-  // fromGoogle: false,
-  // });
   const currentUser = store.authUser;
 
   useEffect(() => {
     const fetchComments = async () => {
       try {
-        const commentRes = await axios.get(`${SERVER_ENDPOINT}/comments/${videoId}`);
+        const commentRes = await axios.get(
+          `${SERVER_ENDPOINT}/comments/${videoId}`,
+        );
         setComments(commentRes.data);
-        // const userRes = await axios.get(
-        //   `${SERVER_ENDPOINT}/users/${commentRes.data.userId}`
-        // );
-        // setUser(userRes.data)
       } catch (err) {}
     };
     fetchComments();
   }, [videoId]);
 
   const handleAddComment = async () => {
     try {
-      await axios.post(`${SERVER_ENDPOINT}/comments/${videoId}`, 
-      {description: newcomment},
-      {
-        withCredentials: true,
-      });
+      await axios.post(
+        `${SERVER_ENDPOINT}/comments/${videoId}`,
+        { description: newcomment },
+        {
+          withCredentials: true,
+        },
+      );
     } catch (error: any) {
-      console.log(error?.message)
-      const resMessage =
-        (error.response &&
-          error.response.data &&
-          error.response.data.message) ||
-        error.message ||
-        error.toString();
-
-      if (error?.message === "You are not logged in") {
-        navigate("/login");
-      }
+      console.log(error?.message);
+      const resMessage = (error.response
+          && error.response.data
+          && error.response.data.message)
+        || error.message
+        || error.toString();
 
       toast.error(resMessage, {
-        position: "top-right",
+        position: 'top-right',
       });
     }
   };
@@ -104,23 +89,21 @@ const Comments = ( {videoId}: {videoId: string} ) => {
     <Container>
       <NewComment>
         <Avatar src={currentUser?.avatar} />
-        <Input 
+        <Input
           placeholder="Add a comment..."
           onChange={(e) => setNewComment(e.target.value)}
         />
-        <Button onClick={handleAddComment}>
-          Add
-        </Button>
+        <Button onClick={handleAddComment}>Add</Button>
       </NewComment>
       {comments.map((comment) => (
-        <Comment key={comment._id} videoId={videoId} comment={comment}/>
+        <Comment key={comment._id} videoId={videoId} comment={comment} />
       ))}
     </Container>
   );
-};
+}
 
 Comments.propTypes = {
-  videoId: PropTypes.string
-}
+  videoId: PropTypes.string,
+};
 
 export default Comments;
diff --git a/frontend/src/components/DefaultLayout.tsx b/frontend/src/components/DefaultLayout.tsx