From 1ae686480c084f3af897de138fc2af97f0c262d2 Mon Sep 17 00:00:00 2001 From: Parker Date: Wed, 18 Dec 2024 19:24:43 -0600 Subject: Remove `/create` - add directly to dashboard page --- app/src/components/CreateLink.tsx | 100 -------------------------------------- app/src/components/Dashboard.tsx | 71 ++++++++++++++++++++++++++- 2 files changed, 70 insertions(+), 101 deletions(-) delete mode 100644 app/src/components/CreateLink.tsx (limited to 'app/src/components') diff --git a/app/src/components/CreateLink.tsx b/app/src/components/CreateLink.tsx deleted file mode 100644 index a6456f1..0000000 --- a/app/src/components/CreateLink.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useState, FormEvent, useEffect } from 'react'; -import createStyles from '../styles/Create.module.css'; -import styles from '../styles/Auth.module.css'; -import { Link } from 'react-router-dom'; -import axios from 'axios'; -import Navbar from './Navbar'; -import { useNavigate } from 'react-router-dom'; - -function CreateLink() { - document.title = 'LinkLogger | Create Short Link'; - - const [link, setLink] = useState(''); - const [url, setURL] = useState(''); - const [isSubmitting, setIsSubmitting] = useState(false); - const [isCopied, setIsCopied] = useState(false); - const [error, setError] = useState(null); - const navigate = useNavigate(); - - // Get /api/users/me to make sure the user is logged in, and - // to get the username for rendering on screen - useEffect(() => { - axios - .get('/api/users/me') - .then((res) => { - if (res.status != 200) { - navigate('/login'); - } - }) - .catch(() => { - navigate('/login'); - }); - }, []); - - const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); - setIsSubmitting(true); - try { - const res = await axios.post('/api/links', { url }); - if (res.status === 200) { - setLink(res.data.link); - } - } catch (error) { - setError('STRANGE'); - } - }; - - const copyLink = () => { - navigator.clipboard.writeText(`${window.location.origin}/c/${link}`); - setIsCopied(true); - // Wait 5 seconds, then set isCopied back to false - setTimeout(() => { - setIsCopied(false); - }, 5000); - }; - - return ( - <> - -
-

Create a new short link by entering the long URL below

-

- {error} -

-
-
- setURL(e.target.value)} - required - /> - {link.length === 0 ? ( - - ) : ( - - )} -
-
-

- - Click here - {' '} - to visit your dashboard. -

-
- - ); -} - -export default CreateLink; diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx index d699efb..913b566 100644 --- a/app/src/components/Dashboard.tsx +++ b/app/src/components/Dashboard.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, FormEvent } from 'react'; import axios from 'axios'; import styles from '../styles/Dashboard.module.css'; import { useNavigate, Link } from 'react-router-dom'; @@ -28,6 +28,14 @@ function Dashboard() { expire_date: string; } + // Link creation states + const [link, setLink] = useState(''); + const [url, setURL] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isCopied, setIsCopied] = useState(false); + const [error, setError] = useState(null); + + // Log and link states const [links, setLinks] = useState([]); const [logs, setLogs] = useState([]); const [visibleLog, setVisibleLog] = useState(null); @@ -35,6 +43,37 @@ function Dashboard() { const [loadingLogs, setLoadingLogs] = useState(true); // Track loading state for logs const navigate = useNavigate(); + // Handle form submission to create a new link + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + try { + const res = await axios.post('/api/links', { url }); + if (res.status === 200) { + setLink(res.data.link); + } + } catch (error: unknown) { + if (axios.isAxiosError(error)) { + const customErrorMessage = error.response?.data?.error || null; + setError(customErrorMessage || 'An error occurred. Please try again.'); + setIsSubmitting(false); + } else { + setError('Unknown error. Please try again.'); + setIsSubmitting(false); + } + } + }; + + // Copy the link to the clipboard + const copyLink = () => { + navigator.clipboard.writeText(`${window.location.origin}/c/${link}`); + setIsCopied(true); + // Wait 5 seconds, then set isCopied back to false + setTimeout(() => { + setIsCopied(false); + }, 5000); + }; + // Fetch links from API useEffect(() => { axios @@ -130,6 +169,36 @@ function Dashboard() { return ( <> + +
+

Create a new short link by entering the long URL below

+
+ setURL(e.target.value)} + required + /> + {link.length === 0 ? ( + + ) : ( + + )} +
+

+ {error} +

+
+ {/* Show loading spinner if either links or logs are still loading */} {loadingLinks || loadingLogs ? ( -- cgit v1.2.3-70-g09d2