From e5bbf475a83260776d10c9af8eefb64e69d9e533 Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 15:10:48 +0100 Subject: [PATCH 1/6] connect front into back --- tiny-url/src/html-request.js | 53 +++++++++++++++++++ .../pages/main-panel/components/form/Form.css | 13 ++++- .../pages/main-panel/components/form/Form.js | 22 ++++++-- 3 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 tiny-url/src/html-request.js diff --git a/tiny-url/src/html-request.js b/tiny-url/src/html-request.js new file mode 100644 index 0000000..d0fd47b --- /dev/null +++ b/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("start post") + 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 (originalUrl,setTinyUrlObj) => { + console.log("start post") + 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: originalUrl, + }) + }); + const responseJson = await response.json(); + console.log(responseJson,"responseJson"); + setTinyUrlObj(responseJson) + }catch (err){ + console.log(err) + } +} diff --git a/tiny-url/src/pages/main-panel/components/form/Form.css b/tiny-url/src/pages/main-panel/components/form/Form.css index 8c50af5..235cac8 100644 --- a/tiny-url/src/pages/main-panel/components/form/Form.css +++ b/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{ @@ -32,3 +31,13 @@ padding: 20px; } +.tiny-url-container{ + padding: 20px; +display: flex; + flex-direction: column; + gap: 10px; + /*background-color: lightgreen;*/ + border: solid 1px black; + border-radius: 4px; + color: cornflowerblue; +} diff --git a/tiny-url/src/pages/main-panel/components/form/Form.js b/tiny-url/src/pages/main-panel/components/form/Form.js index bf1b9db..237d681 100644 --- a/tiny-url/src/pages/main-panel/components/form/Form.js +++ b/tiny-url/src/pages/main-panel/components/form/Form.js @@ -1,18 +1,24 @@ import './Form.css' import {useState} from "react"; -export const Form=()=>{ +import {getTinyUrl, postCreateTinyUrl} from "../../../../html-request"; + +export const Form = () => { const [name, setName] = useState(""); + const [tinyUrlObj, setTinyUrlObj] = useState({tinyUrl:'',srcUrl:"",creationDate:""}); const handleSubmit = (event) => { event.preventDefault(); - alert(`The name you entered was: ${name}`); + postCreateTinyUrl(name, setTinyUrlObj).then() } + const postFunc = () => { + getTinyUrl().then() + } return
Enter a long URL to make a TinyUrl
- + { />
- +
+ + {tinyUrlObj.tinyUrl.length>0 &&
+ + + Tiny Url : {tinyUrlObj.tinyUrl} + Original Url : {tinyUrlObj.srcUrl} + Creation Time : {tinyUrlObj.creationDate} +
}
} From 427da2dcfcf48f9dc303300b2c7835b31af39bf1 Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 15:11:24 +0100 Subject: [PATCH 2/6] connect front into back --- back-end/server.py | 66 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 back-end/server.py diff --git a/back-end/server.py b/back-end/server.py new file mode 100644 index 0000000..69a0296 --- /dev/null +++ b/back-end/server.py @@ -0,0 +1,66 @@ +import json +from http.server import HTTPServer, BaseHTTPRequestHandler + +from datetime import date + +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("srcUrl"), "srcUrl": body.get("srcUrl"), + "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() From 60cddedab58cff2c1b206231028b335beb347632 Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 15:53:53 +0100 Subject: [PATCH 3/6] connect front into back --- tiny-url/src/html-request.js | 8 ++--- tiny-url/src/pages/main-panel/MainPanel.css | 7 ++++ tiny-url/src/pages/main-panel/MainPanel.js | 9 ++++- .../pages/main-panel/components/form/Form.css | 13 ++++--- .../pages/main-panel/components/form/Form.js | 35 ++++++++++--------- .../main-panel/components/header/Header.css | 4 ++- .../main-panel/components/header/Header.js | 4 ++- 7 files changed, 53 insertions(+), 27 deletions(-) diff --git a/tiny-url/src/html-request.js b/tiny-url/src/html-request.js index d0fd47b..2706922 100644 --- a/tiny-url/src/html-request.js +++ b/tiny-url/src/html-request.js @@ -10,7 +10,7 @@ export const getTinyUrl = async () => { } } export const postCreateTinyUrl = async (originalUrl,setTinyUrlObj) => { - console.log("start post") + console.log("postCreateTinyUrl") try { const url = `http://localhost:8000/create-tiny-url`; const response = await fetch(url, { @@ -30,8 +30,8 @@ export const postCreateTinyUrl = async (originalUrl,setTinyUrlObj) => { console.log(err) } } -export const postRedirectBySendTinyUrl = async (originalUrl,setTinyUrlObj) => { - console.log("start post") +export const postRedirectBySendTinyUrl = async (tinyUrl,setTinyUrlObj) => { + console.log("postRedirectBySendTinyUrl") try { const url = `http://localhost:8000/get-original-url`; const response = await fetch(url, { @@ -41,7 +41,7 @@ export const postRedirectBySendTinyUrl = async (originalUrl,setTinyUrlObj) => { 'Content-Type': 'application/json', }, body: JSON.stringify({ - tinyUrl: originalUrl, + tinyUrl: tinyUrl, }) }); const responseJson = await response.json(); diff --git a/tiny-url/src/pages/main-panel/MainPanel.css b/tiny-url/src/pages/main-panel/MainPanel.css index ab7c090..eac4bfb 100644 --- a/tiny-url/src/pages/main-panel/MainPanel.css +++ b/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; } diff --git a/tiny-url/src/pages/main-panel/MainPanel.js b/tiny-url/src/pages/main-panel/MainPanel.js index 4fb9e39..410ebc6 100644 --- a/tiny-url/src/pages/main-panel/MainPanel.js +++ b/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
-
+
+ + +
} diff --git a/tiny-url/src/pages/main-panel/components/form/Form.css b/tiny-url/src/pages/main-panel/components/form/Form.css index 235cac8..ec96bfa 100644 --- a/tiny-url/src/pages/main-panel/components/form/Form.css +++ b/tiny-url/src/pages/main-panel/components/form/Form.css @@ -17,7 +17,8 @@ } .form-title-style{ width: auto; - background: white; + border-bottom: solid black 1px; + padding-block: 6px; } .form-input-style{ width: 300px; @@ -33,11 +34,15 @@ } .tiny-url-container{ padding: 20px; -display: flex; + display: flex; flex-direction: column; gap: 10px; - /*background-color: lightgreen;*/ - border: solid 1px black; + border: solid 1px cornflowerblue; border-radius: 4px; color: cornflowerblue; } +.answer-container{ + border-radius: 4px; + margin-top: 10px; + background: white; +} diff --git a/tiny-url/src/pages/main-panel/components/form/Form.js b/tiny-url/src/pages/main-panel/components/form/Form.js index 237d681..387686a 100644 --- a/tiny-url/src/pages/main-panel/components/form/Form.js +++ b/tiny-url/src/pages/main-panel/components/form/Form.js @@ -1,24 +1,25 @@ import './Form.css' import {useState} from "react"; -import {getTinyUrl, postCreateTinyUrl} from "../../../../html-request"; -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(); - postCreateTinyUrl(name, setTinyUrlObj).then() + func(name, setTinyUrlObj).then() } - const postFunc = () => { - getTinyUrl().then() - } - return
- Enter a long URL to make a TinyUrl + // const postFunc = () => { + // getTinyUrl().then() + // } + return
+ +
+ {title}
- + { />
- + - + {/**/} +
+
{tinyUrlObj.tinyUrl.length>0 &&
- - - Tiny Url : {tinyUrlObj.tinyUrl} - Original Url : {tinyUrlObj.srcUrl} - Creation Time : {tinyUrlObj.creationDate} + Tiny Url : {tinyUrlObj.tinyUrl} + Original Url : {tinyUrlObj.srcUrl} + Creation Time : {tinyUrlObj.creationDate}
} +
+
} diff --git a/tiny-url/src/pages/main-panel/components/header/Header.css b/tiny-url/src/pages/main-panel/components/header/Header.css index d47ae81..37246b5 100644 --- a/tiny-url/src/pages/main-panel/components/header/Header.css +++ b/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; diff --git a/tiny-url/src/pages/main-panel/components/header/Header.js b/tiny-url/src/pages/main-panel/components/header/Header.js index e09bb3e..76d4fad 100644 --- a/tiny-url/src/pages/main-panel/components/header/Header.js +++ b/tiny-url/src/pages/main-panel/components/header/Header.js @@ -1,5 +1,7 @@ import './Header.css' export const Header=()=>{ return
-
Tiny Url
+
Tiny Url
+ By Omri Kellner & Lior Sabri +
} From 55304c85581d5ae25314ae62a5d1d3a62bc3a0b1 Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 15:54:40 +0100 Subject: [PATCH 4/6] connect front into back --- tiny-url/src/pages/main-panel/MainPanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tiny-url/src/pages/main-panel/MainPanel.js b/tiny-url/src/pages/main-panel/MainPanel.js index 410ebc6..ca91cb8 100644 --- a/tiny-url/src/pages/main-panel/MainPanel.js +++ b/tiny-url/src/pages/main-panel/MainPanel.js @@ -8,7 +8,7 @@ export const MainPanel = () => {
+ buttonLabel={"Make Tiny URL! (post request)"} func={postCreateTinyUrl}/>
From 5417b05478ea7b1b3f6f8e48beeef061b6725029 Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 19:34:33 +0100 Subject: [PATCH 5/6] connect front into back --- back-end/server.py | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/back-end/server.py b/back-end/server.py index 69a0296..5d0b104 100644 --- a/back-end/server.py +++ b/back-end/server.py @@ -1,11 +1,16 @@ import json from http.server import HTTPServer, BaseHTTPRequestHandler - from datetime import date +# from pymongo import MongoClient -today = date.today().strftime("%m/%d/%Y") +# client = MongoClient("mongodb+srv://omrikellner6:omri12345678@cluster0.zd9lug5.mongodb.net/test") +# 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) @@ -53,7 +58,7 @@ def do_POST(self): 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"), + 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')) From f47aeb13dd80df969cea45c34254c52508875c1e Mon Sep 17 00:00:00 2001 From: OmriKellnerMoveo Date: Wed, 5 Oct 2022 19:40:35 +0100 Subject: [PATCH 6/6] connect front into back --- back-end/server.py | 1 - 1 file changed, 1 deletion(-) diff --git a/back-end/server.py b/back-end/server.py index 5d0b104..4fb71e6 100644 --- a/back-end/server.py +++ b/back-end/server.py @@ -5,7 +5,6 @@ -# client = MongoClient("mongodb+srv://omrikellner6:omri12345678@cluster0.zd9lug5.mongodb.net/test") # mydatabase = client.TinyURLProject # mycollection = mydatabase["URL"] # print(client)