made all the server urls

faisal-kn · Dec 25, 2021 · 56bcb4b · 56bcb4b
1 parent 4dfb61e
commit 56bcb4b
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 40 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,15 +9,18 @@ import Direct from './direct';
 
 const App = () => {
   const [logState, setLogState] = React.useState(false);
+  const [id,setId]=React.useState("");
 
-  const logHandler = (state) => {
+  const logHandler = (state,id) => {
     setLogState(state);
+    setId(id);
   };
 
   return (
     <AuthContext.Provider
       value={{
         isLoggedIn: logState,
+        id,
       }}
     >
       <Switch>

diff --git a/src/UI/Button.module.css b/src/UI/Button.module.css
@@ -1,5 +1,5 @@
 .btn {
-  margin: 0px 50px;
+  margin: 15px 50px;
   text-decoration: none;
   border: 3px solid yellow;
   color: transparent;
@@ -9,6 +9,7 @@
   letter-spacing: 5px;
   transition: all 0.5s;
   position: relative;
+  cursor: pointer;
 }
 .btn:before {
   content: "Submit";

diff --git a/src/context/auth-context.js b/src/context/auth-context.js
@@ -2,6 +2,7 @@ import React from "react";
 
 const AuthContext = React.createContext({
   token: "",
+  id:"",
 });
 
 export default AuthContext;
diff --git a/src/direct.js b/src/direct.js
@@ -7,7 +7,7 @@ const Direct = () => {
 
   const getURL = async () => {
     const options = {
-      url: `http://127.0.0.1:3001/api/v2/shorturl/${shortenedURL}`,
+      url: `https://urlshortdev.herokuapp.com/api/v2/shorturl/${shortenedURL}`,
       method: "GET",
       withCredentials: true,
     };
@@ -20,7 +20,7 @@ const Direct = () => {
     getURL();
     getURL().then((res) => (window.location.href = res));
   }, [shortenedURL]);
-  return <div>Redirecting</div>;
+  return <div>Please wait we are redirecting</div>;
 };
 
 export default Direct;
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -9,7 +9,7 @@ const Home = (props) => {
 
   const logoutHandler = async () => {
     const options = {
-      url: "http://127.0.0.1:3001/api/v2/users/logout",
+      url: "https://urlshortdev.herokuapp.com/api/v2/users/logout",
       method: "GET",
       withCredentials: true,
     };

diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css
@@ -61,6 +61,7 @@ p {
   letter-spacing: 5px;
   transition: all 0.5s;
   position: relative;
+  cursor: pointer;
 }
 .btn:before {
   content: "Logout";

diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -20,7 +20,7 @@ const Login = (props) => {
   const submitHandler = async (e) => {
     e.preventDefault();
     const options = {
-      url: "http://127.0.0.1:3001/api/v2/users/login",
+      url: "https://urlshortdev.herokuapp.com/api/v2/users/login",
       method: "POST",
       withCredentials: true,
       data: {
@@ -29,9 +29,9 @@ const Login = (props) => {
       },
     };
     const res = await axios(options);
-    console.log(res.data);
+
     if (res.data.status === "success") {
-      props.logStateHandler(true);
+      props.logStateHandler(true, res.data.data.user._id);
       history.replace("/");
     }
   };

diff --git a/src/pages/Login.module.css b/src/pages/Login.module.css
@@ -5,7 +5,7 @@
   margin-top: 5rem;
   max-width: 500px;
   border: 5px ridge rgb(99, 99, 158);
-  transition: all 0.3s ease-in;
+  /* transition: all 0.3s ease-in; */
 }
 
 .form {
@@ -26,12 +26,12 @@
   border-color: rgb(230, 230, 70);
   text-align: center;
   font-weight: bold;
-  transition: all 0.3s ease-in;
+  /* transition: all 0.3s ease-in; */
   color: rgb(219, 123, 33);
 }
 
-.form input:hover {
+/* .form input:hover {
   background-color: rgb(122, 128, 214);
   margin-top: 1rem;
-}
+} */
 
diff --git a/src/pages/Signup.js b/src/pages/Signup.js
@@ -28,7 +28,7 @@ const Signup = (props) => {
   const submitHandler = async (e) => {
     e.preventDefault();
     const options = {
-      url: "http://127.0.0.1:3001/api/v2/users/signup",
+      url: "https://urlshortdev.herokuapp.com/api/v2/users/signup",
       method: "POST",
       withCredentials: true,
       data: {
@@ -39,8 +39,9 @@ const Signup = (props) => {
       },
     };
     const res = await axios(options);
+    console.log(res);
     if (res.data.status === "success") {
-      props.logStateHandler(true);
+      props.logStateHandler(true, res.data.data.newUser._id);
       history.replace("/");
     }
   };

diff --git a/src/pages/Signup.module.css b/src/pages/Signup.module.css
@@ -24,15 +24,11 @@
   margin-left: 12%;
   margin-top: 0;
   text-align: center;
-  transition: all 0.3s ease-in;
+  /* transition: all 0.3s ease-in; */
   font-weight: bold;
   color: rgb(214, 82, 20);
 }
 
-/* form input:hover {
-  background-color: rgb(122, 128, 214);
-  margin-top: 1rem;
-} */
 
 .link {
   text-decoration: none;

diff --git a/src/pages/UrlForm.js b/src/pages/UrlForm.js
@@ -1,15 +1,17 @@
-import React from "react";
+import { useContext, useState } from "react";
 import axios from "axios";
 import { NavLink } from "react-router-dom";
 
+import AuthContext from "../context/auth-context";
 import classes from "./UrlForm.module.css";
 import Button from "../UI/Button";
 
 const UrlForm = () => {
-  const [fullUrl, setFullUrl] = React.useState("");
-  const [shortUrl, setShortUrl] = React.useState("");
-  const [showLink, setShowLink] = React.useState(false);
+  const [fullUrl, setFullUrl] = useState("");
+  const [shortUrl, setShortUrl] = useState("");
+  const [showLink, setShowLink] = useState(false);
 
+  const ctx = useContext(AuthContext);
   const fullurlChangeHandler = (e) => {
     setFullUrl(e.target.value);
   };
@@ -21,11 +23,12 @@ const UrlForm = () => {
   const submitHandler = async (e) => {
     e.preventDefault();
     const options = {
-      url: "http://127.0.0.1:3001/api/v2/shorturl",
+      url: "https://urlshortdev.herokuapp.com/api/v2/shorturl",
       method: "POST",
       withCredentials: true,
       data: {
         fullUrl,
+        author: ctx.id,
       },
     };
     if (shortUrl.trim().length !== 0) options.data.shortUrl = shortUrl;
@@ -41,7 +44,9 @@ const UrlForm = () => {
   return (
     <div className={classes.container}>
       <form className={classes.form} onSubmit={submitHandler}>
-        <label htmlFor="full">Full Url</label>
+        <label htmlFor="full" className={classes.full}>
+          Full Url
+        </label>
         <input
           type="text"
           id="full"
@@ -57,15 +62,15 @@ const UrlForm = () => {
           value={shortUrl}
         />
         <Button type="submit" text="Submit"></Button>
+        {showLink && (
+          <div>
+            <p>Here is your short Url</p>
+            <NavLink to={`${shortUrl}`} className={classes.small}>
+              {`http://localhost:3000/${shortUrl}`}
+            </NavLink>
+          </div>
+        )}
       </form>
-      {showLink && (
-        <div>
-          <p>Here is your short Url</p>
-          <NavLink to={`${shortUrl}`} className={classes.small}>
-            {`http://localhost:3000/${shortUrl}`}
-          </NavLink>
-        </div>
-      )}
     </div>
   );
 };

diff --git a/src/pages/UrlForm.module.css b/src/pages/UrlForm.module.css
@@ -1,16 +1,23 @@
 .container {
   margin: auto;
   height: 70vh;
+  max-width: 70%;
   border: 5px ridge rgb(99, 99, 158);
   transition: all 0.3s ease-in;
 }
 
 .form {
   display: flex;
   flex-direction: column;
+  padding-left: 0.75rem;
   justify-content: flex-start;
 }
 
+.full {
+  padding-top: 0.5rem;
+  padding-bottom:0.5rem;
+}
+
 .form input {
   width: 70%;
   outline: none;
@@ -25,15 +32,9 @@
 }
 
 .form label {
-  padding: 1rem;
   padding-bottom: 0;
 }
 
-form input:hover {
-  background-color: rgb(122, 128, 214);
-  margin-top: 1rem;
-}
-
 .link {
   text-decoration: none;
   transition: all 0.3s ease-in;
@@ -42,4 +43,3 @@ form input:hover {
 .link:hover {
   text-decoration: underline;
 }
-