From ed657ba779cca4b591c07b38232a157b4e5fb65a Mon Sep 17 00:00:00 2001 From: Alex-Lee-Myers Date: Wed, 16 Feb 2022 19:50:00 -0500 Subject: [PATCH] able to delete after debug session. --- src/components/Login.tsx | 365 +++++++++++++++++------------------ src/components/Video.tsx | 138 +++++++------ src/helpers/Environments.tsx | 2 +- 3 files changed, 256 insertions(+), 249 deletions(-) diff --git a/src/components/Login.tsx b/src/components/Login.tsx index c7ba851..4210809 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -1,31 +1,31 @@ //import interfaces from App.tsx import { ABCtoken, ABCuserInfo, ABCcalls } from "../App"; -import dbCall from '../helpers/Environments'; -import { useNavigate, Link } from 'react-router-dom'; -import React from 'react'; +import dbCall from "../helpers/Environments"; +import { useNavigate, Link } from "react-router-dom"; +import React from "react"; // import loginSplash.jpg and allballcall-500.svg from src/images -import loginSplash from '../images/loginSplash.jpg'; -import allballcall_500 from '../images/allballcall-logo-500-black-text.svg'; +import loginSplash from "../images/loginSplash.jpg"; +import allballcall_500 from "../images/allballcall-logo-500-black-text.svg"; export interface AuthProps { - id: ABCuserInfo["id"]; - setId: ABCuserInfo["setId"]; - isAdmin: ABCuserInfo["isAdmin"]; - setIsAdmin: ABCuserInfo["setIsAdmin"]; - emailAddress: ABCuserInfo["emailAddress"]; - setEmailAddress: ABCuserInfo["setEmailAddress"]; - errorMessage: ABCcalls["errorMessage"]; - setErrorMessage: ABCcalls["setErrorMessage"]; - responseStatus: ABCcalls["responseStatus"]; - setResponseStatus: ABCcalls["setResponseStatus"]; - sessionToken: ABCtoken["sessionToken"]; - setSessionToken: ABCtoken["setSessionToken"]; - updateToken: ABCtoken["updateToken"]; - isUserLoggedIn: ABCtoken["isUserLoggedIn"]; - setIsUserLoggedIn: ABCtoken["setIsUserLoggedIn"]; - username: ABCuserInfo["username"]; - setUsername: ABCuserInfo["setUsername"]; -}; + id: ABCuserInfo["id"]; + setId: ABCuserInfo["setId"]; + isAdmin: ABCuserInfo["isAdmin"]; + setIsAdmin: ABCuserInfo["setIsAdmin"]; + emailAddress: ABCuserInfo["emailAddress"]; + setEmailAddress: ABCuserInfo["setEmailAddress"]; + errorMessage: ABCcalls["errorMessage"]; + setErrorMessage: ABCcalls["setErrorMessage"]; + responseStatus: ABCcalls["responseStatus"]; + setResponseStatus: ABCcalls["setResponseStatus"]; + sessionToken: ABCtoken["sessionToken"]; + setSessionToken: ABCtoken["setSessionToken"]; + updateToken: ABCtoken["updateToken"]; + isUserLoggedIn: ABCtoken["isUserLoggedIn"]; + setIsUserLoggedIn: ABCtoken["setIsUserLoggedIn"]; + username: ABCuserInfo["username"]; + setUsername: ABCuserInfo["setUsername"]; +} //TODO 0) Test endpoint. //TODO 1) Add verification prompts surrounding the fields. @@ -35,176 +35,161 @@ export interface AuthProps { //! Function version const Login = (props: AuthProps) => { - const navigate = useNavigate(); - const [passwordhash, setPasswordhash] = React.useState(""); - const [loginUsernameOrEmail, setLoginUsernameOrEmail] = React.useState(""); - - const loginChange = (event: React.ChangeEvent) => { - if (event.target.id === "passwordhash") { - setPasswordhash(event.target.value); - } else if (event.target.id === "username-or-email") { - setLoginUsernameOrEmail(event.target.value); - } else { - console.log("Login.tsx: loginChange(): unknown event target id: " + event.target.id); - } - } + const navigate = useNavigate(); + const [passwordhash, setPasswordhash] = React.useState(""); + const [loginUsernameOrEmail, setLoginUsernameOrEmail] = + React.useState(""); - const loginSubmit = async (event: React.FormEvent) => { - event.preventDefault(); - // postgresql database call - await fetch(`${dbCall}/users/login`, { - method: 'POST', - headers: new Headers({ - 'Content-Type': 'application/json' - }), - body: JSON.stringify({ user: { - username: loginUsernameOrEmail, - email: loginUsernameOrEmail, - passwordhash: passwordhash - }}) - }) - .then (response => response.json()) - .then (data => { - if (data.status === 200 && (data.isAdmin === false || data.isAdmin === null)) { - console.log("Successfully logged-in!"); - console.log("Login data: ", data); - props.setSessionToken(data.sessionToken); - props.updateToken(data.sessionToken); - props.setErrorMessage(''); - props.setIsUserLoggedIn(true); - props.setId(data.id); - props.setIsAdmin(data.isAdmin); - props.setUsername(data.username); - props.setEmailAddress(data.email); - navigate('/'); - } else if (data.status === 200 && data.isAdmin === true) { - console.log("Admin | Successfully logged-in!"); - console.log("Admin | Login data: ", data); - props.setSessionToken(data.sessionToken); - props.updateToken(data.sessionToken); - props.setErrorMessage(''); - props.setIsUserLoggedIn(true); - props.setId(data.id); - props.setIsAdmin(data.isAdmin); - props.setUsername(data.username); - props.setEmailAddress(data.emailAddress); - navigate("/register"); //TODO: change to admin page - } - else { - props.setErrorMessage(data.errorMessage); - } - }) - } + const loginChange = (event: React.ChangeEvent) => { + if (event.target.id === "passwordhash") { + setPasswordhash(event.target.value); + } else if (event.target.id === "username-or-email") { + setLoginUsernameOrEmail(event.target.value); + } else { + console.log( + "Login.tsx: loginChange(): unknown event target id: " + event.target.id + ); + } + }; - return ( -
-
-
-
- AllBallCall -

Sign in to your account.

-

- or{' '} - {/* register */} - Register to call your own shots. -

-
+ const loginSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + // postgresql database call + await fetch(`${dbCall}/users/login`, { + method: "POST", + headers: new Headers({ + "Content-Type": "application/json", + }), + body: JSON.stringify({ + user: { + username: loginUsernameOrEmail, + email: loginUsernameOrEmail, + passwordhash: passwordhash, + }, + }), + }) + .then((response) => response.json()) + .then((data) => { + if ( + data.status === 200 && + (data.isAdmin === false || data.isAdmin === null) + ) { + console.log("Successfully logged-in!"); + console.log("Login data: ", data); + props.setSessionToken(data.sessionToken); + props.updateToken(data.sessionToken); + props.setErrorMessage(""); + props.setIsUserLoggedIn(true); + props.setId(data.id); + props.setIsAdmin(data.isAdmin); + props.setUsername(data.username); + props.setEmailAddress(data.email); + navigate("/"); + } else if (data.status === 200 && data.isAdmin === true) { + console.log("Admin | Successfully logged-in!"); + console.log("Admin | Login data: ", data); + props.setSessionToken(data.sessionToken); + props.updateToken(data.sessionToken); + props.setErrorMessage(""); + props.setIsUserLoggedIn(true); + props.setId(data.id); + props.setIsAdmin(data.isAdmin); + props.setUsername(data.username); + props.setEmailAddress(data.emailAddress); + navigate("/register"); //TODO: change to admin page + } else { + props.setErrorMessage(data.errorMessage); + } + }); + }; -
-
- -
- -
-
- + return ( +
+
+
+
+ AllBallCall +

+ Sign in to your account. +

+

+ or {/* register */} + + Register to call your own shots. + +

+
-
- -
- -
-
-
- -
- -
-
-
- -
-
- ); -} +
+
+ +
+ +
+
-export default Login; -//! Navbar Top Links -//{this.state.navigation.map( -// (navigation: navigationProps) => ( -// -// {navigation.name} -// -// ) -// )} +
+ +
+ +
+
+
+ +
+
+
+
+
+ +
+
+ ); +}; -//! Navbar Profile Links -//{this.state.userNavigation.map( -// (userNavigation: userNavigationProps) => ( -// -// -// {userNavigation.pageName} -// -// -// ) -// )} \ No newline at end of file +export default Login; diff --git a/src/components/Video.tsx b/src/components/Video.tsx index 3d2a553..42186ac 100644 --- a/src/components/Video.tsx +++ b/src/components/Video.tsx @@ -1,6 +1,6 @@ import React, { Component, Fragment } from "react"; -import ReactPlayer from 'react-player'; -import { ABCvideo, ABCuserInfo, ABCtoken } from '../App'; +import ReactPlayer from "react-player"; +import { ABCvideo, ABCuserInfo, ABCtoken } from "../App"; import { StarIcon } from "@heroicons/react/solid"; import { Tab } from "@headlessui/react"; import { BrowserRouter as Route, Link, Navigate } from "react-router-dom"; @@ -15,14 +15,14 @@ import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; interface videoProps { - videoId: ABCvideo['videoId']; - videoTitle: ABCvideo['videoTitle']; - videoLink: ABCvideo['videoLink']; - username: ABCuserInfo['username']; - id: ABCuserInfo['id']; - isAdmin: ABCuserInfo['isAdmin']; - isUserLoggedIn: ABCtoken['isUserLoggedIn']; - sessionToken: ABCtoken['sessionToken']; + videoId: ABCvideo["videoId"]; + videoTitle: ABCvideo["videoTitle"]; + videoLink: ABCvideo["videoLink"]; + username: ABCuserInfo["username"]; + id: ABCuserInfo["id"]; + isAdmin: ABCuserInfo["isAdmin"]; + isUserLoggedIn: ABCtoken["isUserLoggedIn"]; + sessionToken: ABCtoken["sessionToken"]; } interface VideoState { @@ -37,8 +37,8 @@ interface VideoState { commentsArray: string[]; //? Return Conditionals isVideoOwner: boolean; - commentId: string; - deleteCommentId: string; + deleteCommentId: any; + editCommentId: string; editCommentText: string; isCommentOwner: boolean; isCommentEditModalOpen: boolean; @@ -74,8 +74,8 @@ export default class Video extends Component< commentsArray: [], //? Return Conditionals isVideoOwner: false, - commentId: "", deleteCommentId: "", + editCommentId: "", editCommentText: "", isCommentOwner: false, isCommentEditModalOpen: false, @@ -172,16 +172,20 @@ export default class Video extends Component< editCommentSubmit = async (e: React.MouseEvent) => { e.preventDefault(); - await fetch(`${dbCall}/comments/${this.props.videoId}/${this.state.VideoState.commentId}`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${this.props.sessionToken}`, - }, - body: JSON.stringify({ - commentText: this.state.VideoState.commentText, - }), - }) + + await fetch( + `${dbCall}/comments/${this.props.videoId}/${this.state.VideoState.editCommentId}`, + { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${this.props.sessionToken}`, + }, + body: JSON.stringify({ + commentText: this.state.VideoState.commentText, + }), + } + ) .then((response) => { if (response.status === 200) { return response.json(); @@ -205,6 +209,8 @@ export default class Video extends Component< }; deleteComment = async (commentId: string) => { + console.log(this.props.videoId); + await fetch(`${dbCall}/comments/${this.props.videoId}/${commentId}`, { method: "DELETE", headers: { @@ -213,7 +219,7 @@ export default class Video extends Component< }, }) .then((response) => { - if (response.status === 200) { + if (response.status === 201) { return response.json(); } else { throw new Error("Error deleting comment"); @@ -576,46 +582,62 @@ export default class Video extends Component< ) : ( -
    - {this.state.VideoState.commentsArray?.map((comment: any) => { - return ( -
  • -
    -
    - {comment.user.username} -
    -
    -
    - {comment.user.username} +
      + {this.state.VideoState.commentsArray?.map((comment: any) => { + { + console.log(comment.commentID); + } + + return ( +
    • +
      +
      + {comment.user.username}
      -
      - {comment.commentText} +
      +
      + {comment.user.username} +
      +
      + {comment.commentText} +
      + {/* If comment.user.id === this.props.id of the commentID, then show a button that opens a MUI modal of a text box with a submit button that onSubmit={this.editVideo} */} + {comment.user.id === this.props.id && ( +
      + + +
      + )}
      - {/* If comment.user.id === this.props.id of the commentID, then show a button that opens a MUI modal of a text box with a submit button that onSubmit={this.editVideo} */} - {comment.user.id === this.props.id && ( -
      - - -
      - )} -
      -
      • - ); - })} -
    +
    • + ); + })} +
)} ); } -} \ No newline at end of file +} diff --git a/src/helpers/Environments.tsx b/src/helpers/Environments.tsx index 4cc1432..5d7d157 100644 --- a/src/helpers/Environments.tsx +++ b/src/helpers/Environments.tsx @@ -1,6 +1,6 @@ let dbCall: string; // dbCall = 'https://allballcall-server.herokuapp.com'; -dbCall = "http://localhost:3306"; +dbCall = "http://localhost:5000"; export default dbCall; \ No newline at end of file