refactor

Real-Dev-Squad · Oct 1, 2023 · 8269294 · 8269294
1 parent 987b1dc
commit 8269294
Show file tree

Hide file tree

Showing 13 changed files with 175 additions and 284 deletions.
diff --git a/__tests__/components/Footer.test.tsx b/__tests__/components/Footer.test.tsx
@@ -1,4 +1,4 @@
-import { Footer } from '@/components/Footer/Footer';
+import Footer from '@/components/Footer/';
 import { render } from '@testing-library/react';
 
 describe('Footer', () => {
@@ -9,7 +9,10 @@ describe('Footer', () => {
 
     it('should have a link to the repo', () => {
         const { container } = render(<Footer />);
-        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+        expect(container.querySelector('a')).toHaveAttribute(
+            'href',
+            'https://github.com/Real-Dev-Squad/tiny-site-frontend'
+        );
     });
 
     it('should have a link to the repo', () => {

diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navbar } from '@/components/Navbar/Navbar';
+import Navbar from '@/components/Navbar/';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

diff --git a/__tests__/pages/login.js b/__tests__/pages/login.js
diff --git a/public/assets/eye.tsx → public/assets/icons/eye.tsx b/public/assets/eye.tsx → public/assets/icons/eye.tsx
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+    return (
+        <div className="bg-gray-200 flex justify-center items-center h-[6vh]">
+            <p className="text-gray-600 text-sm text-center">
+                The contents of this website are deployed from this{' '}
+                <a
+                    href="https://github.com/Real-Dev-Squad/tiny-site-frontend"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-500"
+                >
+                    open sourced repo
+                </a>
+            </p>
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
@@ -1,5 +1,5 @@
 import React, { SetStateAction, useState } from 'react';
-import EyeIcon from '../../../public/assets/eye';
+import EyeIcon from '../../../public/assets/icons/eye';
 import EyeCloseIcon from '../../../public/assets/icons/eyeClose';
 
 type Props = {

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+
+import Head from 'next/head';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+type LayoutProps = {
+    title: string;
+    children: ReactNode;
+};
+
+const Layout: FC<LayoutProps> = ({ title, children }) => {
+    return (
+        <div>
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <Navbar />
+            <main className="bg-gray-900 flex flex-col justify-center items-center h-container">{children}</main>
+            <Footer />
+        </div>
+    );
+};
+
+export default Layout;
diff --git a/src/components/Navbar/Navbar.tsx → src/components/Navbar/index.tsx b/src/components/Navbar/Navbar.tsx → src/components/Navbar/index.tsx
@@ -65,4 +65,4 @@ const Navbar: React.FC = () => {
     );
 };
 
-export { Navbar };
+export default Navbar;
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,16 +1,5 @@
 import '@/styles/global.css';
-import { Footer } from '@/components/Footer/Footer';
-import { Navbar } from '@/components/Navbar/Navbar';
 
 export default function MyApp({ Component, pageProps }) {
-    return (
-        <div>
-            <title>URL Shortener</title>
-            <Navbar />
-            <div className="bg-gray-900 flex flex-col justify-center items-center h-container">
-                <Component {...pageProps} />
-            </div>
-            <Footer />
-        </div>
-    );
+    return <Component {...pageProps} />;
 }
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import CopyIcon from '../../../public/assets/icons/copy';
 import AddIcon from '../../../public/assets/icons/add';
 import ReloadIcon from '../../../public/assets/icons/reload';
+import Layout from '@/components/Layout';
 
 const Dashboard = () => {
     const [url, getUrl] = useState('');
@@ -13,65 +14,67 @@ const Dashboard = () => {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
-            <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
-            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
-                <input
-                    type="text"
-                    placeholder="Enter the URL"
-                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                    value={url}
-                    onChange={(e) => {
-                        getUrl(e.target.value);
-                    }}
-                />
-                <button
-                    className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                    onClick={() => {
-                        const randomString = generateRandomString();
-                        setUrl(`https://rds.li/${randomString}`);
-                    }}
-                >
-                    Generate
-                </button>
-            </div>
-            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
-                <input
-                    type="text"
-                    placeholder="Copy the URL"
-                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                    disabled
-                    value={shortUrl}
-                />
-                <div className="flex flex-row justify-center items-center space-x-1">
+        <Layout title="Home | URL Shortener">
+            <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
+                <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
+                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
+                    <input
+                        type="text"
+                        placeholder="Enter the URL"
+                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                        value={url}
+                        onChange={(e) => {
+                            getUrl(e.target.value);
+                        }}
+                    />
                     <button
-                        className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                        className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                         onClick={() => {
                             const randomString = generateRandomString();
                             setUrl(`https://rds.li/${randomString}`);
                         }}
                     >
-                        <ReloadIcon />
-                    </button>
-                    <button
-                        className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                        onClick={() => {
-                            setUrl('');
-                        }}
-                    >
-                        <AddIcon />
-                    </button>
-                    <button
-                        className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                        onClick={() => {
-                            navigator.clipboard.writeText(shortUrl);
-                        }}
-                    >
-                        <CopyIcon />
+                        Generate
                     </button>
                 </div>
+                <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
+                    <input
+                        type="text"
+                        placeholder="Copy the URL"
+                        className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                        disabled
+                        value={shortUrl}
+                    />
+                    <div className="flex flex-row justify-center items-center space-x-1">
+                        <button
+                            className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                const randomString = generateRandomString();
+                                setUrl(`https://rds.li/${randomString}`);
+                            }}
+                        >
+                            <ReloadIcon />
+                        </button>
+                        <button
+                            className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                setUrl('');
+                            }}
+                        >
+                            <AddIcon />
+                        </button>
+                        <button
+                            className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                            onClick={() => {
+                                navigator.clipboard.writeText(shortUrl);
+                            }}
+                        >
+                            <CopyIcon />
+                        </button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </Layout>
     );
 };
 

diff --git a/src/pages/login/index.js b/src/pages/login/index.js