Merge pull request #65 from chirag3003/feature/show_url

Feature/show url

.pnpm-debug.log

@@ -0,0 +1,14 @@
+{
+  "0 debug pnpm:scope": {
+    "selected": 1
+  },
+  "1 error pnpm": {
+    "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
+    "err": {
+      "name": "pnpm",
+      "message": "No package.json (or package.yaml, or package.json5) was found in \"/home/chirag/Desktop/jwoc/url-minify\".",
+      "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
+      "stack": "pnpm: No package.json (or package.yaml, or package.json5) was found in \"/home/chirag/Desktop/jwoc/url-minify\".\n    at readProjectManifest (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:19808:13)\n    at async Object.readProjectManifestOnly (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:19812:28)\n    at async readProjectManifestOnly (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:43691:24)\n    at async Object.handler (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:177805:24)\n    at async /usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182068:21\n    at async run (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182042:34)\n    at async runPnpm (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182261:5)\n    at async /usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182253:7"
+    }
+  }
+}

frontend/.env

@@ -1,2 +1,2 @@
 NODE_ENV=dev
-NEXT_PUBLIC_API_URL=http://localhost:5000
+NEXT_PUBLIC_API_URL=http://localhost:5000

frontend/components/HomeSection/HomeSection.style.js

@@ -4,6 +4,7 @@ export default styled.section`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   .content {
     display: flex;
     justify-content: center;

frontend/components/HomeSection/homeSection.jsx

@@ -1,11 +1,15 @@
-import React from "react";
+import React, {useState} from "react";
 import HomeSectionStyle from "./HomeSection.style";
 import Link from "next/link";
 import Axios from "helpers/Axios";
+import {Alert, Button, Collapse, IconButton} from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 const head = {
-  fontSize: "5rem",
+  fontSize: "5.5rem",
   fontWeight: "bold",
+  color:"white",
   marginBottom: "30px",
 };
 const box = {
@@ -14,6 +18,9 @@ const box = {
   padding: "1em",
   width: "500px",
   height: "50px",
+  outline:"none !important",
+  border:"none !important",
+  marginBottom:"15px"
 };
 const btn = {
   fontWeight: "bold",
@@ -31,7 +38,12 @@ const searchBox = {
   position: "relative",
 };
 function HomeSection(props) {
+  const [disabled,setDisabled] = useState(false)
+  const [open, setOpen] = React.useState(false);
+
   const setMinfy = async () => {
+    setOpen(false)
+    setDisabled(true);
     let res;
     try {
       res = await Axios.post(`/minify/add`, {
@@ -44,7 +56,9 @@ function HomeSection(props) {
 
     const data = await res.data;
     props.setShortUrl(data.minifiedUrl);
-    navigator.clipboard.writeText(props.shortUrl);
+    await navigator.clipboard.writeText(data.minifiedUrl);
+    setOpen(true)
+    setDisabled(false)
   };
 
   return (
@@ -63,17 +77,36 @@ function HomeSection(props) {
               props.setLongUrl(e.target.value);
             }}
           />
-          <button style={btn} id="minify" onClick={setMinfy}>
+          <Button variant={"contained"} disabled={disabled} style={btn} id="minify" onClick={setMinfy}>
             MINIFY
-          </button>
+          </Button>
         </div>
-        <div>
+        <div style={{marginBottom:"40px",color:"#fff"}}>
           <h3>
             Need more advanced features? |{" "}
-            <Link href="/signup">Create an account</Link>
+            <Link href="/signup"><span style={{textDecoration:"underline"}}>Create an account</span></Link>
           </h3>
         </div>
       </div>
+      <Collapse in={open}>
+        <Alert
+            action={
+              <IconButton
+                  aria-label="close"
+                  color="inherit"
+                  size="small"
+                  onClick={() => {
+                    setOpen(false);
+                  }}
+              >
+                <CloseIcon fontSize="inherit" />
+              </IconButton>
+            }
+            sx={{ mb: 2 }}
+        >
+          Your Shortened URL: {props.shortUrl} <IconButton onClick={() => navigator.clipboard.writeText(props.shortUrl)} style={{marginLeft:"15px",padding:0}}><ContentCopyIcon /></IconButton>
+        </Alert>
+      </Collapse>
     </HomeSectionStyle>
   );
 }

frontend/pages/dashboard/index.js

@@ -3,7 +3,7 @@ import Head from "next/head";
 import NavBar from "../../components/NavBar";
 import Dashboard from "components/Dashboard/Dashboard"
 
-function Index(props) {
+function Index() {
     return (
         <div className={""}>
             <Head>

frontend/pages/index.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import Head from "next/head";
 import HomeSection from "components/HomeSection/homeSection";
 import NavBar from "components/NavBar";