share art redirection to log in

src/components/userHub/AddArtButton.js

@@ -1,11 +1,21 @@
 import React from "react";
 import styles from "./AddArtButton.module.css";
 import { Box } from "@mui/material";
+import { useAuth0 } from "@auth0/auth0-react";
+import { useNavigate } from 'react-router-dom';
 
 const AddArtButton = () => {
+    const { isAuthenticated } = useAuth0();
+    const { loginWithRedirect } = useAuth0();
+    const navigate = useNavigate();
+
+    const handleCheckLogIn = () => {
+        isAuthenticated ? navigate("/VideoUpload") : loginWithRedirect();
+    }
+
     return (
-        <Box className={styles.box} >
-            <a href="#">
+        <Box className={styles.box}>
+            <a href="" onClick={handleCheckLogIn}>
                 <span></span>
                 <span></span>
                 <span></span>

src/components/userHub/UserVideo.js

@@ -7,7 +7,6 @@ import VideoBoxWithDecor from "./VideoBoxWithDecor";
 
 const UserVideo = ({ video, maxWidth, withVideoInfo }) => {
     const { videoUrl, videoImg, ...videoInfo } = video;
-    console.log(videoInfo)
     return (
         <Card variant="outlined" sx={{ width: "100%", height: "100%", backgroundColor: "black", p: 2, maxWidth }}>
             <VideoBoxWithDecor videoUrl={videoUrl} videoImg={videoImg} maxWidth={maxWidth} />

src/index.js

@@ -9,11 +9,10 @@ import Home from "./pages/HomePage";
 import Error from "./pages/ErrorPage";
 import Multimedia from "./pages/MultimediaPage";
 import Profile from "./pages/ProfilePage";
-import DummyHomePage from "./pages/DummyHomePage";
-
+import DummyHomePage from "./pages/DummyHomePage"
+import VideoUploadPage from "./pages/VideoUpload/VideoUpload";
 import Theme from "./theme";
 import App from "./App";
-
 import PostAuthentication from "./components/PostAuthentication";
 import reportWebVitals from "./reportWebVitals";
 import Episode from "./pages/EpisodePage";
@@ -60,7 +59,9 @@ root.render(
               />
               <Route path="login" element={<PostAuthentication />} />
               <Route path="dummyHomePage" element={<DummyHomePage />}></Route>
-              <Route path="Dashboard" element={<Dashboard />}></Route>
+              <Route path="dashboard" element={<Dashboard />}></Route>
+              <Route path="VideoUpload" element={<VideoUploadPage />}></Route>
+
               <Route path="profile" element={<Profile />} />
               <Route path="*" element={<Error />} />
             </Route>

src/pages/DummyHomePage/PageTitleComponent.js

@@ -1,6 +1,5 @@
 
 import { Grid, Typography } from "@mui/material";
-import AddArtButton from "../../components/userHub/AddArtButton";
 
 const PageTitleComponent = ({ title, fontSize }) => {
     const { mainTitle, subtitle } = title;
@@ -43,7 +42,7 @@ const PageTitleComponent = ({ title, fontSize }) => {
                 {subtitle}
             </Typography>
 
-            <AddArtButton />
+
         </Grid>
     );
 };

src/pages/DummyHomePage/index.js

@@ -1,64 +1,49 @@
-import { Grid } from "@mui/material";
-import UserVideo from "../../components/userHub/UserVideo";
-import { userHubVideoListMocks } from "../../api/mocks";
-import PageTitleComponent from "./PageTitleComponent";
+
+import { Grid } from "@mui/material"
+import UserVideo from "../../components/userHub/UserVideo"
+import { userHubVideoListMocks } from "../../api/mocks"
+import PageTitleComponent from "./PageTitleComponent"
+import AddArtButton from "../../components/userHub/AddArtButton";
+
+
 
 const DummyHomePage = () => {
-  let title = {
-    mainTitle: "Welcome to VideoHub",
-    subtitle: "Your Ultimate Destination for Awesome Content Experiences!",
-  };
-  let fontSize = {
-    titleFontSize: "50pt",
-    subtitleFontSize: "24pt",
-  };
-  return (
-    <Grid
-      container
-      direction="column"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <Grid
-        item
-        lg={12}
-        sx={{ mt: { xs: "2rem", lg: "2rem" }, mb: { xs: "1rem", lg: "2rem" } }}
-      >
-        <PageTitleComponent title={title} fontSize={fontSize} />
-      </Grid>
-      <Grid item sx={{ width: "90%", marginTop: "2rem", marginBottom: "2rem" }}>
-        <Grid
-          container
-          justifyContent="center"
-          sx={{ marginBottom: { lg: "4rem", sm: 0 } }}
-        >
-          {userHubVideoListMocks.map((video) => {
-            let withVideoInfo = true;
-            let maxWidth = "800px";
-            return (
-              <Grid
-                item
-                lg={4}
-                md={6}
-                xs={12}
-                key={video.id}
-                sx={{
-                  padding: { lg: "1rem", md: "1rem", sm: 0 },
-                  paddingBottom: { sm: "2rem", xs: "1rem" },
-                }}
-              >
-                <UserVideo
-                  video={video}
-                  maxWidth={maxWidth}
-                  withVideoInfo={withVideoInfo}
-                />
-              </Grid>
-            );
-          })}
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-};
+    let title =
+    {
+        mainTitle: "Welcome to VideoHub",
+        subtitle: "Your Ultimate Destination for Awesome Content Experiences!"
+    }
+    let fontSize =
+    {
+        titleFontSize: "50pt",
+        subtitleFontSize: "24pt"
+    }
+
+    return (
+
+        <Grid container direction="column" justifyContent="center" alignItems="center">
+            <Grid item lg={12} sx={{ mt: { xs: "2rem", lg: "2rem" }, mb: "1rem" }} >
+                <PageTitleComponent title={title} fontSize={fontSize} />
+            </Grid>
+            <Grid item>
+                <AddArtButton />
+            </Grid>
+            <Grid item sx={{ width: "90%", marginTop: "2rem", marginBottom: "2rem" }}>
+                <Grid container justifyContent="center" sx={{ marginBottom: { lg: "4rem", sm: 0 } }}>
+                    {userHubVideoListMocks.map((video) => {
+                        let withVideoInfo = true;
+                        let maxWidth = "800px";
+                        return (
+                            <Grid item lg={4} md={6} xs={12} key={video.id} sx={{ padding: { lg: "1rem", md: "1rem", sm: 0 }, paddingBottom: { sm: "2rem", xs: "1rem" } }}>
+                                <UserVideo video={video} maxWidth={maxWidth} withVideoInfo={withVideoInfo} />
+                            </Grid>
+                        )
+                    })}
+                </Grid>
+
+            </Grid>
+        </Grid >
+    )
+}
 
-export default DummyHomePage;
+export default DummyHomePage