fix bugs

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "cSpell.words": [
+    "bodery",
+    "CLOUDINARY",
+    "Multicheck",
+    "reduxjs",
+    "Rounter",
+    "swiper",
+    "toastify",
+    "ultis"
+  ]
+}

README.md

@@ -2,23 +2,21 @@
 
 ## The Project Description:
 
-- Là một nơi để giao lưu và chia sẽ các tips/videos về thủ công.
+- A place to share tips/videos on how to make objects through manual methods.
 
-- Application có thể đăng video. Application cho phép xây dựng thương hiệu cá nhân với cộng đồng yêu thích nghệ thuật.
+- The application allows posting videos, thereby helping to build a personal brand with the art-loving community.
 
-- Application phải cạnh tranh với các trang xã hội chuyên chia sẽ video nổi tiếng khác như Youtube, TikTok hay mạng xã hội nổi tiếng như Reddit, Facebook, Instagram, etc.
+- The application has to compete with other famous social sites such as Facebook, YouTube, TikTok, etc.
 
 ## User Story:
 
-DIY là một trang mạng xã hội cho phép người dung có thể tham gia bằng cách tạo tài khoản. Mỗi tài khoản phải có Tên, Email và Password.
+DIY is a video social networking site that allows users to join by creating an account. Each account must have basic info such as a name, email, and password.
 
-Đối với người chưa tham gia, người dùng vẫn có thể xem các video, tuy nhiên sẽ không thể tương tác với bài post.
+For those who have not signed in yet, viewers can still watch videos, but will not be able to interact with video posts.
 
-Sau khi tham gia, người dùng có thể update profile (Avatar, Personal Info, Social Link và giới thiệu bản thân).
+After logging in, users can update their profile.
 
-Người dùng có thể post bài viết + hình ảnh/Video. Người dùng có thể quản lý các video, người xem có thể tương tác vào bài post.
-
-<!-- Người xem có thể Follow người khác để theo dõi các bài post của nhau. -->
+Users can manage videos, other users can interact with video posts.
 
 ### Authentication
 
@@ -28,36 +26,16 @@ As a user, I can stay signed in after refreshing the page.
 
 ### Users
 
-As a user, I can see a list of other users so that I can send follow requests.
 As a user, I can see my current profile info.
-As a user, I can see a specific user's profile given a user ID.
-As a user, I can update my profile with Avatar, Company, Job Title, Social Links, and a short description.
-
-### Posts
+As a user, I can update my profile with Avatar, Name.
 
-As a user, I can see a list of posts.
-As a user, I can create a new post with text content and an image/video.
-As a user, I can edit my posts.
-As a user, I can delete my posts.
+### Videos
 
-<!-- ### Comments
-
-As a user, I can see a list of comments on a post.
-As a user, I can write comments on a post.
-As a user, I can update my comments.
-As a user, I can delete my comments. -->
+As a user, I can see all videos from other users
+As a user, I can create a new video with description.
+As a user, I can edit my video info.
+As a user, I can remove my video.
 
 ### Reactions
 
-As a user, I can react like or dislike to a post or a comment.
-
-<!-- ### Follower
-
-As a user, I can do follow request to another user.
-As a user, I can see a list of following.
-As a user, I can un-follow another one.
-As a user, I can block another user if I don't want to watch or see their activity -->
-
-## API endpoints
-
-Nothing to write at the moment.
+As a user, I can react add favorite to a video post.

src/App.js

@@ -1,14 +1,13 @@
 import React from "react";
-import "./App.css";
-
 import { BrowserRouter } from "react-router-dom";
 import Router from "./routes";
-
 import ThemeProvider from "./themes";
 import { AuthProvider } from "./contexts/AuthContext";
 import ToastMsg from "./components/ToastMsg";
 
-function App() {
+import "./App.css";
+
+const App = () => {
   return (
     <AuthProvider>
       <BrowserRouter>
@@ -19,6 +18,6 @@ function App() {
       </BrowserRouter>
     </AuthProvider>
   );
-}
+};
 
 export default App;

src/app/store.js

@@ -1,5 +1,4 @@
 import { configureStore } from "@reduxjs/toolkit";
-
 import userReducer from "../features/User/userSlice";
 import videoReducer from "../features/Video/videoSlice";
 

src/components/Card/index.js

@@ -1,17 +1,18 @@
-import React from "react";
-
-import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
-
-import "./Card.scss";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import PATH_NAME from "../../constants/pathName.constants";
 import DisplayVideo from "../DisplayVideo";
+
+import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 
-function FCard({ video, other }) {
+import "./Card.scss";
+
+const FCard = ({ video, other }) => {
   const navigate = useNavigate();
 
-  const [isFavorite, setIsFavorite] = React.useState(false);
+  // eslint-disable-next-line no-unused-vars
+  const [isFavorite, setIsFavorite] = useState(false);
 
   const handleClickVideo = () => {
     navigate(`${PATH_NAME.WATCH_VIDEO}/${video._id}`);
@@ -81,6 +82,6 @@ function FCard({ video, other }) {
       </Card>
     </div>
   );
-}
+};
 
 export default FCard;

src/components/Category/categoryCard/index.js

@@ -1,15 +1,15 @@
 import React from "react";
-import "./categoryCard.scss";
+import { NEUTRAL, PRIMARY } from "../../../themes";
 
 import {
-  Box,
   Card,
   CardActionArea,
   CardContent,
   CardMedia,
   Typography,
 } from "@mui/material";
-import { NEUTRAL, PRIMARY } from "../../../themes";
+
+import "./categoryCard.scss";
 
 function CategoryCard({ data, handleNavigateCategory }) {
   return (
@@ -31,7 +31,7 @@ function CategoryCard({ data, handleNavigateCategory }) {
                 textAlign: "center",
                 fontSize: "1rem",
                 fontWeight: 700,
-                color: PRIMARY.constrastTest,
+                color: PRIMARY.contrastTest,
               }}
             >
               {data.label}

src/components/Category/index.js

@@ -1,17 +1,18 @@
 import React from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
-import { Typography } from "@mui/material";
-
-import "./categoryList.scss";
+import { searchVideo, setCategoryStore } from "../../features/Video/videoSlice";
 import CategoryCard from "./categoryCard";
 import { CATEGORY_LIST } from "../../constants/list.constants";
-import { useDispatch } from "react-redux";
-import { searchVideo, setCategoryStore } from "../../features/Video/videoSlice";
-import { useNavigate } from "react-router-dom";
 import PATH_NAME from "../../constants/pathName.constants";
 
-function CategoryList() {
+import { Typography } from "@mui/material";
+
+import "./categoryList.scss";
+import "swiper/css";
+
+const CategoryList = () => {
   const dispatch = useDispatch();
 
   const navigate = useNavigate();
@@ -50,6 +51,6 @@ function CategoryList() {
       </Swiper>
     </div>
   );
-}
+};
 
 export default CategoryList;

src/components/Collection/collectionCard/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import "./collectionCard.css";
 
 import {
   Card,
@@ -9,7 +8,9 @@ import {
   Typography,
 } from "@mui/material";
 
-function CollectionCard({ data, handleNavigateCollection }) {
+import "./collectionCard.css";
+
+const CollectionCard = ({ data, handleNavigateCollection }) => {
   return (
     <div onClick={() => handleNavigateCollection(data.value)}>
       <Card sx={{ borderRadius: 0, boxShadow: "none" }}>
@@ -38,6 +39,6 @@ function CollectionCard({ data, handleNavigateCollection }) {
       </Card>
     </div>
   );
-}
+};
 
 export default CollectionCard;

src/components/Collection/index.js

@@ -1,21 +1,21 @@
 import React from "react";
-import "./collectionList.scss";
 import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
-
-import CollectionCard from "./collectionCard";
-
-import { Typography } from "@mui/material";
 import { COLLECTION_LIST } from "../../constants/list.constants";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import CollectionCard from "./collectionCard";
+import PATH_NAME from "../../constants/pathName.constants";
+
+import { Typography } from "@mui/material";
 import {
   searchVideo,
   setCollectionStore,
 } from "../../features/Video/videoSlice";
-import PATH_NAME from "../../constants/pathName.constants";
 
-function CollectionList() {
+import "./collectionList.scss";
+import "swiper/css";
+
+const CollectionList = () => {
   const dispatch = useDispatch();
 
   const navigate = useNavigate();
@@ -55,6 +55,6 @@ function CollectionList() {
       </Swiper>
     </div>
   );
-}
+};
 
 export default CollectionList;

src/components/DisplayVideo/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-
 import { Player } from "video-react";
 
 import "video-react/dist/video-react.css";

src/components/HeroCard/index.js

@@ -1,18 +1,17 @@
 import React from "react";
-import "./HeroCard.scss";
-
-import { Button, Card, Typography } from "@mui/material";
-
-import { useNavigate } from "react-router-dom";
-
-import PATH_NAME from "../../constants/pathName.constants";
 import useAuth from "../../hooks/useAuth";
 import DisplayVideo from "../DisplayVideo";
 import AlertDelete from "../../features/Video/AlertDelete";
+import PATH_NAME from "../../constants/pathName.constants";
 import { MATERIAL_OPTION, TOOLS_OPTION } from "../../constants/list.constants";
 import { formatArrayToStringLabel } from "../../ultis/formatArrayDataToLabel";
+import { useNavigate } from "react-router-dom";
+
+import { Button, Card, Typography } from "@mui/material";
+
+import "./HeroCard.scss";
 
-function HeroCard({ video }) {
+const HeroCard = ({ video }) => {
   const { isAuthenticated, user } = useAuth();
 
   const navigate = useNavigate();
@@ -93,6 +92,6 @@ function HeroCard({ video }) {
       </div>
     </Card>
   );
-}
+};
 
 export default HeroCard;

src/components/HeroSlice/index.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+
 import { Button } from "@mui/material";
 
 import classes from "./heroSlice.module.scss";
 
-function HeroSlice() {
+const HeroSlice = () => {
   const navigate = useNavigate();
 
   return (
@@ -32,6 +33,6 @@ function HeroSlice() {
       </div>
     </>
   );
-}
+};
 
 export default HeroSlice;

src/components/LoadingScreen/index.js

@@ -2,10 +2,11 @@ import React from "react";
 
 import { Box, CircularProgress } from "@mui/material";
 
-function LoadingScreen() {
+const LoadingScreen = () => {
   return (
     <Box
       sx={{
+        padding: "50px",
         width: "100%",
         height: "100%",
         display: "flex",
@@ -16,6 +17,6 @@ function LoadingScreen() {
       <CircularProgress />
     </Box>
   );
-}
+};
 
 export default LoadingScreen;

src/components/LogoBasic/index.js

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 
 import logoHeader from "../../images/logoHeader.png";
 
-function LogoBasic({ other }) {
+const LogoBasic = ({ other }) => {
   const navigate = useNavigate();
   return (
     <div
@@ -13,6 +13,6 @@ function LogoBasic({ other }) {
       <img src={logoHeader} alt="logo" width="100%" />
     </div>
   );
-}
+};
 
 export default LogoBasic;

src/components/MiniCard/index.js

@@ -1,8 +1,9 @@
 import React from "react";
-import "./MiniCard.scss";
+import DisplayVideo from "../DisplayVideo";
 
 import { Card, CardContent, Typography } from "@mui/material";
-import DisplayVideo from "../DisplayVideo";
+
+import "./MiniCard.scss";
 
 export const MiniCard = ({ userId, videoId }) => {
   const stringTitle = `Tittle Video will be a long title, include 56 characters and you won't