bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #117 from 404-Terror/updates 

Fixed QR Code Bug(#116)
This commit is contained in:
Lethal_Moana 2022-03-14 22:15:33 +05:30 committed by GitHub
parent feb847f6a6 ad2cb59524
commit 79fcb20d5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1212 additions and 1159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/components/HomeSection/HomeSection.jsx
View File

@ -9,8 +9,9 @@ import CloseIcon from '@mui/icons-material/Close'
import ContentCopyIcon from '@mui/icons-material/ContentCopy' import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { signup } from '@pages/signup' import { signup } from '@pages/signup'
import NotFound from '@pages/404'
import styles from '../../styles/HomeSection.module.css' import styles from '../../styles/HomeSection.module.css'
import toast from 'react-hot-toast'
import { Toaster } from 'react-hot-toast'
const spanVariants = { const spanVariants = {
visible: { y: 0, scaleY: 1 }, visible: { y: 0, scaleY: 1 },
@ -31,7 +32,7 @@ const list = {
opacity: 1, opacity: 1,
transition: { transition: {
when: 'beforeChildren', when: 'beforeChildren',
staggerChildren: 0.3 staggerChildren: 0.27
} }
} }
} }
@ -54,36 +55,40 @@ const QR = {
function HomeSection(props) { function HomeSection(props) {
let qrCode let qrCode
let minifiedUrl let minifiedUrl
const [disabled, setDisabled] = useState(false)
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [disabled, setdisabled] = useState(false)
const setMinfy = async () => { const setMinfy = async () => {
props.setLongUrl('') if (props.longUrl === '') {
setOpen(false) props.setShowQrCode(false)
setDisabled(true) setOpen(false)
let res toast.error("Please enter a valid URL !!");
try {
res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl,
})
} catch (err) {
console.error(err)
return
} }
else {
setdisabled(true)
setTimeout(() => { setdisabled(false) }, 6000)
setOpen(false)
let res
try {
res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl,
})
} catch (err) {
console.error(err)
return
}
toast.success("Successfully shortened your URL !!")
const data = await res.data
console.log(`Data: ${data}`);
const data = await res.data props.setShortUrl(data.minifiedUrl)
console.log(`Data: ${data}`); minifiedUrl = data.minifiedUrl
if (minifiedUrl) {
props.setShortUrl(data.minifiedUrl) generateQR()
minifiedUrl = data.minifiedUrl }
navigator.clipboard.writeText(props.shortUrl) setOpen(true)
if (minifiedUrl) {
generateQR()
} }
await navigator.clipboard.writeText(data.minifiedUrl)
setOpen(true)
setDisabled(false)
} }
// Generate QRCODE for the generated link // Generate QRCODE for the generated link
@ -97,6 +102,11 @@ function HomeSection(props) {
} }
} }
const handlecopy = async () => {
navigator.clipboard.writeText(props.shortUrl)
toast.success("URL copied to clipboard !!")
}
const text1 = "Url"; const text1 = "Url";
const text2 = "MiniFy"; const text2 = "MiniFy";
@ -105,25 +115,19 @@ function HomeSection(props) {
<HomeSectionStyle> <HomeSectionStyle>
<div className="content"> <div className="content">
<motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible"> <motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
<div style={{ display: 'flex', marginBottom: '20px' }}> {text1.split("").map((Letter, id) => (
{text1.split("").map((Letter, id) => ( <motion.span variants={effect} className={styles.head} key={id}>
<motion.div variants={effect}> <motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
<span className={styles.head} key={id}> </motion.span>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1> ))}
</span></motion.div> &nbsp;&nbsp;&nbsp;&nbsp;
))} {text2.split("").map((Letter, id) => (
&nbsp;&nbsp;&nbsp;&nbsp; <motion.span variants={effect} className={styles.head} key={id}>
</div> <motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
<div style={{ display: 'flex' }}> </motion.span>
{text2.split("").map((Letter, id) => ( ))}
<motion.div variants={effect}><span className={styles.head} key={id}>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
</span></motion.div>
))}
</div>
</motion.span> </motion.span>
<motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}> <motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
<input <input
className={styles.search} className={styles.search}
placeholder="Enter the url to be minified......" placeholder="Enter the url to be minified......"
@ -158,8 +162,8 @@ function HomeSection(props) {
{ {
// show QR code if a url is generated // show QR code if a url is generated
props.showQrCode ? ( props.showQrCode && open ? (
<div style={QR}> <motion.div initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { ease: 'easeInOut', duration: 1 } }} style={QR}>
<Image <Image
src={props.qrData} src={props.qrData}
placeholder="blur" placeholder="blur"
@ -167,7 +171,7 @@ function HomeSection(props) {
width={150} width={150}
height={150} height={150}
/> />
</div> </motion.div>
) : ( ) : (
'' ''
) )
@ -182,25 +186,28 @@ function HomeSection(props) {
aria-label="close" aria-label="close"
color="inherit" color="inherit"
size="small" size="small"
sx={{ padding: '5px 0 0 0' }}
onClick={() => { onClick={() => {
setOpen(false) setOpen(false)
}} }}
> >
<CloseIcon fontSize="inherit" /> <CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
</IconButton> </IconButton>
} }
sx={{ mb: 2 }} sx={{ mb: 2, fontWeight: 'bold', color: 'black' }}
> >
Your Shortened URL: {props.shortUrl}{' '} Your Shortened URL: {props.shortUrl}{' '}
<IconButton <IconButton
onClick={() => navigator.clipboard.writeText(props.shortUrl)} onClick={handlecopy}
style={{ marginLeft: '15px', padding: 0 }} sx={{ marginLeft: '15px', padding: 0, '&:hover': { color: 'blue' } }}
> >
<ContentCopyIcon /> <ContentCopyIcon />
</IconButton> </IconButton>
</Alert> </Alert>
</Collapse> </Collapse>
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
</HomeSectionStyle> </HomeSectionStyle>
) )
} }

73
frontend/package-lock.json generated
View File

@ -21,6 +21,7 @@
"apexcharts": "^3.33.1", "apexcharts": "^3.33.1",
"axios": "^0.26.0", "axios": "^0.26.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"cors": "^2.8.5",
"framer-motion": "^6.2.8", "framer-motion": "^6.2.8",
"nanoid": "^3.2.0", "nanoid": "^3.2.0",
"next": "12.0.9", "next": "12.0.9",
@ -29,6 +30,7 @@
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.2.0", "react-bootstrap": "^2.2.0",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-page-loading": "^1.0.2", "react-page-loading": "^1.0.2",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"styled-jsx": "^5.0.0" "styled-jsx": "^5.0.0"
@ -1239,6 +1241,18 @@
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
"deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js." "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js."
}, },
"node_modules/cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"dependencies": {
"object-assign": "^4",
"vary": "^1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/cosmiconfig": { "node_modules/cosmiconfig": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@ -1464,6 +1478,14 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/goober": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
"peerDependencies": {
"csstype": "^3.0.10"
}
},
"node_modules/has": { "node_modules/has": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -1996,6 +2018,21 @@
"react": "17.0.2" "react": "17.0.2"
} }
}, },
"node_modules/react-hot-toast": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
"dependencies": {
"goober": "^2.1.1"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -2477,6 +2514,14 @@
"react": "^16.8.0 || ^17.0.0" "react": "^16.8.0 || ^17.0.0"
} }
}, },
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/warning": { "node_modules/warning": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@ -3351,6 +3396,15 @@
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
}, },
"cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"requires": {
"object-assign": "^4",
"vary": "^1"
}
},
"cosmiconfig": { "cosmiconfig": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@ -3524,6 +3578,12 @@
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
}, },
"goober": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
"requires": {}
},
"has": { "has": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -3913,6 +3973,14 @@
"scheduler": "^0.20.2" "scheduler": "^0.20.2"
} }
}, },
"react-hot-toast": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
"requires": {
"goober": "^2.1.1"
}
},
"react-is": { "react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -4275,6 +4343,11 @@
"object-assign": "^4.1.1" "object-assign": "^4.1.1"
} }
}, },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
},
"warning": { "warning": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

3
frontend/package.json
View File

@ -22,8 +22,8 @@
"apexcharts": "^3.33.1", "apexcharts": "^3.33.1",
"axios": "^0.26.0", "axios": "^0.26.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"framer-motion": "^6.2.8",
"cors": "^2.8.5", "cors": "^2.8.5",
"framer-motion": "^6.2.8",
"nanoid": "^3.2.0", "nanoid": "^3.2.0",
"next": "12.0.9", "next": "12.0.9",
"qrcode": "^1.5.0", "qrcode": "^1.5.0",
@ -31,6 +31,7 @@
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.2.0", "react-bootstrap": "^2.2.0",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-page-loading": "^1.0.2", "react-page-loading": "^1.0.2",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"styled-jsx": "^5.0.0" "styled-jsx": "^5.0.0"

1
frontend/pages/index.js
View File

@ -3,6 +3,7 @@ import Head from 'next/head'
import HomeSection from 'components/HomeSection/HomeSection' import HomeSection from 'components/HomeSection/HomeSection'
import NavBar from 'components/NavBar' import NavBar from 'components/NavBar'
import Features from 'components/Features' import Features from 'components/Features'
import Toaster from 'react-hot-toast'
export default function Home() { export default function Home() {
const [shortUrl, setShortUrl] = useState(null) const [shortUrl, setShortUrl] = useState(null)

6
frontend/styles/HomeSection.module.css
View File

@ -1,12 +1,11 @@
.head { .head {
font-family: 'Montserrat Alternates', sans-serif; font-family: 'Montserrat Alternates', sans-serif;
color: #fff; color: #fff;
margin-bottom: 30px;
text-shadow: 3px 2px 1px black; text-shadow: 3px 2px 1px black;
line-height: 1.15; line-height: 1.15;
font-size: 5.5rem; font-size: 5.5rem;
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 17px;
text-align: center; text-align: center;
} }
@ -34,7 +33,7 @@
top: 5px; top: 5px;
height: 40px; height: 40px;
width: 100px; width: 100px;
border-radius: 50px !important ; border-radius: 50px !important;
} }
.info { .info {
@ -44,6 +43,7 @@
.showUrl { .showUrl {
margin-top: 1rem; margin-top: 1rem;
border-radius: 25px !important;
} }
@media (max-width: 600px) { @media (max-width: 600px) {

2183
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff