[feat] 404 Page and dynamic titles

src/App.js

@@ -3,7 +3,7 @@ import { Router } from "./router";
 import "./index.css";
 import { AuthProvider, VideoProvider } from "./context";
 import { NavigationWrapper } from "./components";
-import { WindowScrollToTop } from "./windowScrollToTop/windowScrollToTop";
+import { WindowScrollToTop } from "./utils";
 
 function App() {
  return (

src/components/errorResult/ErrorResult.jsx

@@ -0,0 +1,62 @@
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import React from "react";
+import { Link } from "react-router-dom";
+import ErrorIllustration from "../../assets/ErrorIllustration.svg";
+
+export const ErrorResult = () => {
+ return (
+ <Box
+ sx={{
+ height: "calc(100vh - 170px)",
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ }}
+ component="section">
+ <Box
+ height="25rem"
+ width="100%"
+ alt="empty result"
+ src={ErrorIllustration}
+ component="img"></Box>
+ <Box component="section">
+ <Typography
+ sx={{
+ color: "#fff",
+ fontSize: {
+ xs: "1.2rem",
+ md: "1.5rem",
+ },
+ fontWeight: 400,
+ textAlign: "center",
+ }}
+ variant="h5"
+ component="h5">
+ Sorry, page not found.
+ </Typography>
+ <Link style={{ textDecoration: "none" }} to="/explore">
+ <Typography
+ sx={{
+ color: "#1a5bff",
+ fontSize: {
+ xs: "1rem",
+ md: "1.2rem",
+ },
+ fontWeight: 400,
+ borderBottom: "3px solid #1a5bff",
+ mx: "auto",
+ mt: "1rem",
+ width: "fit-content",
+ }}
+ variant="h5"
+ component="h5">
+ Return to Explore videos
+ </Typography>
+ </Link>
+ </Box>
+ </Box>
+ );
+};

src/components/index.jsx

@@ -14,6 +14,7 @@ import { EmptyResult } from "./emptyResult/EmptyResult";
 import { PrivateCard } from "./PrivateCard/PrivateCard";
 import { PlaylistModal } from "./playlistModal/PlaylistModal";
 import { PlaylistCard } from "./playlistCard/PlaylistCard";
+import { ErrorResult } from "./errorResult/ErrorResult";
 
 export {
  Navbar,
@@ -32,4 +33,5 @@ export {
  PrivateCard,
  PlaylistModal,
  PlaylistCard,
+ ErrorResult,
 };

src/context/video-context/server-requests.js

@@ -126,7 +126,6 @@ export const setPlaylists = async (token, playlistTitle, videoDispatch) => {
  { headers: { authorization: token } }
  );
  if (res.status == 200 || res.status === 201) {
- console.log(res);
  videoDispatch({ type: addPlaylist, payload: res.data.playlists });
  }
  } catch (error) {
@@ -148,7 +147,6 @@ export const setPlaylistNewVideo = async (
  { headers: { authorization: token } }
  );
  if (res.status == 200 || res.status === 201) {
- console.log(res);
  const playlist = res.data.playlist;
  const updatedPlaylists = playlists.map((localPlaylist) =>
  localPlaylist._id === playlist._id

src/pages/error/Error.jsx

@@ -1,5 +1,13 @@
 import React from "react";
+import { ErrorResult } from "../../components";
+import { useDocumentTitle } from "../../utils";
 
 export const Error = () => {
- return <div>404 Not Found</div>;
+ useDocumentTitle("404 Not Found | KemmelTube");
+
+ return (
+ <main className="wrapper p-1">
+ <ErrorResult />
+ </main>
+ );
 };

src/pages/explore/Explore.jsx

@@ -3,22 +3,25 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { CategoryFilter, ExploreCard, PlaylistModal } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const Explore = () => {
  const [playlistVideo, setPlaylistVideo] = useState({});
- const { modal, setModal } = useAuth();
 
  const {
  videoState: { filteredVideos, filters },
  } = useVideo();
 
+ const [selectedCategory, setSelectedCategory] = useState(filters ?? "All");
  const {
  authState: { token },
+ modal,
+ setModal,
  } = useAuth();
 
  const navigate = useNavigate();
 
- const [selectedCategory, setSelectedCategory] = useState(filters ?? "All");
+ useDocumentTitle(`Explore ${selectedCategory === "All" ? "" : selectedCategory} | KemmelTube`);
 
  const handlePlaylist = (video) => {
  if (token) {

src/pages/history/History.jsx

@@ -2,6 +2,7 @@ import { Grid } from "@mui/material";
 import React, { useState, useEffect } from "react";
 import { PageHeader, EmptyResult, PrivateCard } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const History = () => {
  const [showBtn, setShowBtn] = useState(false);
@@ -16,6 +17,8 @@ export const History = () => {
  authState: { token },
  } = useAuth();
 
+ useDocumentTitle("History | KemmelTube")
+
  const handleClear = () => {
  clearAllHistory(token, videoDispatch);
  };

src/pages/home/Home.jsx

@@ -1,9 +1,13 @@
 import React from "react";
 
 import { HeroContainer } from "../../components";
+import { useDocumentTitle } from "../../utils";
 import { Categories } from "./Categories";
 
 export const Home = () => {
+
+ useDocumentTitle("Home | KemmelTube")
+
  return (
  <main>
  <div className="wrapper">

src/pages/liked/Liked.jsx

@@ -2,6 +2,7 @@ import { Grid } from "@mui/material";
 import React from "react";
 import { EmptyResult, PageHeader, PrivateCard } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const Liked = () => {
  const {
@@ -14,6 +15,12 @@ export const Liked = () => {
  authState: { token },
  } = useAuth();
 
+ useDocumentTitle(
+ `Liked Videos ${
+ likedVideos.length > 0 ? `(${likedVideos.length})` : ""
+ } | KemmelTube`
+ );
+
  const handleDeleteFromLikedVideos = (videoId) => {
  deleteFromLikedVideos(token, videoId, videoDispatch);
  };

src/pages/login/Login.jsx

@@ -11,6 +11,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { PasswordInput, RegularTextInput } from "../../components";
 import { useAuth } from "../../context";
 import { handleLogin } from "../../context/auth-context/server-requests";
+import { useDocumentTitle } from "../../utils";
 
 const CustomFormControl = styled(FormControl)({
  required: true,
@@ -86,6 +87,8 @@ export const Login = () => {
  const navigate = useNavigate();
  const location = useLocation();
 
+ useDocumentTitle("SignUp | KemmelTube");
+
  const handleChange = (e) => {
  const { name, value } = e.target;
  setData((prev) => ({ ...prev, [name]: value }));

src/pages/playlists/Playlists.jsx

@@ -7,6 +7,7 @@ import {
  PlaylistCard,
 } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const Playlists = () => {
  const {
@@ -21,6 +22,12 @@ export const Playlists = () => {
  setModal,
  } = useAuth();
 
+ useDocumentTitle(
+ `Playlists ${
+ playlists.length > 0 ? `(${playlists.length})` : ""
+ } | KemmelTube`
+ );
+
  const handleModalOpen = () => {
  setModal((s) => !s);
  };

src/pages/signup/Signup.jsx

@@ -12,6 +12,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { PasswordInput, RegularTextInput } from "../../components";
 import { useAuth } from "../../context";
 import { handleSignUp } from "../../context/auth-context/server-requests";
+import { useDocumentTitle } from "../../utils";
 
 const CustomFormControl = styled(FormControl)({
  variant: "outlined",
@@ -77,6 +78,8 @@ export const Signup = () => {
  const navigate = useNavigate();
  const location = useLocation();
 
+ useDocumentTitle("SignUp | KemmelTube");
+
  const handleChange = (e) => {
  const { name, value } = e.target;
  setData((prev) => ({ ...prev, [name]: value }));

src/pages/singlePlaylist/SinglePlaylist.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { EmptyResult, PageHeader, PrivateCard } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const SinglePlaylist = () => {
  const [currentPlaylist, setCurrentPlaylist] = useState("");
@@ -19,6 +20,8 @@ export const SinglePlaylist = () => {
 
  const { slug } = useParams();
 
+ useDocumentTitle(`Playlist : ${currentPlaylist?.title} | KemmelTube`);
+
  const handleDeleteVideoFromPlaylist = (videoId) => {
  deleteVideoFromPlaylist(token, videoId, playlists, slug, videoDispatch);
  };

src/pages/watch/Watch.jsx

@@ -7,11 +7,11 @@ import {
 } from "../../components";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const Watch = () => {
  const [playlistVideo, setPlaylistVideo] = useState({});
 
- const { slug } = useParams();
  const {
  videoState: { videos, likedVideos, watchLater },
  videoDispatch,
@@ -28,8 +28,12 @@ export const Watch = () => {
  setModal,
  } = useAuth();
 
+ const { slug } = useParams();
  const navigate = useNavigate();
+
  const currentVideo = videos?.find((video) => video._id === slug);
+
+ useDocumentTitle(`${currentVideo?.title} | KemmelTube`);
 
  const relatedVideos = videos?.filter(
  (video) =>

src/pages/watchlater/WatchLater.jsx

@@ -2,6 +2,7 @@ import { Grid } from "@mui/material";
 import React from "react";
 import { EmptyResult, PageHeader, PrivateCard } from "../../components";
 import { useAuth, useVideo } from "../../context";
+import { useDocumentTitle } from "../../utils";
 
 export const WatchLater = () => {
  const {
@@ -14,6 +15,12 @@ export const WatchLater = () => {
  authState: { token },
  } = useAuth();
 
+ useDocumentTitle(
+ `Watch Later ${
+ watchLater.length > 0 ? `(${watchLater.length})` : ""
+ } | KemmelTube`
+ );
+
  const handleDeleteFromWatchLater = (videoId) => {
  deleteFromWatchLater(token, videoId, videoDispatch);
  };

src/utils/documentTitle/useDocumentTitle.jsx

@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+
+export function useDocumentTitle(title) {
+ useEffect(() => {
+ document.title = title;
+ });
+}

src/utils/index.jsx

@@ -0,0 +1,4 @@
+import { WindowScrollToTop } from "./windowScrollToTop/windowScrollToTop";
+import { useDocumentTitle } from "./documentTitle/useDocumentTitle";
+
+export { WindowScrollToTop, useDocumentTitle };