diff --git a/package.json b/package.json index 30a3ddd..4864691 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "lint": "eslint src", "lint:fix": "npm run lint -- --fix", "codegen:v1": "./node_modules/.bin/openapi -i https://clowder.ncsa.illinois.edu/clowder/swagger -o src/openapi/v1", - "codegen:v2": "./node_modules/.bin/openapi -i ${CLOWDER_REMOTE_HOSTNAME}/api/v2/openapi.json -o src/openapi/v2", + "codegen:v2": "export CLOWDER_REMOTE_HOSTNAME=http://localhost:8000 && ./node_modules/.bin/openapi -i ${CLOWDER_REMOTE_HOSTNAME}/api/v2/openapi.json -o src/openapi/v2", "codegen": "npm run codegen:v1 && npm run codegen:v2", "docs": "typedoc" }, diff --git a/src/actions/dataset.js b/src/actions/dataset.js index 71b0bae..f86c850 100644 --- a/src/actions/dataset.js +++ b/src/actions/dataset.js @@ -120,7 +120,7 @@ export function datasetDeleted(datasetId){ export const FOLDER_ADDED = "FOLDER_ADDED"; export function folderAdded(datasetId, folderName, parentFolder = null){ return (dispatch) => { - const folder = {"name": folderName, "parent_folder": parentFolder} + const folder = {"name": folderName, "parent_folder": parentFolder}; return V2.DatasetsService.addFolderApiV2DatasetsDatasetIdFoldersPost(datasetId, folder) .then(json => { dispatch({ diff --git a/src/components/Dashbard.tsx b/src/components/Dashbard.tsx index 057158e..2da511b 100644 --- a/src/components/Dashbard.tsx +++ b/src/components/Dashbard.tsx @@ -3,11 +3,11 @@ import {Box, Button, Dialog, DialogTitle, Grid, Link, Tab, Tabs, Typography} fro import {CreateDataset} from "./datasets/CreateDataset"; -import {Dataset, RootState} from "../types/data"; +import {RootState} from "../types/data"; +import {DatasetOut as Dataset} from "../openapi/v2"; import {useDispatch, useSelector} from "react-redux"; import {datasetDeleted, fetchDatasets,} from "../actions/dataset"; import {resetFailedReason, resetLogout} from "../actions/common"; -import {downloadThumbnail} from "../utils/thumbnail"; import TopBar from "./navigation/TopBar"; import {a11yProps, TabPanel} from "./tabs/TabComponent"; @@ -32,7 +32,7 @@ export const Dashboard = (): JSX.Element => { // Redux connect equivalent const dispatch = useDispatch(); - const deleteDataset = (datasetId: string) => dispatch(datasetDeleted(datasetId)); + const deleteDataset = (datasetId: string | undefined) => dispatch(datasetDeleted(datasetId)); const listDatasets = (skip: number | undefined, limit: number | undefined, mine: boolean | undefined) => dispatch(fetchDatasets(skip, limit, mine)); const dismissError = () => dispatch(resetFailedReason()); const dismissLogout = () => dispatch(resetLogout()); @@ -41,7 +41,6 @@ export const Dashboard = (): JSX.Element => { const stack = useSelector((state: RootState) => state.error.stack); const loggedOut = useSelector((state: RootState) => state.error.loggedOut); - const [datasetThumbnailList, setDatasetThumbnailList] = useState([]); // TODO add option to determine limit number; default show 5 datasets each time const [currPageNum, setCurrPageNum] = useState(0); const [limit,] = useState(20); @@ -61,7 +60,7 @@ export const Dashboard = (): JSX.Element => { deleteDataset(selectedDataset["id"]); } setConfirmationOpen(false); - } + }; // component did mount useEffect(() => { @@ -74,15 +73,15 @@ export const Dashboard = (): JSX.Element => { if (reason !== "" && reason !== null && reason !== undefined) { setErrorOpen(true); } - }, [reason]) + }, [reason]); const handleErrorCancel = () => { // reset error message and close the error window dismissError(); setErrorOpen(false); - } + }; const handleErrorReport = () => { window.open(`${config.GHIssueBaseURL}+${reason}&body=${encodeURIComponent(stack)}`); - } + }; // log user out if token expired/unauthorized useEffect(() => { @@ -93,24 +92,8 @@ export const Dashboard = (): JSX.Element => { } }, [loggedOut]); - // fetch thumbnails from each individual dataset/id calls + // check prev/next button valid or not useEffect(() => { - (async () => { - if (datasets !== undefined && datasets.length > 0) { - - // TODO change the type any to something else - const datasetThumbnailListTemp: any = []; - await Promise.all(datasets.map(async (dataset) => { - // add thumbnails - if (dataset["thumbnail"] !== null && dataset["thumbnail"] !== undefined) { - const thumbnailURL = await downloadThumbnail(dataset["thumbnail"]); - datasetThumbnailListTemp.push({"id": dataset["id"], "thumbnail": thumbnailURL}); - } - })); - setDatasetThumbnailList(datasetThumbnailListTemp); - } - })(); - // disable flipping if reaches the last page if (datasets.length < limit) setNextDisabled(true); else setNextDisabled(false); @@ -170,7 +153,7 @@ export const Dashboard = (): JSX.Element => {
- + @@ -182,19 +165,16 @@ export const Dashboard = (): JSX.Element => { { - datasets !== undefined && datasetThumbnailList !== undefined ? - datasets.map((dataset) => { - return ( - - - - ); - }) - : - <> + datasets.map((dataset) => { + return ( + + + + ) + }) } diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index f2f6bf4..bcf3f1a 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx @@ -26,7 +26,7 @@ export const Login = (): JSX.Element => { // component did mount useEffect(() => { if (isAuthorized()) { history("/");} - }, []); + }, []); const handleKeyPressed= async (event: React.KeyboardEvent<{}>) => { if (event.key === "Enter") { await handleLoginButtonClick();} diff --git a/src/components/auth/Logout.tsx b/src/components/auth/Logout.tsx index da4fa61..f18f490 100644 --- a/src/components/auth/Logout.tsx +++ b/src/components/auth/Logout.tsx @@ -1,3 +1,4 @@ +// @ts-ignore import React, {useEffect} from "react"; import {useDispatch} from "react-redux"; import {logout as logoutAction} from "../../actions/user"; @@ -11,5 +12,5 @@ export const Logout = (): JSX.Element => { return ( - ) -} + ); +}; diff --git a/src/components/auth/Register.tsx b/src/components/auth/Register.tsx index dd3eb5e..650e78d 100644 --- a/src/components/auth/Register.tsx +++ b/src/components/auth/Register.tsx @@ -29,7 +29,7 @@ const textField = { borderColor: "#212529", }, }, -} +}; export const Register = (): JSX.Element => { @@ -51,7 +51,7 @@ export const Register = (): JSX.Element => { useEffect(()=>{ if (registerSucceeded) history("/login"); - }, [registerSucceeded]) + }, [registerSucceeded]); const changeUsername = (event: React.ChangeEvent) => { setEmail(event.target.value); diff --git a/src/components/datasets/Dataset.tsx b/src/components/datasets/Dataset.tsx index b79a2b9..7a2afd8 100644 --- a/src/components/datasets/Dataset.tsx +++ b/src/components/datasets/Dataset.tsx @@ -12,15 +12,13 @@ import { fetchDatasetAbout, fetchFilesInDataset, fetchFolderPath, fetchFoldersInDataset, - folderAdded } from "../../actions/dataset"; -import {resetFailedReason, resetLogout} from "../../actions/common" +import {resetFailedReason, resetLogout} from "../../actions/common"; import {a11yProps, TabPanel} from "../tabs/TabComponent"; import TopBar from "../navigation/TopBar"; import {MainBreadcrumbs} from "../navigation/BreadCrumb"; import {UploadFile} from "../files/UploadFile"; -import {V2} from "../../openapi"; import {ActionModal} from "../dialog/ActionModal"; import FilesTable from "../files/FilesTable"; import {CreateFolder} from "../folders/CreateFolder"; @@ -41,7 +39,7 @@ const optionMenuItem = { fontSize: "14px", color: "#212529", marginTop:"8px", -} +}; export const Dataset = (): JSX.Element => { @@ -49,24 +47,19 @@ export const Dataset = (): JSX.Element => { const { datasetId } = useParams<{datasetId?: string}>(); // search parameters - let [searchParams, setSearchParams] = useSearchParams(); + const [searchParams, _] = useSearchParams(); const folder = searchParams.get("folder"); - useEffect(() => { - const currentParams = Object.fromEntries([...searchParams]); - console.log(currentParams); // get new values onchange - }, [searchParams]); // use history hook to redirect/navigate between routes const history = useNavigate(); // Redux connect equivalent const dispatch = useDispatch(); - const deleteDataset = (datasetId:string|undefined) => dispatch(datasetDeleted(datasetId)); - const addFolder = (datasetId:string|undefined, folderName:string, parentFolder:string|null) => dispatch(folderAdded(datasetId, folderName, parentFolder)); - const getFolderPath= (folderId:string|undefined) => dispatch(fetchFolderPath(folderId)); - const listFilesInDataset = (datasetId:string|undefined, folderId:string|undefined) => dispatch(fetchFilesInDataset(datasetId, folderId)); - const listFoldersInDataset = (datasetId:string|undefined, parentFolder:string|undefined) => dispatch(fetchFoldersInDataset(datasetId, parentFolder)); - const listDatasetAbout= (datasetId:string|undefined) => dispatch(fetchDatasetAbout(datasetId)); + const deleteDataset = (datasetId:string | undefined) => dispatch(datasetDeleted(datasetId)); + const getFolderPath= (folderId: string | null) => dispatch(fetchFolderPath(folderId)); + const listFilesInDataset = (datasetId: string | undefined, folderId: string | null) => dispatch(fetchFilesInDataset(datasetId, folderId)); + const listFoldersInDataset = (datasetId: string | undefined, parentFolder: string | null) => dispatch(fetchFoldersInDataset(datasetId, parentFolder)); + const listDatasetAbout= (datasetId?:string) => dispatch(fetchDatasetAbout(datasetId)); const dismissError = () => dispatch(resetFailedReason()); const dismissLogout = () => dispatch(resetLogout()); @@ -98,15 +91,15 @@ export const Dataset = (): JSX.Element => { if (reason !== "" && reason !== null && reason !== undefined){ setErrorOpen(true); } - }, [reason]) + }, [reason]); const handleErrorCancel = () => { // reset error message and close the error window dismissError(); setErrorOpen(false); - } + }; const handleErrorReport = (reason:string) => { window.open(`${config.GHIssueBaseURL}+${reason}&body=${encodeURIComponent(stack)}`); - } + }; // log user out if token expired/unauthorized useEffect(() => { @@ -121,7 +114,7 @@ export const Dataset = (): JSX.Element => { const [newFolder, setNewFolder] = React.useState(false); const handleCloseNewFolder = () => { setNewFolder(false); - } + }; const handleTabChange = (_event:React.ChangeEvent<{}>, newTabIndex:number) => { setSelectedTabIndex(newTabIndex); @@ -153,10 +146,10 @@ export const Dataset = (): JSX.Element => { paths.push({ "name": folderBread["folder_name"], "url": `/datasets/${datasetId}?folder=${folderBread["folder_id"]}` - }) + }); } } else { - paths.slice(0, 1) + paths.slice(0, 1); } return ( @@ -171,7 +164,7 @@ export const Dataset = (): JSX.Element => {
- + @@ -192,17 +185,17 @@ export const Dataset = (): JSX.Element => { {/*option menus*/} { // Go to Explore page history("/"); } - }>Delete Dataset + }>Delete Dataset Follow Collaborators Extraction @@ -259,11 +252,11 @@ export const Dataset = (): JSX.Element => { setNewDatasetName(value); }} defaultValue={about["name"]}/> : @@ -272,11 +265,11 @@ export const Dataset = (): JSX.Element => { } Dataset ID: {about["id"]} - Owner: {about["authorId"]} + Owner: {about["author"]["full_name"]} Description: {about["description"]} Created on: {parseDate(about["created"])} {/*/!*TODO use this to get thumbnail*!/*/} - Thumbnail: {about["thumbnail"]} + {/*Thumbnail: {about["thumbnail"]}*/} {/*Belongs to spaces: {about["authorId"]}*/} {/*/!*TODO not sure how to use this info*!/*/} {/*Resource type: {about["resource_type"]}*/} diff --git a/src/components/datasets/DatasetCard.tsx b/src/components/datasets/DatasetCard.tsx index 46c0999..8ba0d00 100644 --- a/src/components/datasets/DatasetCard.tsx +++ b/src/components/datasets/DatasetCard.tsx @@ -1,18 +1,19 @@ +// @ts-ignore import React from "react"; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; +import Card from "@mui/material/Card"; +import CardActions from "@mui/material/CardActions"; +import CardContent from "@mui/material/CardContent"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; import {useNavigate} from "react-router-dom"; import {parseDate} from "../../utils/common"; type DatasetCardProps = { - id: string, - name: string, - author: string, - created: string | Date, - description: string + id?: string, + name?: string, + author?: string, + created?: string | Date, + description?: string } export default function DatasetCard(props: DatasetCardProps) { @@ -20,7 +21,7 @@ export default function DatasetCard(props: DatasetCardProps) { const formattedCreated = parseDate(created); // use history hook to redirect/navigate between routes const history = useNavigate(); - const selectDataset = (selectedDatasetId: string) => { + const selectDataset = (selectedDatasetId: string | undefined) => { // Redirect to dataset route with dataset Id history(`/datasets/${selectedDatasetId}`); }; diff --git a/src/components/dialog/ActionModal.tsx b/src/components/dialog/ActionModal.tsx index a113457..d89f671 100644 --- a/src/components/dialog/ActionModal.tsx +++ b/src/components/dialog/ActionModal.tsx @@ -23,17 +23,17 @@ export const ActionModal:React.FC = (props: ActionModalProps) return ( {actionTitle} - - - {actionText} - - - - {/*handleActionBtnClick This could be used to report error/ confirm deletion and so on*/} - - - - + + + {actionText} + + + + {/*handleActionBtnClick This could be used to report error/ confirm deletion and so on*/} + + + + ); -} +}; diff --git a/src/components/files/File.tsx b/src/components/files/File.tsx index 1d686dd..ff6e064 100644 --- a/src/components/files/File.tsx +++ b/src/components/files/File.tsx @@ -8,7 +8,7 @@ import Thumbnail from "../previewers/Thumbnail"; import {PreviewConfiguration, RootState} from "../../types/data"; import {useParams, useLocation, useNavigate} from "react-router-dom"; import {useDispatch, useSelector} from "react-redux"; -import {resetFailedReason, resetLogout} from "../../actions/common" +import {resetFailedReason, resetLogout} from "../../actions/common"; import {TabPanel} from "../tabs/TabComponent"; import {a11yProps} from "../tabs/TabComponent"; @@ -23,11 +23,11 @@ import {FileVersionHistory} from "../versions/FileVersionHistory"; const tab = { fontStyle: "normal", - fontWeight: "normal", - fontSize: "16px", - color: "#495057", - textTransform: "capitalize", -} + fontWeight: "normal", + fontSize: "16px", + color: "#495057", + textTransform: "capitalize", +}; export const File = (): JSX.Element => { // use history hook to redirect/navigate between routes @@ -76,15 +76,15 @@ export const File = (): JSX.Element => { if (reason !== "" && reason !== null && reason !== undefined){ setErrorOpen(true); } - }, [reason]) + }, [reason]); const handleErrorCancel = () => { // reset error message and close the error window dismissError(); setErrorOpen(false); - } + }; const handleErrorReport = (reason:string) => { window.open(`${config.GHIssueBaseURL}+${reason}&body=${encodeURIComponent(stack)}`); - } + }; // log user out if token expired/unauthorized useEffect(() => { @@ -149,17 +149,17 @@ export const File = (): JSX.Element => { paths.push({ "name": folderBread["folder_name"], "url": `/datasets/${datasetId}?folder=${folderBread["folder_id"]}` - }) + }); } } else { - paths.slice(0, 1) + paths.slice(0, 1); } // add file link to breadcrumbs paths.push({ "name":fileMetadata["name"], "url":`/files/${fileId}` - }) + }); return ( @@ -174,7 +174,7 @@ export const File = (): JSX.Element => {
- + diff --git a/src/components/files/FileAbout.tsx b/src/components/files/FileAbout.tsx index 40e5925..2c89aad 100644 --- a/src/components/files/FileAbout.tsx +++ b/src/components/files/FileAbout.tsx @@ -1,7 +1,8 @@ -import {Box, Typography} from "@mui/material"; +// @ts-ignore import React from "react"; import {FileMetadata} from "../../types/data"; import {parseDate} from "../../utils/common"; +import {Box, Typography} from "@mui/material"; type FileAboutProps = { diff --git a/src/components/files/FileMenu.tsx b/src/components/files/FileMenu.tsx index f5dbc49..4e5fa47 100644 --- a/src/components/files/FileMenu.tsx +++ b/src/components/files/FileMenu.tsx @@ -1,17 +1,17 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import MenuIcon from '@mui/icons-material/Menu'; -import { downloadFile } from '../../utils/file'; -import {File} from "../../types/data"; +import * as React from "react"; +import Button from "@mui/material/Button"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import MenuIcon from "@mui/icons-material/Menu"; +import { downloadFile } from "../../utils/file"; +import {FileOut as File} from "../../openapi/v2"; import {useState} from "react"; import {fileDeleted} from "../../actions/file"; import {useDispatch} from "react-redux"; import {ActionModal} from "../dialog/ActionModal"; -import DownloadIcon from '@mui/icons-material/Download'; -import DeleteIcon from '@mui/icons-material/Delete'; -import UploadIcon from '@mui/icons-material/Upload'; +import DownloadIcon from "@mui/icons-material/Download"; +import DeleteIcon from "@mui/icons-material/Delete"; +import UploadIcon from "@mui/icons-material/Upload"; import {Dialog, DialogTitle, ListItemIcon, ListItemText} from "@mui/material"; import {UpdateFile} from "./UpdateFile"; @@ -40,7 +40,7 @@ export default function FileMenu(props: FileMenuProps) { deleteFile(file.id); } setConfirmationOpen(false); - } + }; return (
@@ -56,9 +56,9 @@ export default function FileMenu(props: FileMenuProps) { id="basic-button" // variant="outlined" size="small" - aria-controls={open ? 'basic-menu' : undefined} + aria-controls={open ? "basic-menu" : undefined} aria-haspopup="true" - aria-expanded={open ? 'true' : undefined} + aria-expanded={open ? "true" : undefined} onClick={handleClick} > @@ -69,7 +69,7 @@ export default function FileMenu(props: FileMenuProps) { open={open} onClose={handleClose} MenuListProps={{ - 'aria-labelledby': 'basic-button', + "aria-labelledby": "basic-button", }} > { diff --git a/src/components/files/FileSearch.tsx b/src/components/files/FileSearch.tsx index a3dcb62..c671bd2 100644 --- a/src/components/files/FileSearch.tsx +++ b/src/components/files/FileSearch.tsx @@ -1,7 +1,8 @@ -import {Box, Grid, Typography} from "@mui/material"; +// @ts-ignore import React from "react"; import {ClowderInput} from "../styledComponents/ClowderInput"; import {ClowderButton} from "../styledComponents/ClowderButton"; +import {Box, Grid, Typography} from "@mui/material"; export function FileSearch() { diff --git a/src/components/files/FilesTable.tsx b/src/components/files/FilesTable.tsx index 5ba8b99..3d6f05b 100644 --- a/src/components/files/FilesTable.tsx +++ b/src/components/files/FilesTable.tsx @@ -1,24 +1,25 @@ -import * as React from 'react'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; +// @ts-ignore +import * as React from "react"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; import {useSelector} from "react-redux"; import {RootState} from "../../types/data"; import {useNavigate} from "react-router-dom"; import {Button} from "@mui/material"; import FileMenu from "./FileMenu"; -import FolderIcon from '@mui/icons-material/Folder'; -import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'; +import FolderIcon from "@mui/icons-material/Folder"; +import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"; import {parseDate} from "../../utils/common"; import {VersionChip} from "../versions/VersionChip"; type FilesTableProps = { - datasetId: string | undefined, - datasetName: string + datasetId?: string, + datasetName?: string } export default function FilesTable(props: FilesTableProps) { @@ -27,11 +28,11 @@ export default function FilesTable(props: FilesTableProps) { const foldersInDataset = useSelector((state:RootState) => state.dataset.folders); // use history hook to redirect/navigate between routes const history = useNavigate(); - const selectFile = (selectedFileId: string) => { + const selectFile = (selectedFileId?:string) => { // Redirect to file route with file Id and dataset id history(`/files/${selectedFileId}?dataset=${props.datasetId}&name=${props.datasetName}`); }; - const selectFolder = (selectedFolderId: string) => { + const selectFolder = (selectedFolderId?:string) => { // Redirect to file route with file Id and dataset id history(`/datasets/${props.datasetId}?folder=${selectedFolderId}`); }; @@ -44,7 +45,7 @@ export default function FilesTable(props: FilesTableProps) { Updated Size Type - + @@ -52,12 +53,12 @@ export default function FilesTable(props: FilesTableProps) { foldersInDataset.map((folder) => ( - {folder.author} + {folder.author.full_name} - - - @@ -65,21 +66,21 @@ export default function FilesTable(props: FilesTableProps) { } { filesInDataset.map((file) => ( - - - - - {/*TODO this should be version number; for now put version ID instead*/} - - - {parseDate(file.created)} by {file.creator} - {file.size} - {file.contentType} - - )) + + + + + {/*TODO this should be version number; for now put version ID instead*/} + { + file.version ? : <> + } + + {parseDate(file.created)} by {file.creator.full_name} + + )) } diff --git a/src/components/files/UploadFile.tsx b/src/components/files/UploadFile.tsx index 6933e55..421bd4d 100644 --- a/src/components/files/UploadFile.tsx +++ b/src/components/files/UploadFile.tsx @@ -13,20 +13,20 @@ import {fileCreated} from "../../actions/file"; type UploadFileProps ={ - selectedDatasetId: string|undefined, - folderId: string|undefined, + selectedDatasetId?: string, + folderId: string | null, setOpen:(open:boolean) => void, } export const UploadFile: React.FC = (props: UploadFileProps) => { const dispatch = useDispatch(); - const uploadFile = (formData: FormData, selectedDatasetId: string|undefined) => dispatch(fileCreated(formData, selectedDatasetId)); + const uploadFile = (formData: any, selectedDatasetId?: string) => dispatch(fileCreated(formData, selectedDatasetId)); const {selectedDatasetId, folderId, setOpen,} = props; const [loading, setLoading] = useState(false); - const onSave = async (formData:FormData) => { + const onSave = async (formData:any) => { setLoading(true); formData["folder_id"] = folderId; uploadFile(formData, selectedDatasetId); diff --git a/src/components/folders/CreateFolder.tsx b/src/components/folders/CreateFolder.tsx index 5f3bd1e..cb3d2f2 100644 --- a/src/components/folders/CreateFolder.tsx +++ b/src/components/folders/CreateFolder.tsx @@ -15,8 +15,8 @@ import {folderAdded} from "../../actions/dataset"; type CreateFolderProps = { - datasetId: string, - parentFolder: string, + datasetId: string | undefined, + parentFolder: string | null, handleClose:(open:boolean) => void, open: boolean; } @@ -51,14 +51,14 @@ export const CreateFolder: React.FC = (props: CreateFolderPro Create New Folder - + diff --git a/src/components/navigation/BreadCrumb.tsx b/src/components/navigation/BreadCrumb.tsx index b784927..58b1b47 100644 --- a/src/components/navigation/BreadCrumb.tsx +++ b/src/components/navigation/BreadCrumb.tsx @@ -1,5 +1,4 @@ import React from "react"; -import Typography from "@mui/material/Typography"; import Breadcrumbs from "@mui/material/Breadcrumbs"; import {Button} from "@mui/material"; import {useNavigate} from "react-router-dom"; @@ -12,18 +11,18 @@ export const MainBreadcrumbs: React.FC = (props:BreadCrumbProps const history = useNavigate(); return ( - - { - paths.map((path:any, index:number) => { - if (index !== paths.length -1){ - return (); - } - else{ - return (); - } - }) - } - + + { + paths.map((path:any, index:number) => { + if (index !== paths.length -1){ + return (); + } + else{ + return (); + } + }) + } + ); }; diff --git a/src/components/previewers/Audio.tsx b/src/components/previewers/Audio.tsx index 3d340ca..8f43823 100644 --- a/src/components/previewers/Audio.tsx +++ b/src/components/previewers/Audio.tsx @@ -1,3 +1,4 @@ +// @ts-ignore import React from "react"; type AudioProps = { diff --git a/src/components/previewers/Thumbnail.tsx b/src/components/previewers/Thumbnail.tsx index cc017a0..b58dfe8 100644 --- a/src/components/previewers/Thumbnail.tsx +++ b/src/components/previewers/Thumbnail.tsx @@ -1,3 +1,4 @@ +// @ts-ignore import React from "react"; import { Typography } from "@mui/material"; diff --git a/src/components/previewers/Video.tsx b/src/components/previewers/Video.tsx index 6022657..659dcce 100644 --- a/src/components/previewers/Video.tsx +++ b/src/components/previewers/Video.tsx @@ -1,3 +1,4 @@ +// @ts-ignore import React from "react"; type VideoProps = { diff --git a/src/components/styledComponents/IncoreInputLabel.jsx b/src/components/styledComponents/ClowderInputLabel.jsx similarity index 80% rename from src/components/styledComponents/IncoreInputLabel.jsx rename to src/components/styledComponents/ClowderInputLabel.jsx index 4f97b6f..eb1befc 100644 --- a/src/components/styledComponents/IncoreInputLabel.jsx +++ b/src/components/styledComponents/ClowderInputLabel.jsx @@ -1,7 +1,7 @@ import {styled} from "@mui/styles"; import {InputLabel} from "@mui/material"; -export const IncoreInputLabel = styled(InputLabel)({ +export const ClowderInputLabel = styled(InputLabel)({ color: "#2E384D", fontSize: "16px", fontWeight: 500, diff --git a/src/components/styledComponents/IncoreSelect.jsx b/src/components/styledComponents/ClowderSelect.jsx similarity index 100% rename from src/components/styledComponents/IncoreSelect.jsx rename to src/components/styledComponents/ClowderSelect.jsx diff --git a/src/components/tabs/TabComponent.tsx b/src/components/tabs/TabComponent.tsx index d85b095..c31e5ae 100644 --- a/src/components/tabs/TabComponent.tsx +++ b/src/components/tabs/TabComponent.tsx @@ -1,4 +1,5 @@ import {Box, Typography} from "@mui/material"; +// @ts-ignore import React from "react"; export function TabPanel(props:any) { diff --git a/src/components/versions/FileVersionHistory.tsx b/src/components/versions/FileVersionHistory.tsx index 5854eac..bd89a02 100644 --- a/src/components/versions/FileVersionHistory.tsx +++ b/src/components/versions/FileVersionHistory.tsx @@ -1,7 +1,7 @@ +// @ts-ignore import React from "react"; import {Box, Button, List, ListItem, ListItemAvatar, ListItemText} from "@mui/material"; -import {FileVersion} from "../../types/data"; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import {FileVersion} from "../../openapi/v2"; import {VersionChip} from "./VersionChip"; import {parseDate} from "../../utils/common"; @@ -23,7 +23,10 @@ export function FileVersionHistory(props: FileVersionHistoryProps) { {/*TODO replace with pretty version name*/} - + {fileVersion["version_id"] ? + + : <> + } { + ): CancelablePromise { return __request({ method: 'POST', path: `/api/v2/datasets/${datasetId}/files`, @@ -229,4 +228,4 @@ export class DatasetsService { }); } -} +} \ No newline at end of file diff --git a/src/openapi/v2/services/FilesService.ts b/src/openapi/v2/services/FilesService.ts index 81ea603..ebed8f4 100644 --- a/src/openapi/v2/services/FilesService.ts +++ b/src/openapi/v2/services/FilesService.ts @@ -2,7 +2,8 @@ /* tslint:disable */ /* eslint-disable */ import type { Body_update_file_api_v2_files__file_id__put } from '../models/Body_update_file_api_v2_files__file_id__put'; -import type { ClowderFile } from '../models/ClowderFile'; +import type { FileOut } from '../models/FileOut'; +import type { FileVersion } from '../models/FileVersion'; import type { CancelablePromise } from '../core/CancelablePromise'; import { request as __request } from '../core/request'; @@ -30,13 +31,13 @@ export class FilesService { * Update File * @param fileId * @param formData - * @returns ClowderFile Successful Response + * @returns FileOut Successful Response * @throws ApiError */ public static updateFileApiV2FilesFileIdPut( fileId: string, formData: Body_update_file_api_v2_files__file_id__put, - ): CancelablePromise { + ): CancelablePromise { return __request({ method: 'PUT', path: `/api/v2/files/${fileId}`, @@ -89,14 +90,14 @@ export class FilesService { * @param fileId * @param skip * @param limit - * @returns any Successful Response + * @returns FileVersion Successful Response * @throws ApiError */ public static getFileVersionsApiV2FilesFileIdVersionsGet( fileId: string, skip?: number, limit: number = 20, - ): CancelablePromise { + ): CancelablePromise> { return __request({ method: 'GET', path: `/api/v2/files/${fileId}/versions`, @@ -110,4 +111,4 @@ export class FilesService { }); } -} +} \ No newline at end of file diff --git a/src/reducers/dataset.ts b/src/reducers/dataset.ts index 963776c..e26e304 100644 --- a/src/reducers/dataset.ts +++ b/src/reducers/dataset.ts @@ -9,11 +9,12 @@ import { } from "../actions/dataset"; import {CREATE_FILE, UPDATE_FILE, DELETE_FILE} from "../actions/file"; import {DataAction} from "../types/action"; -import {Dataset, DatasetState} from "../types/data"; +import {DatasetState} from "../types/data"; +import {DatasetOut as Dataset, UserOut as Author} from "../openapi/v2"; const defaultState: DatasetState = { files: [], - about: {name: "", id: "", authorId: "", description: "", created: "", thumbnail: ""}, + about: {"author":{}}, datasets: [], newDataset: {}, folders: [], @@ -46,7 +47,7 @@ const dataset = (state = defaultState, action: DataAction) => { case CREATE_DATASET: return Object.assign({}, state, {newDataset: action.dataset}); case RESET_CREATE_DATASET: - return Object.assign({}, state, {newDataset: {}}); + return Object.assign({}, state, {newDataset: {}}); case DELETE_DATASET: return Object.assign({}, state, { datasets: state.datasets.filter(dataset => dataset.id !== action.dataset.id), diff --git a/src/reducers/error.ts b/src/reducers/error.ts index 878838c..89d792a 100644 --- a/src/reducers/error.ts +++ b/src/reducers/error.ts @@ -8,16 +8,16 @@ const defaultState = { const error = (state = defaultState, action: DataAction) => { switch (action.type) { - case "FAILED": - return Object.assign({}, state, {reason: action.reason, stack: action.stack}); - case "RESET_FAILED": - return Object.assign({}, state, {reason: "", stack: ""}); - case "LOGOUT": - return Object.assign({}, state, {loggedOut: true}); - case "RESET_LOGOUT": - return Object.assign({}, state, {loggedOut: false}); - default: - return state; + case "FAILED": + return Object.assign({}, state, {reason: action.reason, stack: action.stack}); + case "RESET_FAILED": + return Object.assign({}, state, {reason: "", stack: ""}); + case "LOGOUT": + return Object.assign({}, state, {loggedOut: true}); + case "RESET_LOGOUT": + return Object.assign({}, state, {loggedOut: false}); + default: + return state; } }; diff --git a/src/routes.tsx b/src/routes.tsx index a5b802b..250220a 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -13,7 +13,7 @@ import {isAuthorized} from "./utils/common"; // https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5 class PrivateRoute extends React.Component<{ children: JSX.Element }> { render() { - let {children} = this.props; + const {children} = this.props; return isAuthorized() ? children : ; } } diff --git a/src/theme.ts b/src/theme.ts index 8cd47e3..57be1ce 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,4 @@ -import { createTheme } from '@mui/material/styles'; +import { createTheme } from "@mui/material/styles"; // A custom theme for this app const theme = createTheme({ diff --git a/src/types/action.ts b/src/types/action.ts index ee45e35..bd97c40 100644 --- a/src/types/action.ts +++ b/src/types/action.ts @@ -1,10 +1,22 @@ -import {About, Dataset, ExtractedMetadata, File, MetadataJsonld, FilePreview, FileMetadata, FileVersion, Folder} from "./data"; +import {ExtractedMetadata, MetadataJsonld, FilePreview, FileMetadata, FolderPath} from "./data"; +import {DatasetOut as Dataset, FileOut as File, FolderOut as Folder, FileVersion} from "../openapi/v2"; +import {GET_FOLDER_PATH} from "../actions/dataset"; interface RECEIVE_FILES_IN_DATASET { type: "RECEIVE_FILES_IN_DATASET"; files: File[]; } +interface RECEIVE_FOLDERS_IN_DATASET { + type: "RECEIVE_FOLDERS_IN_DATASET"; + folders: Folder[]; +} + +interface UPDATE_FILE { + type: "UPDATE_FILE"; + file: File; +} + interface DELETE_FILE { type: "DELETE_FILE"; file: File; @@ -12,7 +24,7 @@ interface DELETE_FILE { interface RECEIVE_DATASET_ABOUT{ type: "RECEIVE_DATASET_ABOUT"; - about: About; + about: Dataset; } interface RECEIVE_DATASETS{ @@ -104,6 +116,15 @@ interface FOLDER_ADDED{ folder: Folder } +interface GET_FOLDER_PATH{ + type: "GET_FOLDER_PATH", + folderPath: FolderPath[], +} + +interface RESET_CREATE_DATASET{ + type: "RESET_CREATE_DATASET", + newDataset: Dataset +} export type DataAction = | RECEIVE_FILES_IN_DATASET | RECEIVE_FOLDERS_IN_DATASET @@ -123,8 +144,11 @@ export type DataAction = | REGISTER_USER | CREATE_DATASET | CREATE_FILE + | UPDATE_FILE | FAILED | RESET_FAILED | RESET_LOGOUT | FOLDER_ADDED + | GET_FOLDER_PATH + | RESET_CREATE_DATASET ; diff --git a/src/types/data.ts b/src/types/data.ts index 6cef1aa..9e3c2f7 100644 --- a/src/types/data.ts +++ b/src/types/data.ts @@ -1,49 +1,4 @@ -export interface Dataset { - name: string; - description: string; - id:string; - author: Author; - created: string | Date; - modified: string | Date; - files: string[]; - folders: string[]; - status: string; - views: string; - downloads: string; - thumbnail: string; -} - -export interface Author { - id: string; - email: string; - "full_name": string|null; -} - -export interface File { - version: string; - creator: string; - created: string | Date; - id: string; - name: string; - size: number; - "date-created": string; - contentType:string; -} - -export interface Folder { - id: string; - name: string; - "parent_folder": string|null; -} - -export interface About { - name: string; - id: string; - authorId: string; - description: string; - created: string | Date; - thumbnail: string; -} +import {FileOut as File, DatasetOut as Dataset, FolderOut as Folder, FileVersion} from "../openapi/v2"; export interface FileMetadata { id: string; @@ -60,14 +15,6 @@ export interface FileMetadata { version: string; } -export interface FileVersion { - id: string; - "version_id": string; - "file_id": string; - "creator": string; - "created": string | Date; -} - export interface FileMetadataList{ id: string; metadata: FileMetadata; @@ -135,13 +82,18 @@ export interface Thumbnail{ thumbnail: string; } +export interface FolderPath{ + "folder_name": string; + "folder_id": string; +} + export interface DatasetState{ files: File[]; datasets: Dataset[]; newDataset: Dataset; - about: About; + about: Dataset; folders: Folder[]; - folderPath: string[]; + folderPath: FolderPath[]; } export interface FileState{