This page has not been fully implemented.\r\n Please come back and look again later!
\r\n{album.desc}
\r\n{warningText}
\r\nSelect photos to enable create button
\r\n \r\n );\r\n return (Creating album and uploading photo {totalUploaded} of {selectedFiles.length}
\r\n );\r\n }\r\n\r\n\r\n}","import React, { useContext, useState, useEffect } from 'react';\r\n// import {EXIF} from 'exif-js';\r\nimport {\r\n MDBRow,\r\n MDBCol,\r\n MDBBtn,\r\n MDBInput,\r\n MDBTextArea,\r\n MDBSpinner,\r\n MDBFile,\r\n} from 'mdb-react-ui-kit';\r\nimport { remove } from 'aws-amplify/storage';\r\nimport { generateClient } from 'aws-amplify/api';\r\nimport { useAuthenticator } from '@aws-amplify/ui-react';\r\n\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { Link } from 'react-router-dom';\r\nimport Tag from './Tag';\r\n\r\n\r\n// Database\r\nimport {\r\n updateAlbums, deleteAlbums, deleteImages,\r\n createAlbumTags,\r\n createAlbumTagsAlbums, deleteAlbumTagsAlbums,\r\n createUrl, deleteUrl\r\n} from '../graphql/mutations';\r\nimport { getAlbums, imagesByAlbumsID } from '../graphql/queries';\r\n\r\n// Helpers\r\nimport { fetchAllAlbumTags } from '../helpers/loaders';\r\nimport { urlhelperEncode, getAlbumFromAlbumUrl } from '../helpers/urlhelper';\r\nimport uploadImages from '../helpers/uploadImages';\r\nimport currentUser from '../helpers/CurrentUser';\r\n\r\n\r\n\r\nconst client = generateClient({\r\n authMode: 'userPool'\r\n});\r\n\r\nconst publicClient = generateClient({\r\n authMode: 'apiKey'\r\n});\r\n\r\n\r\n\r\nexport default function EditAlbum() {\r\n const [selectedFiles, setSelectedFiles] = useState([]);\r\n const [deleting, setDeleting] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [allTags, setAllTags] = useState([]);\r\n const [isAdmin, setIsAdmin] = useState(false);\r\n const [currentTags, setCurrentTags] = useState([]);\r\n\r\n\r\n const [totalUploaded, setTotalUploaded] = useState(0);\r\n const navigate = useNavigate();\r\n\r\n const [currentAlbum, setCurrentAlbum] = useState(null);\r\n let { album_url } = useParams();\r\n const adminObject = new currentUser();\r\n\r\n const { user } = useAuthenticator((context) => [context]);\r\n\r\n useEffect(() => {\r\n adminObject.isAdmin(setIsAdmin);\r\n }, []);\r\n\r\n useEffect(() => {\r\n getAlbum();\r\n fetchTags();\r\n if (!isAdmin) {\r\n return;;\r\n }\r\n }, [album_url]);\r\n\r\n\r\n // tracks files uploaded by clicker, sets state object\r\n async function setFiles(event) {\r\n const files = event.target.files;\r\n setSelectedFiles(files);\r\n }\r\n\r\n async function getAlbum() {\r\n\r\n // Get album tags connections by album ID here\r\n const curAl = await getAlbumFromAlbumUrl(album_url);\r\n setCurrentAlbum(curAl);\r\n\r\n const t = Object.fromEntries(curAl.albumtagss.items.map((item, i) => [item.albumTagsId, i]));\r\n setCurrentTags(t);\r\n }\r\n\r\n // Updates title, description, and date fields\r\n // Doesn't error handle if user deletes date and title, need to fix\r\n async function updateAlbum(event) {\r\n event.preventDefault();\r\n setIsLoading(true);\r\n if (deleting) return;\r\n const form = new FormData(event.target);\r\n const date = form.get(\"date\") + 'T00:00:00.000Z';\r\n const data = {\r\n id: currentAlbum.id,\r\n title: form.get(\"title\"),\r\n desc: form.get(\"desc\"),\r\n date: date,\r\n };\r\n const response = await client.graphql({\r\n query: updateAlbums,\r\n variables: { input: data },\r\n });\r\n\r\n try {\r\n await client.graphql({\r\n query: deleteUrl,\r\n variables: {\r\n input: {\r\n id: urlhelperEncode(currentAlbum)\r\n }\r\n }\r\n })\r\n } catch (error) {\r\n console.log('failed to delete old url object', error)\r\n }\r\n\r\n try {\r\n await client.graphql({\r\n query: createUrl,\r\n variables: {\r\n input: {\r\n id: urlhelperEncode(response.data.updateAlbums),\r\n urlAlbumId: currentAlbum.id\r\n }\r\n }\r\n })\r\n } catch (error) {\r\n console.log('new url object not created', error);\r\n // should add corrective actions here\r\n }\r\n\r\n\r\n if (selectedFiles.length > 0) {\r\n await uploadImages(currentAlbum, selectedFiles, setTotalUploaded);\r\n }\r\n console.log(`Updated album: ${form.get(\"title\")}`);\r\n // After save, navigates to album\r\n navigate('../../albums/'.concat(urlhelperEncode(response.data.updateAlbums)));\r\n }\r\n\r\n async function deleteAlbum(id) {\r\n setDeleting(true);\r\n // Make sure you really want to delete...\r\n if (!window.confirm(\"Are you sure you want to delete this album?\")) return;\r\n\r\n // Gets all the images associated with the old album ID\r\n const imgs = await publicClient.graphql({\r\n query: imagesByAlbumsID,\r\n variables: { albumsID: id }\r\n });\r\n\r\n const albumToDelete = await publicClient.graphql({\r\n query: getAlbums,\r\n variables: {\r\n id: id\r\n }\r\n })\r\n\r\n // Deletes albums associated with old album\r\n imgs.data.imagesByAlbumsID.items.map(async (img) => {\r\n await remove({\r\n key: `${img.id}-${img.filename}`\r\n });\r\n await client.graphql({\r\n query: deleteImages,\r\n variables: { input: { id: img.id } },\r\n });\r\n });\r\n await client.graphql({\r\n query: deleteAlbums,\r\n variables: { input: { id } },\r\n });\r\n\r\n const urlToDelete = urlhelperEncode(albumToDelete.data.getAlbums);\r\n\r\n await client.graphql({\r\n query: deleteUrl,\r\n variables: {\r\n input: { id: urlToDelete }\r\n }\r\n })\r\n console.log('album successfully deleted')\r\n // Go to root after deleting album\r\n navigate('../../');\r\n }\r\n\r\n\r\n\r\n // //////////////////////////////////////\r\n // TAGS\r\n // /////////////////////////////////////\r\n\r\n async function fetchTags() {\r\n const tags = await fetchAllAlbumTags();\r\n setAllTags(tags);\r\n }\r\n\r\n const handleCreateTagEnter = event => {\r\n // event.preventDefault();\r\n if (event.key === 'Enter') {\r\n console.log(`enter key pressed, tag name is ${event.target.value}`);\r\n createTag(event.target.value);\r\n event.target.value = \"\";\r\n }\r\n\r\n }\r\n\r\n async function createTag(name) {\r\n for (let i = 0; i < allTags.length; i++) {\r\n if (allTags[i].title.toUpperCase() === name.toUpperCase()) {\r\n alert(\"Cannot create duplicate tags!\")\r\n return;\r\n }\r\n }\r\n const data = {\r\n title: name,\r\n privacy: 'public',\r\n };\r\n await client.graphql({\r\n query: createAlbumTags,\r\n variables: { input: data },\r\n });\r\n fetchTags();\r\n }\r\n\r\n async function addTagToAlbum(tag) {\r\n const data = {\r\n albumsId: currentAlbum.id,\r\n albumTagsId: tag.id,\r\n }\r\n await client.graphql({\r\n query: createAlbumTagsAlbums,\r\n variables: { input: data },\r\n })\r\n\r\n }\r\n\r\n async function removeTagFromAlbum(tag) {\r\n const relationIdToRemove = currentAlbum.albumtagss.items[currentTags[tag.id]];\r\n const data = {\r\n id: relationIdToRemove.id\r\n }\r\n await client.graphql({\r\n query: deleteAlbumTagsAlbums,\r\n variables: { input: data },\r\n })\r\n }\r\n\r\n\r\n function Loading() {\r\n return (<>\r\nSaving album and uploading image {totalUploaded} of {selectedFiles.length}
:Saving album
}\r\n );\r\n }\r\n\r\n if (!currentAlbum) {\r\n return (\r\nSorry, an unexpected error has occurred.
\r\n\r\n {error.statusText || error.message}\r\n
\r\nManage Tags
\n{tag.title}
\nChange branch
\n \n\r\n I created this site both to share my love for photography and also as an experiment to renew my coding skills. If you want to find out more about how I built this\r\n website, please check out my Github for this project!\r\n
\r\nAn account allows you to download images.
\r\nRight now, that is all it does!
\r\nPublic account creation is currently disabled, so please reach out if you would like an account
\r\n