From 8792ed320350ad3175bb4b6e6909292f1cb606d7 Mon Sep 17 00:00:00 2001 From: Alan Vu Date: Sun, 2 Feb 2025 20:29:32 -0800 Subject: [PATCH 1/5] commited --- URLShortenerPage.js | 65 ++++++++++++++++++++++++++ src/Pages/URLShortener/URLShortener.js | 9 ++-- urlShortener.js | 29 ++++++++++++ yourComponent.js | 28 +++++++++++ 4 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 URLShortenerPage.js create mode 100644 urlShortener.js create mode 100644 yourComponent.js diff --git a/URLShortenerPage.js b/URLShortenerPage.js new file mode 100644 index 000000000..7238f772b --- /dev/null +++ b/URLShortenerPage.js @@ -0,0 +1,65 @@ +import React, { useEffect, useState } from 'react'; +import { getAllUrls, createUrl, deleteUrl } from '../../APIFunctions/Cleezy'; +import { trashcanSymbol } from '../Overview/SVG'; +import ConfirmationModal from '../../Components/DecisionModal/ConfirmationModal.js'; + +export default function URLShortenerPage(props) { + const [allUrls, setAllUrls] = useState([]); + const [url, setUrl] = useState(''); + const [alias, setAlias] = useState(''); + const [aliasTaken, setAliasTaken] = useState(false); + const [showUrlInput, setShowUrlInput] = useState(false); + const [total, setTotal] = useState(0); + const [successMessage, setSuccessMessage] = useState(null); + const [errorAlertMessage, setErrorAlertMessage] = useState(null); + + useEffect(() => { + async function fetchData() { + const response = await getAllUrls(props.user.token); + setAllUrls(response.responseData); + setTotal(response.responseData.length); + } + fetchData(); + }, [props.user.token]); + + async function handleCreateUrl() { + console.log('Creating URL with:', { url: url.trim(), alias: alias.trim() }); + const response = await createUrl( + url.trim(), + alias.trim(), + props.user.token + ); + console.log('Received response from createUrl:', response); + if (!response.error) { + setAllUrls([...allUrls, response.responseData]); + setAliasTaken(false); + setUrl(''); + setAlias(''); + setShowUrlInput(false); + setTotal(total + 1); + setSuccessMessage(`Successfully created shortened link ${response.responseData.link}`); + setTimeout(() => { + setSuccessMessage(null); + }, 5000); + return true; + } else { + setAliasTaken(true); + setErrorAlertMessage('That alias is taken!'); + return false; + } + } + + async function handleDeleteUrl(id) { + const response = await deleteUrl(id, props.user.token); + if (!response.error) { + setAllUrls(allUrls.filter((url) => url._id !== id)); + setTotal(total - 1); + } + } + + return ( +
+ {/* ...existing JSX code... */} +
+ ); +} diff --git a/src/Pages/URLShortener/URLShortener.js b/src/Pages/URLShortener/URLShortener.js index dcb50bf00..dd7628541 100644 --- a/src/Pages/URLShortener/URLShortener.js +++ b/src/Pages/URLShortener/URLShortener.js @@ -28,7 +28,8 @@ export default function URLShortenerPage(props) { const [currentSortColumn, setCurrentSortColumn] = useState(null); const [currentSortOrder, setCurrentSortOrder] = useState(null); - const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-white'; + const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 bg-gray-100 dark:text-gray-400 dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'; + // const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-gray'; const LABEL_CLASS = 'block text-sm font-medium leading-6 text-gray-300'; /** @@ -258,7 +259,8 @@ export default function URLShortenerPage(props) { placeholder="https://example.com" value={url} onChange={e => setUrl(e.target.value)} - className={INPUT_CLASS} + className="w-full text-sm input input-bordered sm:text-base" + // className={INPUT_CLASS} /> @@ -283,7 +285,8 @@ export default function URLShortenerPage(props) { name="alias" value={alias} onChange={e => setAlias(e.target.value)} - className={INPUT_CLASS} + className="w-full text-sm input input-bordered sm:text-base" + // className={INPUT_CLASS} /> diff --git a/urlShortener.js b/urlShortener.js new file mode 100644 index 000000000..d42f3f4b0 --- /dev/null +++ b/urlShortener.js @@ -0,0 +1,29 @@ +const axios = require('axios'); + +async function createShortUrl(url, alias) { + try { + console.log('Sending request with data:', { url, alias: alias || null }); + const response = await axios.post('http://localhost:8000/create_url', { + url: url, + alias: alias || null // Ensure alias is either a user-provided value or null + }); + console.log('Received response:', response.data); + return { error: false, responseData: response.data }; + } catch (error) { + if (error.response) { + console.error('Received error response:', error.response.data); + if (error.response.status === 409) { + console.error('Alias already exists. Please choose a different alias.'); + return { error: true, message: 'Alias already exists' }; + } else { + console.error('An error occurred:', error.message); + return { error: true, message: error.message }; + } + } else { + console.error('An error occurred:', error.message); + return { error: true, message: error.message }; + } + } +} + +// ...existing code... diff --git a/yourComponent.js b/yourComponent.js new file mode 100644 index 000000000..7a6e36aeb --- /dev/null +++ b/yourComponent.js @@ -0,0 +1,28 @@ +async function handleCreateUrl() { + console.log('Creating URL with:', { url: url.trim(), alias: alias.trim() }); + const response = await createShortUrl( + url.trim(), + alias.trim(), + props.user.token + ); + console.log('Received response from createShortUrl:', response); + if (!response.error) { + setAllUrls([...allUrls, response.responseData]); + setAliasTaken(false); + setUrl(''); + setAlias(''); + setShowUrlInput(false); + setTotal(total + 1); + setSuccessMessage(`Successfully created shortened link ${response.responseData.link}`); + setTimeout(() => { + setSuccessMessage(null); + }, 5000); + return true; + } else { + setAliasTaken(true); + setErrorAlertMessage('That alias is taken!'); + return false; + } +} + +// ...existing code... From b43a8c7b0e05d42470616f377be99bb392d7fb61 Mon Sep 17 00:00:00 2001 From: Alan Vu Date: Sun, 2 Feb 2025 20:32:29 -0800 Subject: [PATCH 2/5] Removed URLShortenerPage.js and urlShortener.js from tracking --- URLShortenerPage.js | 65 --------------------------------------------- urlShortener.js | 29 -------------------- yourComponent.js | 28 ------------------- 3 files changed, 122 deletions(-) delete mode 100644 URLShortenerPage.js delete mode 100644 urlShortener.js delete mode 100644 yourComponent.js diff --git a/URLShortenerPage.js b/URLShortenerPage.js deleted file mode 100644 index 7238f772b..000000000 --- a/URLShortenerPage.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { getAllUrls, createUrl, deleteUrl } from '../../APIFunctions/Cleezy'; -import { trashcanSymbol } from '../Overview/SVG'; -import ConfirmationModal from '../../Components/DecisionModal/ConfirmationModal.js'; - -export default function URLShortenerPage(props) { - const [allUrls, setAllUrls] = useState([]); - const [url, setUrl] = useState(''); - const [alias, setAlias] = useState(''); - const [aliasTaken, setAliasTaken] = useState(false); - const [showUrlInput, setShowUrlInput] = useState(false); - const [total, setTotal] = useState(0); - const [successMessage, setSuccessMessage] = useState(null); - const [errorAlertMessage, setErrorAlertMessage] = useState(null); - - useEffect(() => { - async function fetchData() { - const response = await getAllUrls(props.user.token); - setAllUrls(response.responseData); - setTotal(response.responseData.length); - } - fetchData(); - }, [props.user.token]); - - async function handleCreateUrl() { - console.log('Creating URL with:', { url: url.trim(), alias: alias.trim() }); - const response = await createUrl( - url.trim(), - alias.trim(), - props.user.token - ); - console.log('Received response from createUrl:', response); - if (!response.error) { - setAllUrls([...allUrls, response.responseData]); - setAliasTaken(false); - setUrl(''); - setAlias(''); - setShowUrlInput(false); - setTotal(total + 1); - setSuccessMessage(`Successfully created shortened link ${response.responseData.link}`); - setTimeout(() => { - setSuccessMessage(null); - }, 5000); - return true; - } else { - setAliasTaken(true); - setErrorAlertMessage('That alias is taken!'); - return false; - } - } - - async function handleDeleteUrl(id) { - const response = await deleteUrl(id, props.user.token); - if (!response.error) { - setAllUrls(allUrls.filter((url) => url._id !== id)); - setTotal(total - 1); - } - } - - return ( -
- {/* ...existing JSX code... */} -
- ); -} diff --git a/urlShortener.js b/urlShortener.js deleted file mode 100644 index d42f3f4b0..000000000 --- a/urlShortener.js +++ /dev/null @@ -1,29 +0,0 @@ -const axios = require('axios'); - -async function createShortUrl(url, alias) { - try { - console.log('Sending request with data:', { url, alias: alias || null }); - const response = await axios.post('http://localhost:8000/create_url', { - url: url, - alias: alias || null // Ensure alias is either a user-provided value or null - }); - console.log('Received response:', response.data); - return { error: false, responseData: response.data }; - } catch (error) { - if (error.response) { - console.error('Received error response:', error.response.data); - if (error.response.status === 409) { - console.error('Alias already exists. Please choose a different alias.'); - return { error: true, message: 'Alias already exists' }; - } else { - console.error('An error occurred:', error.message); - return { error: true, message: error.message }; - } - } else { - console.error('An error occurred:', error.message); - return { error: true, message: error.message }; - } - } -} - -// ...existing code... diff --git a/yourComponent.js b/yourComponent.js deleted file mode 100644 index 7a6e36aeb..000000000 --- a/yourComponent.js +++ /dev/null @@ -1,28 +0,0 @@ -async function handleCreateUrl() { - console.log('Creating URL with:', { url: url.trim(), alias: alias.trim() }); - const response = await createShortUrl( - url.trim(), - alias.trim(), - props.user.token - ); - console.log('Received response from createShortUrl:', response); - if (!response.error) { - setAllUrls([...allUrls, response.responseData]); - setAliasTaken(false); - setUrl(''); - setAlias(''); - setShowUrlInput(false); - setTotal(total + 1); - setSuccessMessage(`Successfully created shortened link ${response.responseData.link}`); - setTimeout(() => { - setSuccessMessage(null); - }, 5000); - return true; - } else { - setAliasTaken(true); - setErrorAlertMessage('That alias is taken!'); - return false; - } -} - -// ...existing code... From cc7fb1fd49b555ef7996b520ea70ef53e09e2e1c Mon Sep 17 00:00:00 2001 From: Alan Vu Date: Mon, 3 Feb 2025 13:52:19 -0800 Subject: [PATCH 3/5] removed comments from previous push --- src/Pages/URLShortener/URLShortener.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Pages/URLShortener/URLShortener.js b/src/Pages/URLShortener/URLShortener.js index dd7628541..d7e125122 100644 --- a/src/Pages/URLShortener/URLShortener.js +++ b/src/Pages/URLShortener/URLShortener.js @@ -28,8 +28,7 @@ export default function URLShortenerPage(props) { const [currentSortColumn, setCurrentSortColumn] = useState(null); const [currentSortOrder, setCurrentSortOrder] = useState(null); - const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 bg-gray-100 dark:text-gray-400 dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'; - // const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-gray'; + const INPUT_CLASS = 'indent-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-gray'; const LABEL_CLASS = 'block text-sm font-medium leading-6 text-gray-300'; /** @@ -286,7 +285,6 @@ export default function URLShortenerPage(props) { value={alias} onChange={e => setAlias(e.target.value)} className="w-full text-sm input input-bordered sm:text-base" - // className={INPUT_CLASS} /> From c3c4a9992a88dc7e605bfc1f073672f1ee0ec23e Mon Sep 17 00:00:00 2001 From: Alan Vu Date: Mon, 3 Feb 2025 22:13:10 -0800 Subject: [PATCH 4/5] update so light mode font is visible --- src/Pages/URLShortener/URLShortener.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/Pages/URLShortener/URLShortener.js b/src/Pages/URLShortener/URLShortener.js index d7e125122..a93cbbc72 100644 --- a/src/Pages/URLShortener/URLShortener.js +++ b/src/Pages/URLShortener/URLShortener.js @@ -199,7 +199,7 @@ export default function URLShortenerPage(props) {

{startingElementNumber} - {endingElementNumber} / {total}

-

+

Showing {startingElementNumber} to {endingElementNumber} of {total + 1} results

)} @@ -230,7 +230,7 @@ export default function URLShortenerPage(props) { if (!showUrlInput) { return (