From d0ef26b8a2c13503cab927603fe0cd7e40582afc Mon Sep 17 00:00:00 2001 From: vinit717 Date: Fri, 2 Aug 2024 19:18:42 +0530 Subject: [PATCH] Revert "chore: undo changes" This reverts commit 1dc1d08ac0ad6420a9aad8749f3ce911fa4e83fa. --- __tests__/components/LoginModal.test.tsx | 2 +- __tests__/components/Navbar/Navbar.test.tsx | 4 +- __tests__/components/QRCodeModal.test.tsx | 64 -------------- __tests__/pages/app.test.tsx | 2 +- __tests__/pages/dashboard.test.tsx | 2 +- src/components/App/InputSection.tsx | 23 ++--- src/components/App/OutputSection.tsx | 93 ++++++++++++--------- src/components/LoginModal/index.tsx | 2 +- src/components/Modal/index.tsx | 49 +++++++++++ src/components/QRCodeModal.tsx/index.tsx | 84 ------------------- src/pages/app/index.tsx | 56 ++++++++----- 11 files changed, 154 insertions(+), 227 deletions(-) delete mode 100644 __tests__/components/QRCodeModal.test.tsx create mode 100644 src/components/Modal/index.tsx delete mode 100644 src/components/QRCodeModal.tsx/index.tsx diff --git a/__tests__/components/LoginModal.test.tsx b/__tests__/components/LoginModal.test.tsx index e999279..7e3360e 100644 --- a/__tests__/components/LoginModal.test.tsx +++ b/__tests__/components/LoginModal.test.tsx @@ -13,7 +13,7 @@ describe('LoginModal Component', () => { }} /> ); - const closeButton = screen.getByTestId('close-login-modal'); + const closeButton = screen.getByTestId('close-modal'); expect(closeButton).toBeInTheDocument(); }); diff --git a/__tests__/components/Navbar/Navbar.test.tsx b/__tests__/components/Navbar/Navbar.test.tsx index 64e418d..6b1f5b3 100644 --- a/__tests__/components/Navbar/Navbar.test.tsx +++ b/__tests__/components/Navbar/Navbar.test.tsx @@ -94,7 +94,7 @@ describe('Navbar', () => { const originalIsLoggedIn = screen.getByText('Sign In'); fireEvent.click(originalIsLoggedIn); - const closeButton = screen.getByTestId('close-login-modal'); + const closeButton = screen.getByTestId('close-modal'); fireEvent.click(closeButton); const modal = screen.queryByText('Sign to your account'); @@ -130,7 +130,7 @@ describe('Navbar', () => { const originalIsLoggedIn = screen.getByText('Sign In'); fireEvent.click(originalIsLoggedIn); - const closeButton = screen.getByTestId('close-login-modal'); + const closeButton = screen.getByTestId('close-modal'); fireEvent.click(closeButton); expect(mockSetShowLoginModal).toHaveBeenCalled(); diff --git a/__tests__/components/QRCodeModal.test.tsx b/__tests__/components/QRCodeModal.test.tsx deleted file mode 100644 index 9ab718e..0000000 --- a/__tests__/components/QRCodeModal.test.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; - -import QRCodeModal from '@/components/QRCodeModal'; - -describe('QRCodeModal Component', () => { - const onClose = jest.fn(); - - test('renders the QRCodeModal component', () => { - render( - { - onClose(); - }} - shortUrl="https://www.rds.com" - /> - ); - const closeButton = screen.getByTestId('close-qrcode-modal'); - expect(closeButton).toBeInTheDocument(); - const downloadButton = screen.getByTestId('download-qr-code'); - expect(downloadButton).toBeInTheDocument(); - const qrcodeCanvas = screen.getByTestId('qrcode'); - expect(qrcodeCanvas).toBeInTheDocument(); - }); - - test('closes the modal when clicking outside the modal', () => { - render( - { - onClose(); - }} - shortUrl="https://www.rds.com" - /> - ); - const modal = screen.getByTestId('qrcode-modal'); - expect(modal).toBeInTheDocument(); - const body = document.querySelector('body'); - fireEvent.mouseDown(body as HTMLElement); - expect(onClose).toHaveBeenCalledTimes(1); - }); - - test('download image by clicking download button', () => { - render( - { - onClose(); - }} - shortUrl="https://www.rds.com" - /> - ); - - const downloadButton = screen.getByTestId('download-qr-code'); - expect(downloadButton).toBeInTheDocument(); - - HTMLCanvasElement.prototype.toDataURL = jest.fn(() => 'data:image/png;base64,abcd1234'); - document.body.appendChild = jest.fn(); - document.body.removeChild = jest.fn(); - - fireEvent.click(downloadButton); - - expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith('image/png'); - expect(document.body.appendChild).toHaveBeenCalled(); - expect(document.body.removeChild).toHaveBeenCalled(); - }); -}); diff --git a/__tests__/pages/app.test.tsx b/__tests__/pages/app.test.tsx index 4b62e5d..0026ad2 100644 --- a/__tests__/pages/app.test.tsx +++ b/__tests__/pages/app.test.tsx @@ -110,7 +110,7 @@ describe('App Component', () => { const generateButton = screen.getByText('Shorten'); fireEvent.change(urlInput, { target: { value: 'https://www.longurl.com' } }); fireEvent.click(generateButton); - const closeButton = await screen.findByTestId('close-login-modal'); + const closeButton = await screen.findByTestId('close-modal'); fireEvent.click(closeButton); const loginModal = screen.queryByText('Log in to generate short links'); expect(loginModal).not.toBeInTheDocument(); diff --git a/__tests__/pages/dashboard.test.tsx b/__tests__/pages/dashboard.test.tsx index fe11aa0..60bf31b 100644 --- a/__tests__/pages/dashboard.test.tsx +++ b/__tests__/pages/dashboard.test.tsx @@ -82,7 +82,7 @@ describe('Dashboard', () => { ); expect(screen.getByTestId('login-modal')).toBeInTheDocument(); expect(screen.getByText('Login to view your URLs and create new ones')).toBeInTheDocument(); - const closeButton = screen.getByTestId('close-login-modal'); + const closeButton = screen.getByTestId('close-modal'); closeButton.click(); }); diff --git a/src/components/App/InputSection.tsx b/src/components/App/InputSection.tsx index dedb2af..f7f24e2 100644 --- a/src/components/App/InputSection.tsx +++ b/src/components/App/InputSection.tsx @@ -10,25 +10,28 @@ interface InputSectionProps { const InputSection: React.FC = ({ url, setUrl, handleUrl }) => (
{ e.preventDefault(); handleUrl(); }} data-testid="input-section" > -

- Enter a URL to shorten +

+ Shorten Your URL

-
-
- +

+ Perfect Links Every Time +

+ +

Ready to shorten your URL? Enter your URL below

+ +
+
) => setUrl(e.target.value)} value={url} placeholder="Enter the URL" @@ -37,7 +40,7 @@ const InputSection: React.FC = ({ url, setUrl, handleUrl }) =
+
{shortUrl.replace(removeProtocol, '')} -
+
- -   + - -
- {showQRCodeModal && setShowQRCodeModal(false)} />} ); }; diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx index e2f5e17..9b8dcbb 100644 --- a/src/components/LoginModal/index.tsx +++ b/src/components/LoginModal/index.tsx @@ -38,7 +38,7 @@ const LoginModal: React.FC = ({ onClose, children }) => { ref={modalRef} className="bg-gray-800 p-8 rounded-md w-[330px] relative flex flex-col justify-center items-center shadow-lg" > -

Please log in

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx new file mode 100644 index 0000000..acb0509 --- /dev/null +++ b/src/components/Modal/index.tsx @@ -0,0 +1,49 @@ +import React, { useEffect, useRef } from 'react'; +import { IoCloseSharp } from 'react-icons/io5'; + +interface ModalProps { + onClose: () => void; + children?: React.ReactNode; + title?: string; + width?: string; + height?: string; +} + +const Modal: React.FC = ({ onClose, children, title, width = '330px', height = 'auto' }) => { + const modalRef = useRef(null); + + const handleClickOutside = (event: MouseEvent) => { + if (modalRef.current && !modalRef.current.contains(event.target as Node)) { + onClose(); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [onClose]); + + return ( + +
+ + {title &&

{title}

} + {children} +
+ + ); +}; + +export default Modal; diff --git a/src/components/QRCodeModal.tsx/index.tsx b/src/components/QRCodeModal.tsx/index.tsx deleted file mode 100644 index 3474302..0000000 --- a/src/components/QRCodeModal.tsx/index.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import QRCode from 'qrcode.react'; -import React, { useEffect, useRef } from 'react'; -import { FcDownload } from 'react-icons/fc'; -import { IoCloseSharp } from 'react-icons/io5'; - -import Button from '@/components/Button'; -const RDSIcon = '_next/image?url=%2Frds.png&w=64&q=75'; - -interface QRCodeModalProps { - shortUrl: string; - onClose: () => void; -} - -const QRCodeModal: React.FC = ({ shortUrl, onClose }) => { - const modalRef = useRef(null); - - const handleClickOutside = (event: MouseEvent) => { - if (modalRef.current && !modalRef.current.contains(event.target as Node)) { - onClose(); - } - }; - - useEffect(() => { - document.addEventListener('mousedown', handleClickOutside); - - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [onClose]); - - const downloadQRCode = () => { - const canvas = document.getElementById('qr-code') as HTMLCanvasElement; - if (canvas) { - const pngUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); - const downloadLink = document.createElement('a'); - downloadLink.href = pngUrl; - downloadLink.download = `${shortUrl.split('/').pop()}.png`; - document.body.appendChild(downloadLink); - downloadLink.click(); - document.body.removeChild(downloadLink); - } - }; - - return ( - -
- - - -
- - ); -}; - -export default QRCodeModal; diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx index d04bd45..043f4c6 100644 --- a/src/pages/app/index.tsx +++ b/src/pages/app/index.tsx @@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react'; import InputSection from '@/components/App/InputSection'; import OutputSection from '@/components/App/OutputSection'; +import SignInWithGoogleIcon from '@/components/icons/signWithGoogle'; import Layout from '@/components/Layout'; -import LoginModal from '@/components/LoginModal'; +import Modal from '@/components/Modal'; import Toast from '@/components/Toast'; -import { TINY_SITE } from '@/constants/url'; +import { TINY_API_GOOGLE_LOGIN, TINY_SITE } from '@/constants/url'; import useAuthenticated from '@/hooks/useAuthenticated'; import useToast from '@/hooks/useToast'; import { useShortenUrlMutation } from '@/services/api'; @@ -15,8 +16,8 @@ import validateUrl from '@/utils/validateUrl'; const App = () => { const [url, setUrl] = useState(''); const [shortUrl, setShortUrl] = useState(''); - const [showInputBox, setShowInputBox] = useState(true); const [showLoginModal, setShowLoginModal] = useState(false); + const [showOutputModal, setShowOutputModal] = useState(false); const { showToast, toasts } = useToast(); const { isLoggedIn, userData } = useAuthenticated(); @@ -24,7 +25,6 @@ const App = () => { useEffect(() => { const localUrl = localStorage.getItem('url'); - if (isLoggedIn && localUrl) { setUrl(localUrl); generateShortUrl(localUrl); @@ -34,16 +34,14 @@ const App = () => { const generateShortUrl = async (url: string) => { if (!validateUrl(url, showToast)) return; - try { const response = await shortenUrlMutation.mutateAsync({ originalUrl: url, userData: userData, }); - const fullShortUrl = `${TINY_SITE}/${response.shortUrl}`; setShortUrl(fullShortUrl); - setShowInputBox(false); + setShowOutputModal(true); } catch (e) { const error = e as ErrorResponse; if (error.response && error.response.data && error.response.data.message) { @@ -65,7 +63,7 @@ const App = () => { const createNewHandler = () => { setUrl(''); setShortUrl(''); - setShowInputBox(true); + setShowOutputModal(false); }; const handleUrl = () => { @@ -82,10 +80,33 @@ const App = () => { return (
-
- {showInputBox ? ( - - ) : ( +
+ +
+ {toasts.map((toast) => ( + + ))} + {showLoginModal && ( + setShowLoginModal(false)} title="Please log in"> +

Log in to generate short links

+ + + + + )} + {showOutputModal && ( + { + setShowOutputModal(false); + setUrl(''); + }} + width="550px" + height="560px" + > { handleCopyUrl={handleCopyUrl} handleCreateNew={createNewHandler} /> - )} -
- {toasts.map((toast) => ( - - ))} - {showLoginModal && ( - setShowLoginModal(false)} - children={

Log in to generate short links

} - /> + )}