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

Fixed QR Code popup

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

73
frontend/package-lock.json generated
View File

@ -21,6 +21,7 @@
"apexcharts": "^3.33.1",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"cors": "^2.8.5",
"framer-motion": "^6.2.8",
"nanoid": "^3.2.0",
"next": "12.0.9",
@ -29,6 +30,7 @@
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.2.0",
"react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-page-loading": "^1.0.2",
"styled-components": "^5.3.3",
"styled-jsx": "^5.0.0"
@ -1239,6 +1241,18 @@
"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."
},
"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": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@ -1464,6 +1478,14 @@
"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": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -1996,6 +2018,21 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -2477,6 +2514,14 @@
"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": {
"version": "4.0.3",
"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",
"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": {
"version": "6.0.0",
"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",
"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": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@ -3913,6 +3973,14 @@
"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": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -4275,6 +4343,11 @@
"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": {
"version": "4.0.3",
"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",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"framer-motion": "^6.2.8",
"cors": "^2.8.5",
"framer-motion": "^6.2.8",
"nanoid": "^3.2.0",
"next": "12.0.9",
"qrcode": "^1.5.0",
@ -31,6 +31,7 @@
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.2.0",
"react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-page-loading": "^1.0.2",
"styled-components": "^5.3.3",
"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 NavBar from 'components/NavBar'
import Features from 'components/Features'
import Toaster from 'react-hot-toast'
export default function Home() {
const [shortUrl, setShortUrl] = useState(null)

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

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

2183
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff