diff --git a/api/main_endpoints/routes/Cleezy.js b/api/main_endpoints/routes/Cleezy.js index 64fea4dca..b203004a7 100644 --- a/api/main_endpoints/routes/Cleezy.js +++ b/api/main_endpoints/routes/Cleezy.js @@ -64,8 +64,8 @@ router.post('/createUrl', async (req, res) => { } else if (!await decodeToken(req)) { return res.sendStatus(UNAUTHORIZED); } - const { url, alias } = req.body; - let jsonbody = { url, alias: alias || null }; + const { url, alias, expiration_date : expirationDate } = req.body; + let jsonbody = { url, alias: alias || null, expiration_date: expirationDate || null }; try { const response = await axios.post(CLEEZY_URL + '/create_url', jsonbody); const data = response.data; diff --git a/src/APIFunctions/Cleezy.js b/src/APIFunctions/Cleezy.js index 96c88a6ce..0afdd966d 100644 --- a/src/APIFunctions/Cleezy.js +++ b/src/APIFunctions/Cleezy.js @@ -32,9 +32,9 @@ export async function getAllUrls({ return status; } -export async function createUrl(url, alias = null, token) { +export async function createUrl(url, alias = null, expirationDate = null, token) { let status = new ApiResponse(); - const urlToAdd = { url, alias }; + const urlToAdd = { url, alias, expiration_date : expirationDate }; try { const url = new URL('/api/Cleezy/createUrl', BASE_API_URL); const response = await axios diff --git a/src/Pages/URLShortener/URLShortener.js b/src/Pages/URLShortener/URLShortener.js index dcb50bf00..c17fc10a8 100644 --- a/src/Pages/URLShortener/URLShortener.js +++ b/src/Pages/URLShortener/URLShortener.js @@ -12,6 +12,8 @@ export default function URLShortenerPage(props) { const [showUrlInput, setShowUrlInput] = useState(false); const [useGeneratedAlias, setUseGeneratedAlias] = useState(true); const [alias, setAlias] = useState(''); + const [useExpirationDate, setUseExpirationDate] = useState(true); + const [expirationDate, setExpirationDate] = useState(''); const [allUrls, setAllUrls] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(); @@ -61,6 +63,7 @@ export default function URLShortenerPage(props) { const response = await createUrl( url.trim(), alias.trim(), + expirationDate.trim(), props.user.token ); if (!response.error) { @@ -68,6 +71,7 @@ export default function URLShortenerPage(props) { setAliasTaken(false); setUrl(''); setAlias(''); + setExpirationDate(''); setShowUrlInput(false); setTotal(total + 1); setSuccessMessage(`Sucessfully created shortened link ${response.responseData.link}`); @@ -149,6 +153,12 @@ export default function URLShortenerPage(props) { } }, [useGeneratedAlias]); + useEffect(() => { + if(useExpirationDate) { + setExpirationDate(''); + } + }, [useExpirationDate]); + useEffect(() => { if (!showUrlInput) { setAlias(''); @@ -271,6 +281,16 @@ export default function URLShortenerPage(props) { + +
+
+ +
+
+ {!useGeneratedAlias && (
@@ -288,6 +308,25 @@ export default function URLShortenerPage(props) {
)} + + {!useExpirationDate && ( + +
+ +
+ setExpirationDate(e.target.value + ':00')} + type="datetime-local" + className={INPUT_CLASS} + /> +
+
+ )} @@ -425,6 +464,7 @@ export default function URLShortenerPage(props) { {[ { title: 'URL', className: 'text-base text-white/70', columnName: 'alias' }, { title: 'Created At', className: 'text-base text-white/70 hidden text-center sm:table-cell', columnName: 'created_at' }, + { title: 'Expires At', className: 'text-base text-white/70 text-center', columnName: 'expires_at' }, { title: 'Times Used', className: 'text-base text-white/70 text-center', columnName: 'used' }, { title: 'Delete', className: 'text-base text-white/70 text-center' } ].map(({ title, className, columnName = null }) => ( @@ -458,7 +498,23 @@ export default function URLShortenerPage(props) {
- {new Date(url.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+ {new Date(url.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} + + + +
+ {(() => { + if (url.expires_at === null) { + return ( +
No Expiration Date
+ ); + } else { + return ( +
{new Date(url.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+ ); + } + })()} +