added table of all url

src/direct.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { useParams } from "react-router-dom";
+import { Redirect, useParams } from "react-router-dom";
 import axios from "axios";
 
 const Direct = () => {
@@ -12,15 +12,24 @@ const Direct = () => {
       withCredentials: true,
     };
     const res = await axios(options);
-    console.log(res.data);
+    console.log(res);
     return res.data.data.url.fullUrl;
   };
 
   React.useEffect(() => {
-    getURL();
-    getURL().then((res) => (window.location.href = res));
+    getURL().then((res) =>
+      window.open(
+        res,
+        "_blank"
+      )
+    );
   }, [shortenedURL]);
-  return <div>Please wait we are redirecting</div>;
+
+  return (
+    <>
+      <Redirect to="/home"></Redirect>
+    </>
+  );
 };
 
 export default Direct;

src/index.module.css

@@ -3,8 +3,24 @@ body {
   background-image: linear-gradient(to right, #1c87c9, #8ebf42);
   font-family: "IBM Plex Sans KR", sans-serif;
   font-weight: bold;
-  color:rgb(36, 100, 36);
+  color: rgb(36, 100, 36);
   font-size: large;
 }
 
+*::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 7px;
+}
+
+*::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background: rgb(90, 145, 85);
+  border-radius: 10px;
+}
 
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background: rgb(46, 138, 23);
+  border-radius: 10px;
+}

src/pages/Home.js

@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import classes from "./Home.module.css";
 import AuthContext from "../context/auth-context";
 import axios from "axios";
+import Table from "./Table";
 
 const Home = (props) => {
   const ctx = React.useContext(AuthContext);
@@ -14,7 +15,6 @@ const Home = (props) => {
       withCredentials: true,
     };
     const res = await axios(options);
-    console.log(res.data);
     if (res.data.status === "success") {
       props.logStateHandler(false);
     }
@@ -44,9 +44,13 @@ const Home = (props) => {
             Create a short Url
           </NavLink>
         )}
-        <p className={classes.middle}>
-          Please login to the website to create your link
-        </p>
+        {!ctx.isLoggedIn ? (
+          <p className={classes.middle}>
+            Please login to the website to create your link
+          </p>
+        ) : (
+          <Table />
+        )}
       </div>
     </div>
   );

src/pages/Table.js

@@ -0,0 +1,52 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
+import styles from "./Table.module.css";
+import axios from "axios";
+import { NavLink } from "react-router-dom";
+
+const Table = () => {
+  const [data, setData] = useState([]);
+  useEffect(async () => {
+    const options = {
+      url: "https://urlshortdev.herokuapp.com/api/v2/shorturl/userurl",
+      method: "GET",
+      withCredentials: true,
+    };
+    const response = await axios(options);
+    setData(response.data.data.url);
+  }, []);
+  console.log(data);
+  return (
+    <>
+      {!data && <h3>Currently you dont have any shortUrl</h3>}
+      {data && (
+        <div style={{ overflow: "auto" }}>
+          <table>
+            <caption>ALL YOURS SHORT URLS</caption>
+            <tr>
+              <th>FULL URL</th>
+              <th>SHORT URL</th>
+              <th>CLICKS</th>
+            </tr>{" "}
+            {data.map((item, ind) => {
+              return (
+                <tr key={ind}>
+                  <td>{item.fullUrl}</td>
+                  <td>
+                    {" "}
+                    <NavLink to={`${item.shortUrl}`}>
+                      {`http://localhost:3000/${item.shortUrl}`}
+                    </NavLink>
+                  </td>
+                  <td>{item.clicks}</td>
+                </tr>
+              );
+            })}
+          </table>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Table;

src/pages/Table.module.css

@@ -0,0 +1,25 @@
+caption {
+  font-size: 2em;
+  padding: 10px;
+  background-color: #3f9257;
+  color: rgb(102, 30, 30);
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 60%;
+  border: 1px solid #ddd;
+}
+
+th,
+td {
+  text-align: center;
+  padding: 8px;
+  overflow-wrap: break-word;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}