Connect front into back

back-end/server.py

@@ -0,0 +1,70 @@
+import json
+from http.server import HTTPServer, BaseHTTPRequestHandler
+from datetime import date
+# from pymongo import MongoClient
+
+
+
+# mydatabase = client.TinyURLProject
+# mycollection = mydatabase["URL"]
+# print(client)
+today = date.today().strftime("%m/%d/%Y")
+
+class MyServer(BaseHTTPRequestHandler):
+    def do_GET(self):
+        self.send_response(200)
+        self.send_header('Content-type', 'application/json')
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.end_headers()
+
+        response = json.dumps({"name": "this is tiny url7"})
+        self.wfile.write(response.encode('utf-8'))
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.send_header('Content-type', 'application/json')
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
+        self.send_header("Access-Control-Allow-Headers", "x-api-key,Content-Type")
+        self.end_headers()
+
+    def do_POST(self):
+        print(self.path)
+        if (self.path == "/create-tiny-url"):
+            print("create-tiny-url get request!")
+            self.send_response(200)
+            self.send_header('Content-type', 'application/json')
+            self.send_header('Access-Control-Allow-Origin', '*')
+            self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
+            self.send_header("Access-Control-Allow-Headers", "x-api-key,Content-Type")
+            self.end_headers()
+
+            data_string = self.rfile.read(int(self.headers['Content-Length']))
+            print(data_string)
+            body = json.loads(data_string)
+            response = json.dumps({"tinyUrl": body.get("srcUrl"), "srcUrl": body.get("srcUrl"),
+                                   "creationDate": today})  # tinyurl: here need to call hash function for generate tinyUrl
+            self.wfile.write(response.encode('utf-8'))
+        if (self.path == "/get-original-url"):
+            print("get-original-url get request!")
+            self.send_response(200)
+            self.send_header('Content-type', 'application/json')
+            self.send_header('Access-Control-Allow-Origin', '*')
+            self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
+            self.send_header("Access-Control-Allow-Headers", "x-api-key,Content-Type")
+            self.end_headers()
+
+            data_string = self.rfile.read(int(self.headers['Content-Length']))
+            print(data_string)
+            body = json.loads(data_string)
+            response = json.dumps({"tinyUrl": body.get("tinyUrl"), "srcUrl": body.get("tinyUrl"),
+                                   "creationDate": today})  # tinyurl: here need to call hash function for generate tinyUrl
+            self.wfile.write(response.encode('utf-8'))
+
+def startServer(server_class=HTTPServer, handler_class=MyServer):
+    server_address = ('', 8000)
+    httpd = server_class(server_address, handler_class)
+    httpd.serve_forever(1.0)
+
+
+startServer()

tiny-url/src/html-request.js

@@ -0,0 +1,53 @@
+export const getTinyUrl = async () => {
+    try {
+        const url = `http://localhost:8000/tiny`;
+        const response = await fetch(url)
+        const responseJson = await response.json();
+        console.log(responseJson,"responseJson");
+        // setTinyUrlObj(responseJson["name"])
+    }catch (err){
+        console.log(err)
+    }
+}
+export const postCreateTinyUrl = async (originalUrl,setTinyUrlObj) => {
+    console.log("postCreateTinyUrl")
+    try {
+        const url = `http://localhost:8000/create-tiny-url`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                srcUrl: originalUrl,
+            })
+        });
+        const responseJson = await response.json();
+        console.log(responseJson,"responseJson");
+        setTinyUrlObj(responseJson)
+    }catch (err){
+        console.log(err)
+    }
+}
+export const postRedirectBySendTinyUrl = async (tinyUrl,setTinyUrlObj) => {
+    console.log("postRedirectBySendTinyUrl")
+    try {
+        const url = `http://localhost:8000/get-original-url`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                tinyUrl: tinyUrl,
+            })
+        });
+        const responseJson = await response.json();
+        console.log(responseJson,"responseJson");
+        setTinyUrlObj(responseJson)
+    }catch (err){
+        console.log(err)
+    }
+}

tiny-url/src/pages/main-panel/MainPanel.css

@@ -3,4 +3,11 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding-bottom: 30px;
+
+}
+.forms-wrapper{
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 }

tiny-url/src/pages/main-panel/MainPanel.js

@@ -1,9 +1,16 @@
 import {Header} from "./components/header/Header";
 import {Form} from "./components/form/Form";
 import './MainPanel.css'
+import {postCreateTinyUrl, postRedirectBySendTinyUrl} from "../../html-request";
+
 export const MainPanel = () => {
     return <div className="main-panel-container">
         <Header/>
-        <Form/>
+        <div className={"forms-wrapper"}>
+            <Form title="Enter a long URL to make a TinyUrl" inputLabel={"Enter Original URL: "}
+                  buttonLabel={"Make Tiny URL! (post request)"} func={postCreateTinyUrl}/>
+            <Form title="Enter a tiny URL to get the original url" inputLabel={"Enter Tiny URL: "}
+                  buttonLabel={"Get Original URL! (post request)"} func={postRedirectBySendTinyUrl}/>
+        </div>
     </div>
 }

tiny-url/src/pages/main-panel/components/form/Form.css

@@ -6,9 +6,8 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    height: 200px;
     text-align: center;
-    justify-content: center;
+    justify-content: start;
     padding: 10px;
 }
 .form-style{
@@ -18,7 +17,8 @@
 }
 .form-title-style{
     width: auto;
-    background: white;
+    border-bottom: solid black 1px;
+    padding-block: 6px;
 }
 .form-input-style{
     width: 300px;
@@ -32,3 +32,17 @@
 
     padding: 20px;
 }
+.tiny-url-container{
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border: solid 1px cornflowerblue;
+    border-radius: 4px;
+    color: cornflowerblue;
+}
+.answer-container{
+    border-radius: 4px;
+    margin-top: 10px;
+    background: white;
+}

tiny-url/src/pages/main-panel/components/form/Form.js

@@ -1,18 +1,25 @@
 import './Form.css'
 import {useState} from "react";
-export const Form=()=>{
+
+export const Form = ({title,inputLabel,buttonLabel,func}) => {
     const [name, setName] = useState("");
+    const [tinyUrlObj, setTinyUrlObj] = useState({tinyUrl:'',srcUrl:"",creationDate:""});
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        alert(`The name you entered was: ${name}`);
+        func(name, setTinyUrlObj).then()
     }
 
-    return <div className="form-container">
-        <span className="form-title-style">Enter a long URL to make a TinyUrl</span>
+    // const postFunc = () => {
+    //     getTinyUrl().then()
+    // }
+    return<div>
+
+   <div className="form-container">
+        <span className="form-title-style">{title}</span>
         <form className="form-style" onSubmit={handleSubmit}>
             <div>
-                <label>Enter Original Url:  </label>
+                <label>{inputLabel}</label>
                 <input
                     className="form-input-style"
                     type="text"
@@ -21,7 +28,17 @@ export const Form=()=>{
                 />
             </div>
 
-          <button type="submit" className="button-submit-form">Make TinyUrl!</button>
+            <button type="submit" className="button-submit-form">{buttonLabel}</button>
         </form>
+        {/*<button className="button-submit-form" onClick={() => postFunc()}>(get request)</button>*/}
+    </div>
+        <div className={"answer-container"}>
+        {tinyUrlObj.tinyUrl.length>0 && <div className="tiny-url-container">
+            <span>Tiny Url : {tinyUrlObj.tinyUrl}</span>
+            <span>Original Url : {tinyUrlObj.srcUrl}</span>
+            <span>Creation Time : {tinyUrlObj.creationDate}</span>
+        </div>}
+        </div>
+
     </div>
 }

tiny-url/src/pages/main-panel/components/header/Header.css

@@ -1,9 +1,11 @@
 .header-title-container{
     background-color: cornflowerblue;
     display: flex;
-    padding-block: 30px;
+    flex-direction: column;
+    padding-block: 20px;
     justify-content: center;
     width: 100%;
+    gap: 10px;
 }
 .header-title{
     color: white;

tiny-url/src/pages/main-panel/components/header/Header.js

@@ -1,5 +1,7 @@
 import './Header.css'
 export const Header=()=>{
     return <div className="header-title-container">
-        <div className="header-title">Tiny Url</div></div>
+        <div className="header-title">Tiny Url</div>
+    <span>By Omri Kellner & Lior Sabri</span>
+    </div>
 }