\n e.stopPropagation()}\n ref={ref}\n >\n
\n \n ,\n document.getElementById(\"root\")\n );\n};\n\nexport default Modal;\n","import React from \"react\";\n\n// Import React FilePond\nimport { FilePond, registerPlugin } from \"react-filepond\";\n\n// Import the plugin code\nimport FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\n\n// Import FilePond styles\nimport \"filepond/dist/filepond.min.css\";\n\n// Redux Imports\nimport PropTypes from \"prop-types\";\nimport { connect } from \"react-redux\";\nimport { uploadSheet } from \"../../Redux/Actions/dataActions\";\n\nregisterPlugin(FilePondPluginFileValidateType);\n\nfunction DragNDrop({ giveModalData }) {\n //const [files, setFiles] = useState(undefined)\n\n const uploadFinish = (files) => {\n giveModalData(files[0].file);\n };\n\n const removeFile = () => {\n giveModalData(undefined);\n };\n\n return (\n \n
\n {props.title}
\n{props.children}
\n \n {\n uploadFinish(files);\n }}\n onremovefile={removeFile}\n allowMultiple={false}\n server={{\n process: (\n fieldName,\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer,\n options\n ) => {\n load();\n },\n }}\n maxFiles={1}\n name=\"files\"\n labelIdle='Drag & Drop your file or Browse'\n credits={false}\n allowFileTypeValidation={true}\n acceptedFileTypes={[\"application/pdf\"]}\n />\n
\n );\n}\n\nDragNDrop.propTypes = {\n uploadSheet: PropTypes.func.isRequired,\n};\n\nconst mapActionsToProps = {\n uploadSheet,\n};\n\nconst mapStateToProps = (state) => ({});\n\nexport default connect(mapStateToProps, mapActionsToProps)(DragNDrop);\n","import React, { useState, useEffect } from \"react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport DragNDrop from \"../../Upload/DragNDrop\";\nimport Button from \"@material-ui/core/Button\";\n\nimport { connect } from \"react-redux\";\nimport { uploadSheet, resetData } from \"../../../Redux/Actions/dataActions\";\n\nfunction ModalContent(props) {\n const [disabled, setDisabled] = useState(true);\n\n const [requestData, setRequestData] = useState({\n composer: \"\",\n sheetName: \"\",\n releaseDate: \"1999-12-31\",\n });\n\n const [uploadFile, setUploadFile] = useState(undefined);\n\n const giveModalData = (file) => {\n setUploadFile(file);\n };\n\n useEffect(() => {\n if (\n requestData.composer !== \"\" &&\n requestData.sheetName !== \"\" &&\n uploadFile !== undefined\n ) {\n setDisabled(false);\n } else if (uploadFile === undefined) {\n setDisabled(true);\n }\n }, [requestData, uploadFile]);\n\n const handleChange = (event) => {\n setRequestData({\n ...requestData,\n [event.target.name]: event.target.value,\n });\n };\n\n const sendRequest = () => {\n const newData = {\n ...requestData,\n uploadFile: uploadFile,\n };\n\n const makeCalls = (_callback) => {\n props.uploadSheet(newData, () => {\n props.resetData();\n props.onClose();\n _callback();\n });\n };\n\n makeCalls(() => window.location.reload());\n };\n\n return (\n \n \n \n Upload\n \n
\n );\n}\n\nconst mapActionsToProps = {\n uploadSheet,\n resetData,\n};\n\nconst mapStateToProps = (state) => ({});\n\nexport default connect(mapStateToProps, mapActionsToProps)(ModalContent);\n","import React, { Fragment, useEffect, useState } from \"react\";\nimport \"./SideBar.css\";\n\nimport { setSidebar, getVersion } from \"../../Redux/Actions/uiActions\";\nimport {\n getSheets,\n getComposers,\n getComposerPage,\n getSheetPage,\n resetData,\n} from \"../../Redux/Actions/dataActions\";\nimport { logoutUser } from \"../../Redux/Actions/userActions\";\nimport { connect } from \"react-redux\";\nimport Modal from \"./Modal/Modal\";\nimport ModalContent from \"./Modal/ModalContent\";\nimport \"./FalseVersion.css\";\nimport axios from \"axios\";\n\nfunction SideBar(props) {\n const [uploadModal, setUploadModal] = useState(false);\n const [falseVersion, setFalseVersion] = useState(false);\n\n const { sidebar } = props;\n\n const onClickBtn = () => {\n props.setSidebar();\n };\n\n useEffect(() => {\n props.getVersion();\n\n fetch(\"https://api.github.com/repos/SheetAble/SheetAble/releases/latest\")\n .then((res) => {\n return res.json();\n })\n .then((data) => {\n axios.get(\"/version\").then((versionRes) => {\n setFalseVersion(versionRes.data.data !== data.tag_name);\n });\n });\n }, []);\n\n return (\n \n There is a new version of SheetAble available!{\" \"}\n \n Pull it now\n \n
\n setFalseVersion(false)}>\n \n )}\n\n \n
\n \n \n
\n \n
\n \n SheetAble {props.version}\n
\n - \n
- \n \n \n Home\n \n Home\n \n\n
- \n \n \n Sheets\n \n Sheets\n \n\n
- \n \n \n Composer\n \n Composer\n \n\n
- \n \n \n Search\n \n Search\n \n
- \n
setUploadModal(true)} className=\"cursor\">\n
\n Upload\nsetUploadModal(false)} />\n \n \n Upload\n \n - \n
- \n \n \n Settings\n \n Settings\n \n
\n
\n \n {\n props.logoutUser();\n }}\n >\n \n
\n \n
\n \n \n
\n \n Account Email:\n
\n \n {props.userData.email}\n
\n \n
\n \n );\n}\n\nexport default SheetBox;\n","import React, { useState, useEffect } from \"react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Button from \"@material-ui/core/Button\";\n\nimport { connect } from \"react-redux\";\nimport { editComposer, resetData } from \"../../Redux/Actions/dataActions\";\n\n// Import React FilePond\nimport { FilePond, registerPlugin } from \"react-filepond\";\n\n// Import the plugin code\nimport FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\n\n// Import FilePond styles\nimport \"filepond/dist/filepond.min.css\";\n\nregisterPlugin(FilePondPluginFileValidateType);\n\nfunction ModalContent(props) {\n const [name, setName] = useState(props.composer.name);\n const [epoch, setEpoch] = useState(props.composer.epoch);\n const [disabled, setDisabled] = useState(true);\n\n const handleChange = (event) => {\n if (event.target.name === \"name\") {\n setName(event.target.value);\n } else {\n setEpoch(event.target.value);\n }\n };\n\n useEffect(() => {\n if (name !== props.composer.name || epoch !== props.composer.epoch) {\n setDisabled(false);\n }\n }, [name, epoch]);\n\n const sendRequest = () => {\n props.editComposer(\n props.composer.safe_name,\n name,\n epoch,\n uploadFile,\n () => {\n props.resetData();\n window.location.replace(\"/\");\n }\n );\n };\n\n const [files, setFiles] = useState([]);\n const [uploadFile, setUploadFile] = useState(undefined);\n\n useEffect(async () => {\n if (files[0] !== undefined) {\n const resizedImage = new File(\n [dataURItoBlob(await readPhoto(files[0].file))],\n \"name.png\"\n );\n setUploadFile(resizedImage);\n setDisabled(false);\n }\n }, [files]);\n\n const readPhoto = async (photo) => {\n const canvas = document.createElement(\"canvas\");\n const img = document.createElement(\"img\");\n\n // create img element from File object\n img.src = await new Promise((resolve) => {\n const reader = new FileReader();\n reader.onload = (e) => resolve(e.target.result);\n reader.readAsDataURL(photo);\n });\n await new Promise((resolve) => {\n img.onload = resolve;\n });\n\n // draw image in canvas element\n canvas.width = 200;\n canvas.height = 200;\n canvas.getContext(\"2d\").drawImage(img, 0, 0, canvas.width, canvas.height);\n let image = canvas.toDataURL(\"image/png\");\n return image;\n };\n\n function dataURItoBlob(dataURI) {\n // convert base64 to raw binary data held in a string\n // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this\n var byteString = atob(dataURI.split(\",\")[1]);\n\n // separate out the mime component\n var mimeString = dataURI.split(\",\")[0].split(\":\")[1].split(\";\")[0];\n\n // write the bytes of the string to an ArrayBuffer\n var ab = new ArrayBuffer(byteString.length);\n var ia = new Uint8Array(ab);\n for (var i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n\n //Old Code\n //write the ArrayBuffer to a blob, and you're done\n //var bb = new BlobBuilder();\n //bb.append(ab);\n //return bb.getBlob(mimeString);\n\n //New Code\n return new Blob([ab], { type: mimeString });\n }\n\n return (\n \n {sheet.sheet_name}\n
\n \n {sheet.composer}\n
\n \n \n\n {\n setFiles(f);\n }}\n allowMultiple={false}\n server={{\n process: (\n fieldName,\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer,\n options\n ) => {\n load();\n },\n }}\n maxFiles={1}\n name=\"files\"\n labelIdle='Drag & Drop your 200x200 image or Browse'\n credits={false}\n allowFileTypeValidation={true}\n acceptedFileTypes={[\"image/png\"]}\n />\n\n \n Edit Composer\n \n
\n );\n}\n\nconst mapActionsToProps = {\n editComposer,\n resetData,\n};\n\nconst mapStateToProps = (state) => ({});\n\nexport default connect(mapStateToProps, mapActionsToProps)(ModalContent);\n","import React, { Fragment, useState, useEffect } from \"react\";\nimport { useParams } from \"react-router\";\nimport { findComposerByPages, getCompImgUrl } from \"../../Utils/utils\";\nimport { connect } from \"react-redux\";\nimport {\n getSheetPage,\n setComposerPage,\n getComposerPage,\n deleteComposer,\n resetData,\n} from \"../../Redux/Actions/dataActions\";\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport DeleteIcon from \"@material-ui/icons/Delete\";\nimport \"./Composer.css\";\n\nimport SideBar from \"../Sidebar/SideBar\";\nimport SheetBox from \"../SheetsPage/Components/SheetBox\";\nimport { IconButton } from \"@material-ui/core\";\nimport Modal from \"../Sidebar/Modal/Modal\";\nimport ModalContent from \"./ModalContent\";\n\nfunction Composer({\n composerPages,\n getSheetPage,\n composers,\n composerPage,\n setComposerPage,\n getComposerPage,\n totalComposerPages,\n deleteComposer,\n resetData,\n}) {\n const { safeComposerName } = useParams();\n\n const [composer, setComposer] = useState(\n findComposerByPages(safeComposerName, composerPages)\n );\n\n const [inRequest, setInRequest] = useState(false);\n const [imgUrl, setImgUrl] = useState(undefined);\n\n const [loading, setLoading] = useState(true);\n\n const getData = () => {\n if (\n (composer === undefined || composer.sheets === undefined) &&\n !inRequest\n ) {\n setInRequest(true);\n getComposerPagesData(() => {\n getSheetsForComposer();\n });\n } else if (composer !== undefined && composer.sheets !== undefined) {\n setInRequest(false);\n setLoading(false);\n }\n };\n\n const getSheetsForComposer = () => {\n const data = {\n page: 1,\n sortBy: \"updated_at desc\",\n composer: safeComposerName,\n };\n\n getSheetPage(data, () => {\n setComposer(findComposerByPages(safeComposerName, composerPages));\n });\n };\n\n const getComposerPagesData = (_callback) => {\n if (\n composerPage === undefined ||\n composerPage < 0 ||\n composerPage > totalComposerPages\n ) {\n setComposerPage(1);\n }\n\n const data = {\n page: composerPage,\n sortBy: \"updated_at desc\",\n };\n\n getComposerPage(data, () => _callback());\n };\n\n useEffect(() => {\n setComposer(findComposerByPages(safeComposerName, composerPages));\n if (composer !== undefined && composer.sheets !== undefined) {\n setInRequest(false);\n setLoading(false);\n }\n }, [composerPages]);\n\n useEffect(() => {\n if (!loading) {\n setImgUrl(getCompImgUrl(composer.portrait_url));\n }\n\n // Change Page Title\n document.title = `SheetAble - ${\n composer === undefined ? \"Composer\" : composer.name\n }`;\n }, [loading]);\n\n useEffect(() => {\n getData();\n });\n\n const [modal, setModal] = useState(false);\n\n return (\n \n {!loading ? (\n
\n \n 
\n setModal(true)}\n className=\"edit\"\n disabled={composer.name === \"Unknown\"}\n >\n \n deleteComposer(composer.safe_name, () => {\n resetData();\n window.location.replace(\"/\");\n })\n }\n >\n setModal(false)} show={modal}>\n setModal(false)}\n composer={composer}\n />\n \n
\n ) : (\n \n {composer.name}
\n{composer.epoch}
\n- \n {composer.sheets === undefined\n ? getData()\n : composer.sheets.map((sheet) => {\n return
loading
\n )}\n\n \n
\n \n );\n}\n\nexport default ComposerBox;\n","import React, { useEffect, useState } from \"react\";\n\nimport LoadingAnimation from \"../../../Images/Animations/Loading.svg\";\nimport { useHistory } from \"react-router\";\nimport { getCompImgUrl } from \"../../../Utils/utils\";\n\nfunction RandomComposerSelection({ composerPages, page }) {\n const [loading, setLoading] = useState(true);\n\n const [composer, setComposer] = useState(undefined);\n const [imgUrl, setImgUrl] = useState(undefined);\n\n const [bubblyButton, setBubblyButton] = useState(\"bubbly-button\");\n\n const pickComposer = () => {\n setLoading(true);\n const comp =\n composerPages[page][\n Math.floor(Math.random() * composerPages[page].length)\n ];\n setImgUrl(getCompImgUrl(comp.portrait_url));\n return comp;\n };\n\n useEffect(() => {\n setComposer(pickComposer());\n\n setLoading(false);\n }, []);\n\n var animateButton = function (e) {\n e.preventDefault();\n //reset animation\n\n setBubblyButton(\"bubbly-button\");\n\n setBubblyButton(\"bubbly-button animate\");\n\n setComposer(pickComposer());\n setLoading(false);\n\n setTimeout(function () {\n setBubblyButton(\"bubbly-button\");\n }, 700);\n };\n\n let history = useHistory();\n\n return (\n \n \n {composer.name}\n
\n \n {composer.epoch}\n
\n \n {loading ? (\n 
\n ) : (\n
\n );\n}\n\nexport default RandomComposerSelection;\n","import React, { useState } from \"react\";\n\nimport Modal from \"../Sidebar/Modal/Modal\";\nimport ModalContent from \"../Sidebar/Modal/ModalContent\";\n\nfunction NoSheets() {\n const [uploadModal, setUploadModal] = useState(false);\n\n return (\n \n
\n )}\n \n history.push(`/composer/${composer.safe_name}`)}\n />\n
\n \n \n {composer.name}\n
\n \n {composer.epoch}\n
\n \n setUploadModal(false)}\n show={uploadModal}\n >\n setUploadModal(false)} />\n \n
\n );\n}\n\nexport default NoSheets;\n","import React, { Fragment, useEffect, useState } from \"react\";\n\nimport SideBar from \"../Sidebar/SideBar\";\nimport ComposerBox from \"./Components/ComposerBox\";\n\nimport { connect } from \"react-redux\";\nimport {\n getComposerPage,\n incrementComposerPage,\n setComposerPage,\n decrementComposerPage,\n} from \"../../Redux/Actions/dataActions\";\n\nimport \"./ComposersPage.css\";\nimport RandomComposerSelection from \"./Components/RandomComposerSelection\";\nimport NoSheets from \"../NotFound/NoSheets\";\n\nfunction ComposersPage({\n getComposerPage,\n composerPages,\n incrementComposerPage,\n setComposerPage,\n decrementComposerPage,\n composerPage,\n totalComposerPages,\n}) {\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n getData();\n\n // Change Page Title\n document.title = `SheetAble - Your Composers`;\n }, []);\n\n const getData = () => {\n if (\n composerPage === undefined ||\n composerPage < 0 ||\n composerPage > totalComposerPages\n ) {\n setComposerPage(1);\n }\n\n const data = {\n page: composerPage,\n sortBy: \"updated_at desc\",\n };\n\n if (\n composerPages === undefined ||\n composerPages[composerPage] === undefined\n ) {\n getComposerPage(data, () => setLoading(false));\n }\n };\n\n const svgDec = (e) => {\n e.preventDefault();\n if (composerPage !== 1) {\n decrementComposerPage();\n getData();\n }\n };\n\n const svgInc = (e) => {\n e.preventDefault();\n if (composerPage !== totalComposerPages) {\n incrementComposerPage();\n getData();\n }\n };\n\n return (\n \n
\n Oops!
\nUpload Sheets to begin
\nsetUploadModal(true)} className=\"cursor\">\n Upload Sheet\n
\n\n
\n ) : (\n \n Composers in your library\n
\n Recently Added\n
\n \n Recently Added\n
\n
\n\n - \n {composerPages[composerPage] === undefined\n ? getData()\n : composerPages[composerPage].map((composer) => {\n return (\n
\n \n \n
\n Loading...
\n )}\n \n\n
\n \n );\n });\n\n return \n {sheet.sheet_name}\n
\n \n {sheet.composer}\n
\n - {sheetItems}
\n \n
\n \n );\n });\n\n return \n \n {composer.name}\n
\n \n {composer.epoch}\n
\n - {composerItems}
\n
\n );\n\n const sheetsFalse = (\n \n \n
\n \n Recently Added Sheets\n\n
\n\n
\n \n\n
\n New Composers\n
\n
\n \n
\n
\n );\n\n const loadingJSX = loading
;\n\n return (\n\n
\n \n
\n \n
\n \n Go To Homepage\n \n Oops!
\n404 - The Page can't be found
\n\n
\n );\n};\n\nexport default Ping;\n","import React from \"react\";\nimport { Redirect } from \"react-router\";\n\nfunction LoginRedirect() {\n return \n
\n {notification}
\n\n \n\n \n \n Create Account\n \n
\n );\n}\n\nexport default CreateAccountContent;\n","import React from 'react'\nimport { IconButton } from '@mui/material';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport axios from 'axios';\n\nexport default function RemoveButton(params) {\n return (\n \n \n sendReq(userId, emailValue, passwordValue)}\n >\n Update User\n \n
\n );\n}\n\nconst sendReq = (userId, email, password) => {\n console.log(email, password);\n axios\n .put(`/users/${userId}`, { email: email, password: password })\n .then((res) => {\n window.location.reload();\n })\n .catch((err) => {\n console.error(err);\n });\n};\n\nexport default ModalContent;\n","import { Button } from \"@material-ui/core\";\nimport { DataGrid } from \"@mui/x-data-grid\";\nimport { formatDistance } from \"date-fns\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { getUsersData } from \"../../../Redux/Actions/dataActions\";\nimport { createUser } from \"../../../Redux/Actions/userActions\";\nimport Modal from \"../../Sidebar/Modal/Modal\";\nimport CreateAccountContent from \"../CreateAccountContent\";\nimport RemoveButton from \"./Buttons/RemoveButton\";\nimport SendPasswordResetButton from \"./Buttons/SendPasswordResetButton\";\nimport UpdateButton from \"./Buttons/UpdateButton\";\n\nconst columns = [\n { field: \"id\", headerName: \"ID\", width: 70 },\n { field: \"email\", headerName: \"Email\", width: 200 },\n { field: \"role\", headerName: \"Role\", width: 150 },\n { field: \"createdAt\", headerName: \"Created At\", width: 150 },\n { field: \"updatedAt\", headerName: \"Updated At\", width: 150 },\n {\n field: \"updateRole\",\n headerName: \"Update\",\n width: 140,\n renderCell: UpdateButton,\n },\n {\n field: \"sendPassword\",\n headerName: \"Reset Password\",\n width: 140,\n renderCell: SendPasswordResetButton,\n },\n {\n field: \"remove\",\n headerName: \"Remove\",\n width: 140,\n renderCell: RemoveButton,\n },\n];\n\nfunction UserManagement({ getUsersData, users, createUser }) {\n React.useEffect(() => {\n // Get new users data on load\n getUsersData();\n }, []);\n\n const [rows, setRows] = React.useState([]);\n const [showCreateUserModal, setShowCreateUserModal] = React.useState(false);\n\n React.useEffect(() => {\n let mappedUsers = [];\n users.map((user) => {\n const u = {\n id: user.id,\n email: user.email,\n role: user.role === 0 ? \"Administrator\" : \"User\",\n createdAt: formatDistance(new Date(user.created_at), new Date(), {\n addSuffix: true,\n }),\n updatedAt: formatDistance(new Date(user.updated_at), new Date(), {\n addSuffix: true,\n }),\n };\n\n return mappedUsers.push(u);\n });\n setRows(mappedUsers);\n }, []);\n\n return (\n \n
\n \n Settings\n
\n \n Account Status: {admin ? \"Admin\" : \"Non Admin\"}\n {!admin && (\n
\n\n {admin ? (\n \n \n Account Status: {admin ? \"Admin\" : \"Non Admin\"}\n {!admin && (\n
\n {\" \"}\n Currently no settings available for non admins\n
\n )}\n \n \n
\n ) : (\n \n 
\n
\n )}\n \n \n
\n );\n}\n\nconst mapActionsToProps = {\n updateSheet,\n resetData,\n deleteSheet,\n};\n\nconst mapStateToProps = (state) => ({});\n\nexport default connect(mapStateToProps, mapActionsToProps)(ModalContent);\n","export const dominantColors = [\n \"#FF6A6A\",\n \"#0DAB76\",\n \"#00E5E8\",\n \"#5C5D8D\",\n \"#99B2DD\",\n \"#9381FF\",\n \"#B8B8FF\",\n]; // list of dominant colors for the tags\n","import Button from \"@material-ui/core/Button\";\nimport TextField from \"@material-ui/core/TextField\";\nimport React, { useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n addNewTag,\n deleteTag,\n editInfoText,\n} from \"../../../Redux/Actions/dataActions\";\n\nfunction ModalContent(props) {\n const [tagName, setTagName] = useState(\"\");\n const [infoText, setInfoText] = useState(\n \"Write a short information text about your sheet.\"\n );\n const [value, setValue] = useState(props.tags[0]);\n const [showInfoEdit, setShowInfoEdit] = useState(false);\n\n const infoEdit = (\n \n {\n uploadFinish(files);\n }}\n allowMultiple={false}\n server={{\n process: (\n fieldName,\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer,\n options\n ) => {\n load();\n },\n }}\n maxFiles={1}\n name=\"files\"\n labelIdle='Drag & Drop your files or Browse'\n credits={false}\n allowFileTypeValidation={true}\n acceptedFileTypes={[\"application/pdf\"]}\n />\n
\n \n \n Upload\n \n \n
\n \n \n
\n );\n\n if (!showInfoEdit) {\n return (\n \n setShowInfoEdit(false)}\n >\n Back\n \n props.editInfoText(infoText, props.sheetName)}\n >\n Edit Info Box\n \n
\n \n
\n );\n }\n return infoEdit;\n}\n\nconst mapActionsToProps = {\n addNewTag,\n deleteTag,\n editInfoText,\n};\n\nconst mapStateToProps = (state) => ({});\n\nexport default connect(mapStateToProps, mapActionsToProps)(ModalContent);\n","import React, { useState } from \"react\";\nimport \"./InformationCard.css\";\nimport { dominantColors } from \"../../../Utils/colors\";\nimport { IconButton } from \"@material-ui/core\";\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport Modal from \"../../Sidebar/Modal/Modal\";\nimport ModalContent from \"./ModalContentTag.js\";\n\nfunction InformationCard({ infoText, tags, sheetName }) {\n const [modal, setModal] = useState(false);\n\n return (\n \n \n
\n \n props.addNewTag(tagName, props.sheetName)}\n >\n Add Tag\n \n setShowInfoEdit(true)}\n >\n Edit Info Box\n \n
\n \n \n props.deleteTag(value, props.sheetName)}\n >\n Delete Tag\n \n
\n \n
\n );\n}\n\nexport default InformationCard;\n","/*\n\tThis file needs to be rewritten soon due to being not properly readable anymore\n*/\n\nimport React, { useEffect, useState, Fragment } from \"react\";\nimport { useParams } from \"react-router-dom\";\n\nimport { Document, pdfjs, Page } from \"react-pdf\";\n\nimport SideBar from \"../Sidebar/SideBar\";\nimport \"./Sheet.css\";\n\nimport axios from \"axios\";\n\n/* Utils */\nimport {\n displayTimeAsString,\n findSheetByPages,\n findComposerByPages,\n findSheetBySheets,\n findComposerByComposers,\n getCompImgUrl,\n} from \"../../Utils/utils\";\n\n/* Redux stuff */\nimport { connect } from \"react-redux\";\nimport { store } from \"../../Redux/store\";\nimport { logoutUser } from \"../../Redux/Actions/userActions\";\nimport {\n getComposerPage,\n getSheetPage,\n setSheetPage,\n setComposerPage,\n} from \"../../Redux/Actions/dataActions\";\nimport { useHistory } from \"react-router-dom\";\n\nimport Modal from \"../Sidebar/Modal/Modal\";\nimport ModalContent from \"./Components/ModalContent\";\nimport InformationCard from \"./Components/InformationCard\";\n\n/* Activate global worker for displaying the pdf properly */\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n\nfunction Sheet({\n sheetPages,\n composerPages,\n sheets,\n composers,\n sheetPage,\n getSheetPage,\n totalSheetPages,\n setSheetPage,\n getComposerPage,\n composerPage,\n totalComposerPages,\n setComposerPage,\n}) {\n /* PDF Page width rendering */\n\n const windowHeight = 840;\n\n const [isDesktop, setDesktop] = useState(window.innerHeight > windowHeight);\n\n const updateMedia = () => {\n const nextDesktop = window.innerHeight > windowHeight;\n setDesktop(nextDesktop);\n };\n\n useEffect(() => {\n // Change Page Title\n document.title = `SheetAble - ${\n sheet.sheet_name === undefined ? \"Sheet\" : sheet.sheet_name\n }`;\n\n window.addEventListener(\"resize\", updateMedia);\n\n return () => window.removeEventListener(\"resize\", updateMedia);\n });\n\n let { safeSheetName, safeComposerName } = useParams();\n\n const getSheetDataReq = async (_callback) => {\n if (\n sheetPage === undefined ||\n sheetPages < 0 ||\n sheetPages > totalSheetPages\n ) {\n setSheetPage(1);\n }\n\n const data = {\n page: sheetPage,\n sortBy: \"updated_at desc\",\n };\n\n if (sheetPages === undefined || sheetPages[sheetPage] === undefined) {\n await getSheetPage(data, () => window.location.reload());\n }\n };\n\n const getComposerDataReq = async (_callback) => {\n if (\n composerPage === undefined ||\n composerPages < 0 ||\n composerPages > totalComposerPages\n ) {\n setComposerPage(1);\n }\n\n const data = {\n page: composerPage,\n sortBy: \"updated_at desc\",\n };\n\n if (\n composerPages === undefined ||\n composerPages[composerPage] === undefined\n ) {\n await getComposerPage(data, () => window.location.reload());\n }\n };\n\n const [pdf, setpdf] = useState(undefined);\n\n const bySheetPages = findSheetByPages(safeSheetName, sheetPages);\n const bySheets = findSheetBySheets(safeSheetName, sheets);\n\n const [sheet] = useState(\n bySheetPages === undefined\n ? bySheets === undefined\n ? getSheetDataReq()\n : bySheets\n : bySheetPages\n );\n\n const byComposerPages = findComposerByPages(safeComposerName, composerPages);\n const byComposers = findComposerByComposers(safeComposerName, composers);\n\n const [composer] = useState(\n byComposerPages === undefined\n ? byComposers === undefined\n ? getComposerDataReq()\n : byComposers\n : byComposerPages\n );\n\n const pdfRequest = () => {\n axios\n .get(`/sheet/pdf/${safeComposerName}/${safeSheetName}`, {\n responseType: \"arraybuffer\",\n })\n .then((res) => {\n setpdf(res);\n })\n .catch((err) => {\n if (err.request.status === 401) {\n store.dispatch(logoutUser());\n window.location.href = \"/login\";\n }\n if (err.request.status === 404) {\n window.location.href = \"/\";\n }\n });\n return pdf;\n };\n\n const [numPages, setNumPages] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages);\n setPageNumber(1);\n }\n\n function changePage(offset) {\n setPageNumber((prevPageNumber) => prevPageNumber + offset);\n }\n\n function previousPage(e) {\n e.target.blur();\n changePage(-1);\n }\n\n function nextPage(e) {\n e.target.blur();\n changePage(1);\n }\n\n let history = useHistory();\n\n const [pdfDownloadData, setPdfDownloadData] = useState({\n link: \"\",\n name: \"\",\n });\n\n function saveByteArray(reportName, byte) {\n var blob = new Blob([byte], { type: \"application/pdf\" });\n setPdfDownloadData({\n ...pdfDownloadData,\n link: window.URL.createObjectURL(blob),\n name: reportName,\n });\n }\n\n const [copyText, setCopyText] = useState(\"Click to Copy\");\n\n const handleClick = () => {\n setCopyText(copyText === \"Click to Copy\" ? \"Copied ✓\" : \"Click to Copy\");\n navigator.clipboard.writeText(window.location.href);\n };\n\n const [editModal, setEditModal] = useState(false);\n\n if (composer.portrait_url === undefined) {\n window.location.replace(\"/\");\n }\n const imgUrl = getCompImgUrl(composer.portrait_url);\n\n return (\n \n setModal(false)} show={modal}>\n setModal(false)}\n sheetName={sheetName}\n tags={tags}\n />\n \n
\n Information
\n {tags.map((tag) => (\n\n \n
\n ))}\n \n setModal(true)}>\n \n \n
\n \n {infoText}\n
\n \n
\n \n \n
}\n\n
\n \n
\n\n \n {sheet.sheet_name}\n
\n {sheet.composer}\n
\n\n \n {sheet.composer}\n
\n \n
\n\n \n \n <\n \n \n {pageNumber} of {numPages}\n \n \n >\n \n
\n \n history.push(`/composer/${composer.safe_name}`)}\n >\n \n
\n {isDesktop && \n {sheet.sheet_name}\n
\n\n \n Release Date:\n \n {\" \"}\n {displayTimeAsString(sheet.ReleaseDate)}\n \n
\n \n Uploaded At:\n \n {\" \"}\n {displayTimeAsString(sheet.created_at)}\n \n
\n \n Uploaded By:\n {sheet.uploader_id}\n
\n\n \n \n {copyText}\n
\n\n \n \n saveByteArray(sheet.sheet_name, pdf.data)}\n >\n Download\n \n \n\n \n Edit\n \n setEditModal(false)}\n show={editModal}\n >\n setEditModal(false)}\n uploadFile={pdf}\n sheet={sheet}\n />\n \n
\n \n \n {composer.name}\n {composer.epoch}\n
\n }\n\n
\n {loading ? (\n \n ) : (\n
\n );\n}\n\nexport default RandomPieceSelection;\n","import React, { Fragment, useEffect, useState } from \"react\";\n\nimport SideBar from \"../Sidebar/SideBar\";\nimport SheetBox from \"./Components/SheetBox\";\n\nimport { connect } from \"react-redux\";\nimport {\n getSheetPage,\n incrementSheetPage,\n setSheetPage,\n decrementSheetPage,\n} from \"../../Redux/Actions/dataActions\";\n\nimport \"./SheetsPage.css\";\nimport RandomPieceSelection from \"./Components/RandomPieceSelection\";\nimport NoSheets from \"../NotFound/NoSheets\";\n\nfunction SheetsPage({\n getSheetPage,\n sheetPages,\n incrementSheetPage,\n setSheetPage,\n decrementSheetPage,\n sheetPage,\n totalSheetPages,\n}) {\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n getData();\n // Change Page Title\n document.title = `SheetAble - Your Library`;\n }, []);\n\n const getData = () => {\n if (\n sheetPage === undefined ||\n sheetPages < 0 ||\n sheetPages > totalSheetPages\n ) {\n setSheetPage(1);\n }\n\n const data = {\n page: sheetPage,\n sortBy: \"updated_at desc\",\n };\n\n if (sheetPages === undefined || sheetPages[sheetPage] === undefined) {\n getSheetPage(data, () => setLoading(false));\n } else {\n setLoading(false);\n }\n };\n\n const svgDec = (e) => {\n e.preventDefault();\n if (sheetPage !== 1) {\n decrementSheetPage();\n getData();\n }\n };\n\n const svgInc = (e) => {\n e.preventDefault();\n if (sheetPage !== totalSheetPages) {\n incrementSheetPage();\n getData();\n }\n };\n\n return (\n \n
\n )}\n \n \n history.push(`sheet/${sheet.pdf_url.split(\"pdf/\").pop()}`)\n }\n />\n
\n \n \n {sheet.sheet_name}\n
\n \n {sheet.composer}\n
\n \n
\n ) : (\n \n Sheets in your library\n
\n Recent Uploads\n
\n \n Recent Uploads\n
\n
\n\n - \n {sheetPages[sheetPage] === undefined\n ? getData()\n : sheetPages[sheetPage].map((sheet) => {\n return (\n
\n \n \n
\n Loading...
\n )}\n \n\n
\n \n
\n \n
\n \n {/**/}\n Information\n
\n \n {/**/}\n Upload\n
\n \n {/**/}\n Conclusion\n
\n \n \n \n \n \n
\n \n \n {searchResponse.length === 0 ? (\n
\n );\n}\n\nfunction NoResults() {\n return (\n \n 
\n
\n There were no results found\n
\n );\n}\n\nfunction Results({ searchResponse }) {\n return (\n \n There were no results found\n
\n {searchResponse.map((sheet) => {\n return
\n );\n}\n\nexport default ResultBox;\n","import React, { Fragment, useState } from \"react\";\nimport SideBar from \"../Sidebar/SideBar\";\nimport \"./SearchPage.css\";\n\nimport { searchData } from \"../../Redux/Actions/dataActions\";\nimport { connect } from \"react-redux\";\nimport ResultBox from \"./ResultBox\";\n\nfunction SearchPage({ searchData }) {\n const [searchValue, setSearchValue] = useState(\"\");\n\n const [searchResponse, setSearchResponse] = useState([]);\n\n const handleSubmit = () => {\n if (searchValue !== \"\") {\n searchData(searchValue, (data) => {\n setSearchResponse(data);\n });\n }\n };\n\n /* Checks if Enter is pressed while in input */\n const handleKeyDown = (event) => {\n if (event.key === \"Enter\") {\n handleSubmit();\n }\n };\n\n return (\n \n \n \n
\n );\n}\n\nconst mapStateToProps = (state) => ({});\n\nconst mapActionsToProps = {\n searchData,\n};\n\nexport default connect(mapStateToProps, mapActionsToProps)(SearchPage);\n","import React, { Fragment, useEffect, useState } from \"react\";\nimport { useParams } from \"react-router\";\nimport SideBar from \"../Sidebar/SideBar\";\nimport { getTagSheets } from \"../../Redux/Actions/dataActions\";\nimport { connect } from \"react-redux\";\nimport { dominantColors } from \"../../Utils/colors\";\nimport \"./TagsPage.css\";\nimport SheetBox from \"../SheetsPage/Components/SheetBox\";\n\nfunction TagsPage({ getTagSheets }) {\n const { tagName } = useParams();\n const decoded = decodeURIComponent(tagName);\n\n const [sheets, setSheets] = useState([]);\n\n useEffect(() => {\n getTagSheets(decoded, (data) => {\n setSheets(data);\n });\n }, []);\n\n return (\n \n
\n \n
\n \n setSearchValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n \n
\n\n \n
\n \n
\n {decoded}
\n\n {sheets.length === 0 ? (\n
\n loading
\n ) : (\n sheets.map((sheet) => {\n return\n
\n );\n}\n","import { Button } from \"@material-ui/core\";\nimport TextField from \"@material-ui/core/TextField\";\nimport axios from \"axios\";\nimport React, { useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport \"./ForgotPassword.css\";\n\nexport default function ResetPasswordPage() {\n const [passwordValue, setPasswordVaule] = useState(\"\");\n const [confirmPasswordValue, setConfirmPasswordVaule] = useState(\"\");\n const [error, setError] = useState(0); // 0: nothing, 1: success; 2: err\n const { resetPasswordId } = useParams();\n\n const handleSubmit = () => {\n axios\n .post(\"/reset_password\", {\n password: passwordValue,\n passwordResetId: resetPasswordId,\n })\n .then((res) => {\n setError(1);\n window.location.href = \"/login\";\n })\n .catch((err) => {\n setError(2);\n console.log(err);\n });\n };\n\n return (\n \n setEmailValue(event.target.value) & setError(0)}\n error={error === 2}\n helperText={\n error === 2\n ? \"No account was found with this email.\"\n : error === 1 && \"Email was sent successfully.\"\n }\n />\n
\n Forgot your password?
\nNo problem, request a password reset to your email here.
\n\n handleSubmit()}\n >\n Send Email\n \n
\n \n
\n );\n}\n","// React Router Import\nimport React, { Fragment } from \"react\";\nimport { BrowserRouter as Router, Route, Switch } from \"react-router-dom\";\n\n// Pages and Components\nimport LoginPage from \"./Components/Authentication/LoginPage\";\nimport Composer from \"./Components/Composer/Composer\";\nimport ComposersPage from \"./Components/ComposersPage/ComposersPage\";\nimport HomePageProvider from \"./Components/Home/HomePageProvider\";\nimport PageNotFound from \"./Components/NotFound/PageNotFound\";\nimport Ping from \"./Components/Ping/Ping\";\nimport Redirect from \"./Components/Redirect/Redirect\";\nimport Settings from \"./Components/SettingsPage/Settings\";\nimport Sheet from \"./Components/Sheet/Sheet\";\nimport SheetsPage from \"./Components/SheetsPage/SheetsPage\";\nimport UploadPage from \"./Components/Upload/UploadPage\";\n\n// Redux\nimport { Provider } from \"react-redux\";\nimport { PersistGate } from \"redux-persist/integration/react\";\nimport { logoutUser } from \"./Redux/Actions/userActions\";\nimport { persistor, store } from \"./Redux/store\";\nimport { SET_AUTHENTICATED } from \"./Redux/types\";\n\n// Axios\nimport axios from \"axios\";\n\n// JWT\nimport jwtDecode from \"jwt-decode\";\n\n// CSS\nimport \"./App.css\";\n\n// eslint-disable-next-line\n//import Logo from \"./Images/logo.png\";\nimport SearchPage from \"./Components/SearchPage/SearchPage\";\nimport TagsPage from \"./Components/TagsPage/TagsPage\";\n//import ForgotPassword from \"./Components/Authentication/ForgotPasswordPage\";\nimport ForgotPasswordPage from \"./Components/Authentication/ForgotPasswordPage\";\nimport ResetPasswordPage from \"./Components/Authentication/ResetPasswordPage\";\n\n// Check if started in development mode, so you can modify baseURL accordingly\nif (!process.env.NODE_ENV || process.env.NODE_ENV === \"development\") {\n axios.defaults.baseURL = \"http://localhost:8080/api\";\n} else {\n axios.defaults.baseURL = \"/api\";\n}\n\n// Load token from localstorage and check it\nconst token = localStorage.FBIdToken;\nif (token) {\n let decodedToken = undefined;\n try {\n decodedToken = jwtDecode(token);\n } catch {\n decodedToken = undefined;\n }\n\n if (decodedToken !== undefined) {\n const ts = Date.now();\n const currentTime = Math.floor(ts / 1000) - 7200;\n if (decodedToken.exp < currentTime) {\n store.dispatch(logoutUser());\n window.location.href = \"/login\";\n } else {\n store.dispatch({ type: SET_AUTHENTICATED });\n axios.defaults.headers.common[\"Authorization\"] = token;\n }\n } else {\n store.dispatch(logoutUser());\n window.location.href = \"/login\";\n }\n}\n\nfunction App() {\n return (\n \n \n setPasswordVaule(event.target.value) & setError(0)\n }\n error={error === 2}\n />\n \n setConfirmPasswordVaule(event.target.value) & setError(0)\n }\n error={error === 2}\n helperText={\n error === 2\n ? \"This url is invalid.\"\n : error === 1 && \"Password was updated successfully.\"\n }\n />\n
\n Update your password
\nYou can update your password in here.
\n\n handleSubmit()}\n >\n Update Password\n \n
\n