Post request to add minified alias
This commit is contained in:
parent
1bf4842d25
commit
e596dff232
|
@ -1,4 +1,5 @@
|
|||
const express = require('express')
|
||||
const cors = require('cors');
|
||||
const http = require('http')
|
||||
const { urlencoded, json } = require('body-parser')
|
||||
const session = require('express-session')
|
||||
|
@ -9,6 +10,7 @@ require('dotenv').config()
|
|||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
app.use(cors());
|
||||
app.use(json())
|
||||
app.use(
|
||||
urlencoded({
|
||||
|
|
|
@ -3,55 +3,80 @@ import React from 'react';
|
|||
import { render } from 'react-dom';
|
||||
import HomeSectionStyle from "./HomeSection.style";
|
||||
import Link from 'next/link';
|
||||
import { nanoid } from 'nanoid';
|
||||
|
||||
|
||||
const head={
|
||||
fontSize:'5rem',
|
||||
fontWeight:'bold',
|
||||
marginBottom:'30px'
|
||||
const head = {
|
||||
fontSize: '5rem',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '30px'
|
||||
};
|
||||
const box={
|
||||
fontSize:'1.5em',
|
||||
borderRadius:'50px',
|
||||
padding:'1em',
|
||||
const box = {
|
||||
fontSize: '1.5em',
|
||||
borderRadius: '50px',
|
||||
padding: '1em',
|
||||
width: '500px',
|
||||
height:'50px'
|
||||
height: '50px'
|
||||
};
|
||||
const btn={
|
||||
fontWeight:'bold',
|
||||
position:'absolute',
|
||||
const btn = {
|
||||
fontWeight: 'bold',
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
right: '0px',
|
||||
marginRight:'5px',
|
||||
marginTop:'4.5px',
|
||||
marginBottom:'3px',
|
||||
marginRight: '5px',
|
||||
marginTop: '4.5px',
|
||||
marginBottom: '3px',
|
||||
height: '40px',
|
||||
width: '100px',
|
||||
width: '100px',
|
||||
borderRadius: '50px'
|
||||
|
||||
};
|
||||
const searchBox={
|
||||
const searchBox = {
|
||||
position: 'relative',
|
||||
|
||||
|
||||
};
|
||||
function HomeSection(props) {
|
||||
|
||||
|
||||
|
||||
const setMinfy = async () => {
|
||||
const res = await fetch('localhost:5000/minify/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
|
||||
},
|
||||
body: JSON.stringify({
|
||||
alias: nanoid(),
|
||||
longUrl: props.longUrl
|
||||
}),
|
||||
});
|
||||
|
||||
if (res===null) {
|
||||
console.log("error");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
props.setShortUrl(data.minifiedUrl);
|
||||
navigator.clipboard.writeText(props.shortUrl);
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 style={head} className="title">
|
||||
URL MINIFY
|
||||
</h1>
|
||||
|
||||
<div style={searchBox}>
|
||||
<input style={box}placeholder="Enter the url to be minified......"/>
|
||||
<button style={btn} id="minify">MINIFY</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Need more advanced features? | <Link href="/signup">Create an account</Link></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={searchBox}>
|
||||
<input style={box} placeholder="Enter the url to be minified......" value={props.longUrl} onChange={(e) => { props.setLongUrl(e.target.value) }} />
|
||||
<button style={btn} id="minify" onClick={setMinfy}>MINIFY</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Need more advanced features? | <Link href="/signup">Create an account</Link></h3>
|
||||
</div>
|
||||
</div>
|
||||
</HomeSectionStyle>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
"@mui/icons-material": "^5.3.1",
|
||||
"@mui/material": "^5.4.0",
|
||||
"@mui/styled-engine-sc": "^5.3.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
|
|
|
@ -7,7 +7,7 @@ import Features from 'components/Features'
|
|||
|
||||
export default function Home() {
|
||||
const [shortUrl, setShortUrl] = useState(null)
|
||||
const [longURL, setLongURL] = useState('')
|
||||
const [longUrl, setLongUrl] = useState('')
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
|
@ -17,7 +17,7 @@ export default function Home() {
|
|||
|
||||
<main className={"main-bg"}>
|
||||
<NavBar />
|
||||
<HomeSection />
|
||||
<HomeSection shortUrl={shortUrl} setShortUrl={setShortUrl} longUrl={longUrl} setLongUrl={setLongUrl}/>
|
||||
<Features/>
|
||||
</main>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue