joekgilberto · joekgilberto · Nov 22, 2023 · Nov 30, 2023 · Dec 4, 2023 · Dec 5, 2023
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/client/src/components/Auth/Login.jsx b/client/src/components/Auth/Login.jsx
@@ -0,0 +1,10 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  return <button onClick={() => loginWithRedirect()}>Log In</button>;
+};
+
+export default LoginButton;
diff --git a/client/src/components/Auth/Logout.jsx b/client/src/components/Auth/Logout.jsx
@@ -0,0 +1,14 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  return (
+    <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
+      Log Out
+    </button>
+  );
+};
+
+export default LogoutButton;
diff --git a/client/src/components/Auth/Profile.jsx b/client/src/components/Auth/Profile.jsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const Profile = () => {
+  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
+  const [userMetadata, setUserMetadata] = useState(null);
+
+  useEffect(() => {
+    console.log("test",user)
+    const getUserMetadata = async () => {
+      const domain = "dev-izyyi8s1l0oh6rko.us.auth0.com";
+
+      try {
+        const accessToken = await getAccessTokenSilently({
+          authorizationParams: {
+            audience: `https://${domain}/api/v2/`,
+            scope: "read:current_user",
+          },
+        });
+
+        const userDetailsByIdUrl = `https://${domain}/api/v2/users/${user.sub}`;
+
+        const metadataResponse = await fetch(userDetailsByIdUrl, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+
+        const { user_metadata } = await metadataResponse.json();
+
+        setUserMetadata(user_metadata);
+        console.log(user_metadata)
+        console.log(user)
+      } catch (e) {
+        console.log(e.message);
+      }
+    };
+
+    getUserMetadata();
+  }, [getAccessTokenSilently, user?.sub]);
+
+  return (
+    isAuthenticated && (
+      <div>
+        <img src={user.picture} alt={user.name} />
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+        <h3>User Metadata</h3>
+        {userMetadata ? (
+          <pre>{JSON.stringify(userMetadata, null, 2)}</pre>
+        ) : (
+          "No user metadata defined"
+        )}
+      </div>
+    )
+  );
+};
+
+export default Profile;
diff --git a/client/src/components/Destroy/Destroy.jsx b/client/src/components/Destroy/Destroy.jsx
@@ -2,18 +2,41 @@ import './Destroy.css';
 
 import { useNavigate, useParams } from 'react-router-dom';
 import * as bluRayServices from '../../utilities/blu-rays/blu-services';
+import { useAuth0 } from "@auth0/auth0-react";
+import { useEffect, useState } from 'react';
 
 export default function Destroy({setConfirm}) {
 
     const navigate = useNavigate()
     const { id } = useParams();
-    console.log("ID",id)
+    const { user, getAccessTokenSilently } = useAuth0();
+    const [bluRay, setBluRay] = useState(null);
 
-    async function handleDelete(){
-        await bluRayServices.destroyBluRay(id).then(()=>{
-            setConfirm(false)
-            navigate("/blu-rays")
+    useEffect(()=>{
+        handleRequest()
+        console.log(bluRay)
+    },[user])
+
+    async function handleRequest(){
+        const owner = user.sub;
+        const accessToken = await getAccessTokenSilently();
+        await bluRayServices.getBluRay(accessToken,owner,id).then((res) => {
+            res ? setBluRay(res) : navigate("/blu-rays");
         })
+            .catch((err) => {
+                console.log(err)
+                navigate("/blu-rays")
+            })
+    }
+
+    async function handleDelete(){
+        if(user && bluRay.owner === user.sub){
+            const accessToken = await getAccessTokenSilently();
+            await bluRayServices.destroyBluRay(accessToken,user.sub,id).then(()=>{
+                setConfirm(false)
+                navigate("/blu-rays")
+            })
+        }
     }
 
     function handleClick(){

diff --git a/client/src/components/Edit/Edit.jsx b/client/src/components/Edit/Edit.jsx
@@ -4,14 +4,15 @@ import { useState, useEffect, useContext } from 'react';
 import { useNavigate, useParams } from "react-router";
 import { PageContext } from '../../data';
 import * as bluRayServices from '../../utilities/blu-rays/blu-services';
+import { useAuth0 } from "@auth0/auth0-react";
 
 import Loading from '../Loading/Loading';
 
 export default function Edit({ bluRay, setEdit, handleRequest }) {
 
-    const navigate = useNavigate()
     const { setPage } = useContext(PageContext);
     const [formData, setFormData] = useState(null);
+    const { user, getAccessTokenSilently } = useAuth0();
 
     useEffect(() => {
         setFormData(bluRay)
@@ -20,7 +21,7 @@ export default function Edit({ bluRay, setEdit, handleRequest }) {
     function handleChange(e) {
         let updatedData;
 
-        if (e.target.name === "steelbook" || e.target.name === "fourK") {
+        if (e.target.name === "steelbook" || e.target.name === "definition") {
             updatedData = { ...formData, [e.target.name]: !formData[e.target.name] }
         } else {
             updatedData = { ...formData, [e.target.name]: e.target.value }
@@ -32,10 +33,15 @@ export default function Edit({ bluRay, setEdit, handleRequest }) {
     async function handleSubmit(e) {
         e.preventDefault()
 
-        bluRayServices.updateBluRay(bluRay.id, formData).then(() => {
-            handleRequest()
-            setEdit(false)
-        })
+        if (user && formData.owner === user.sub) {
+            const accessToken = await getAccessTokenSilently();
+
+            await bluRayServices.updateBluRay(accessToken, user.sub, bluRay.id, formData).then(() => {
+                handleRequest()
+                setEdit(false)
+
+            })
+        }
     }
 
     useEffect(() => {
@@ -55,11 +61,12 @@ export default function Edit({ bluRay, setEdit, handleRequest }) {
                             <span className="checkmark"></span>
                         </div>
                     </label>
-                    <label className='check'>4K
-                        <div className='container'>
-                            <input className='checkbox' type='checkbox' name="fourK" onChange={handleChange} defaultChecked={formData.fourK} />
-                            <span className="checkmark"></span>
-                        </div>
+                    <label>Definition
+                        <select name="definition" onChange={handleChange}>
+                            <option>Blu-Ray</option>
+                            <option>4K</option>
+                            <option>DVD</option>
+                        </select>
                     </label>
                     <label>Format
                         <select name="format" onChange={handleChange} value={formData.format}>

diff --git a/client/src/components/Nav/Nav.jsx b/client/src/components/Nav/Nav.jsx
@@ -1,31 +1,53 @@
 import './Nav.css';
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { PageContext } from '../../data';
 
+import { useAuth0 } from "@auth0/auth0-react";
+
 export default function Nav() {
 
   const { page } = useContext(PageContext);
+  const { user, isAuthenticated, loginWithRedirect, logout, isLoading } = useAuth0();
+
 
   return (
     <nav>
-      {page !== "home" ?
-        <a href='/'>
-          <p>HOME</p>
-        </a>
-        : null}
-
-      {page !== "new" ?
-        <a href='/new'>
-          <p>ADD BLU-RAY</p>
-        </a>
-        : null}
-
-      {page !== "index" ?
-        <a href='/blu-rays'>
-          <p>VIEW COLLECTION</p>
-        </a>
-        : null}
+      {user ?
+        <>
+          {page !== "home" ?
+            <a href='/'>
+              <p>HOME</p>
+            </a>
+            : null}
+
+          {page !== "new" ?
+            <a href='/new'>
+              <p>ADD BLU-RAY</p>
+            </a>
+            : null}
+
+          {page !== "index" ?
+            <a href='/blu-rays'>
+              <p>VIEW COLLECTION</p>
+            </a>
+            : null}
+            {isAuthenticated?
+            <a href='/'>
+              <p onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>LOGOUT</p>
+            </a>
+            : null}
+        </>
+        :
+        !isLoading ?
+          <a>
+            <p onClick={() => loginWithRedirect()}>LOGIN</p>
+          </a>
+          :
+          <a>
+            <p> </p>
+          </a>
+      }
     </nav>
   );
 }
diff --git a/client/src/index.js b/client/src/index.js
@@ -3,11 +3,22 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App/App';
 import { BrowserRouter as Router } from "react-router-dom";
+import { Auth0Provider } from '@auth0/auth0-react';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Router>
-  <App />
+    <Auth0Provider
+      domain="dev-izyyi8s1l0oh6rko.us.auth0.com"
+      clientId="8w4zj34LI82gUcgNclpDhDKQVttXTysg"
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+        audience: "http://localhost:3000/",
+        scope: "read:blu-rays"
+      }}
+    >
+      <App />
+    </Auth0Provider>
   </Router>
 );
diff --git a/client/src/pages/AllBluRays/AllBluRays.jsx b/client/src/pages/AllBluRays/AllBluRays.jsx
@@ -3,6 +3,7 @@ import './AllBluRays.css';
 import { useEffect, useState, useContext } from 'react';
 import { PageContext } from '../../data';
 import * as bluRayServices from '../../utilities/blu-rays/blu-services';
+import { useAuth0 } from "@auth0/auth0-react";
 
 import Loading from '../../components/Loading/Loading';
 
@@ -44,10 +45,13 @@ export default function AllBluRays() {
     const { setPage } = useContext(PageContext);
     const [format, setFormat] = useState(true)
     const [allBluRays, setAllBluRays] = useState(null);
+    const { user, getAccessTokenSilently } = useAuth0();
 
-    async function handleRefresh() {
 
-        await bluRayServices.getAllBluRays().then((res) => {
+    async function handleRequest() {
+        const owner = user.sub;
+        const accessToken = await getAccessTokenSilently();
+        await bluRayServices.getAllBluRays(accessToken, owner).then((res) => {
             setAllBluRays(res)
         })
             .catch((err) => console.log(err))
@@ -56,9 +60,14 @@ export default function AllBluRays() {
 
     useEffect(() => {
         setPage("index")
-        handleRefresh()
     }, [])
 
+    useEffect(()=>{
+        if(user){
+            handleRequest()
+        }
+    },[user])
+
     function handleClick() {
         setFormat(!format)
     }
@@ -76,7 +85,7 @@ export default function AllBluRays() {
                                             <a href={`/blu-rays/${bluRay.id}`} key={idx}>
                                                 <div className='media'>
                                                     <p className='italic'>{bluRay.title}</p>
-                                                    <p className='details'>{bluRay.fourK ? "4K" : null} {bluRay.steelbook ? "★" : null}</p>
+                                                    <p className='details'>{bluRay.definition == "4K" ? "4K" : bluRay.definition == "DVD" ? "DVD" : null} {bluRay.steelbook ? "★" : null}</p>
                                                 </div>
                                             </a>
                                             : null
@@ -91,7 +100,7 @@ export default function AllBluRays() {
                                             <a href={`/blu-rays/${bluRay.id}`} key={idx}>
                                                 <div className='media'>
                                                     <p className='italic'>{bluRay.title}</p>
-                                                    <p className='details'>{bluRay.fourK ? "4K" : null} {bluRay.steelbook ? "★" : null}</p>
+                                                    <p className='details'>{bluRay.definition == "4K" ? "4K" : bluRay.definition == "DVD" ? "DVD" : null} {bluRay.steelbook ? "★" : null}</p>
                                                 </div>
                                             </a>
                                             : null