WIP: 2 turn javascript into typescript

src/actions/dataset.js

@@ -69,7 +69,7 @@ export function receiveDatasets(type, json) {
 	};
 }
 
-export function fetchDatasets(when, date, limit = "5") {
+export function fetchDatasets(when, date, limit = 5) {
 	let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=${limit}`;
 	if (date) url = `${url}&date=${date}`;
 	if (when) url = `${url}&when=${when}`;

src/actions/file.js

@@ -3,7 +3,8 @@ import {getHeader} from "../utils/common";
 
 
 export const RECEIVE_FILE_METADATA = "RECEIVE_FILE_METADATA";
-export function receiveFileMetadata(type, json){
+
+export function receiveFileMetadata(type, json) {
 	return (dispatch) => {
 		dispatch({
 			type: type,
@@ -12,6 +13,7 @@ export function receiveFileMetadata(type, json){
 		});
 	};
 }
+
 export function fetchFileMetadata(id) {
 	let url = `${config.hostname}/clowder/api/files/${id}/metadata?superAdmin=true`;
 	return (dispatch) => {

src/app.config.js → src/app.config.ts

@@ -1,10 +1,16 @@
-let config = {};
+interface Config{
+	hostname: string;
+	apikey: string;
+}
+
+let config:Config = <Config>{};
+
 let hostname = process.env.CLOWDER_REMOTE_HOSTNAME || "";
 
 // TODO when add auth piece remove this env
 let apikey = process.env.APIKEY;
 
 config["hostname"] = hostname;
-config["apikey"] = apikey;
+config["apikey"] = apikey ?? "";
 
 export default config;

src/components/Dashbard.jsx → src/components/Dashbard.tsx

@@ -7,16 +7,16 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import StarBorderIcon from "@material-ui/icons/StarBorder";
 import CloudDownloadOutlinedIcon from "@material-ui/icons/CloudDownloadOutlined";
 
-import CreateDataset from "./childComponents/CreateDataset";
+import CreateDataset from "./datasets/CreateDataset";
 import {downloadDataset} from "../utils/dataset";
 import {useDispatch, useSelector} from "react-redux";
 
 import {deleteDataset as deleteDatasetAction, fetchDatasets} from "../actions/dataset";
 import {downloadThumbnail} from "../utils/thumbnail";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
+import TopBar from "./navigation/TopBar";
+import {BreadCrumb} from "./navigation/BreadCrumb";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
 	appBar: {
 		background: "#FFFFFF",
 		boxShadow: "none",
@@ -63,18 +63,18 @@ const useStyles = makeStyles((theme) => ({
 	}
 }));
 
-export default function Dashboard(props) {
+export default function Dashboard() {
 	const classes = useStyles();
 
 	const dispatch = useDispatch();
-	const deleteDataset = (datasetId) => dispatch(deleteDatasetAction(datasetId));
-	const listDatasets = (when, date, limit) => dispatch(fetchDatasets(when, date, limit));
+	const deleteDataset = (datasetId:string) => dispatch(deleteDatasetAction(datasetId));
+	const listDatasets = (when:string|null, date:string|null, limit:number|undefined) => dispatch(fetchDatasets(when, date, limit));
 
 	const datasets = useSelector((state) => state.dataset.datasets);
 
 	const [lastDataset, setLastDataset] = useState([]);
 	const [firstDataset, setFirstDataset] = useState([]);
-	const [limit, setLimit] = useState(5);
+	const [limit, _] = useState(5);
 	const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 	const [open, setOpen] = React.useState(false);
 	const [datasetThumbnailList, setDatasetThumbnailList] = useState([]);
@@ -116,7 +116,7 @@ export default function Dashboard(props) {
 		if (date) listDatasets("a", date.toISOString(), limit);
 	}
 
-	const handleTabChange = (event, newTabIndex) => {
+	const handleTabChange = (event, newTabIndex:number) => {
 		setSelectedTabIndex(newTabIndex);
 	};
 
@@ -131,7 +131,7 @@ export default function Dashboard(props) {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 						<Grid container spacing={4}>
 							<Grid item lg={8} xl={8} md={8} sm={8} xs={12}>
@@ -258,7 +258,7 @@ function TabPanel(props) {
 	);
 }
 
-function a11yProps(index) {
+function a11yProps(index:number) {
 	return {
 		id: `dashboard-tab-${index}`,
 		"aria-controls": `dashboard-tabpanel-${index}`,

src/components/childComponents/CreateDataset.jsx → src/components/datasets/CreateDataset.tsx

@@ -1,26 +1,29 @@
 import React, {useState} from "react";
 
-import {Box, Button, Container} from "@material-ui/core";
-
-import {makeStyles} from "@material-ui/core/styles";
+import {Box, Container} from "@material-ui/core";
 
 import Form from "@rjsf/material-ui";
 import datasetSchema from "../../schema/datasetSchema.json";
 import {createDataset} from "../../utils/dataset";
 import LoadingOverlay from "react-loading-overlay-ts";
 import {useNavigate} from "react-router";
+import {FormProps} from "@rjsf/core";
+import {ClowderButton} from "../styledComponents/ClowderButton";
+
 
-const useStyles = makeStyles();
+type Props = {
+	setOpen: any
+}
 
-export default function CreateDataset(props) {
-	const {setOpen, ...other} = props;
+export default function CreateDataset(props: Props) {
+	const {setOpen} = props;
 
 	const history = useNavigate();
 
-	const [disabled, setDisabled] = useState(true);
+	// const [disabled, setDisabled] = useState(true);
 	const [loading, setLoading] = useState(false);
 
-	const onSave = async (formData) => {
+	const onSave = async (formData:FormData) => {
 		setLoading(true);
 		const response = await createDataset(formData);
 
@@ -40,10 +43,10 @@ export default function CreateDataset(props) {
 				spinner
 				text="Saving..."
 			>
-				<Form schema={datasetSchema["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
-					  onSubmit={({formData}, e) => {onSave(formData);}}>
+				<Form schema={datasetSchema["schema"] as FormProps<any>["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
+					  onSubmit={({formData}, _) => {onSave(formData);}}>
 					<Box className="inputGroup">
-						<Button variant="contained" type="submit" className="form-button-block">Create</Button>
+						<ClowderButton variant="contained" type="submit" className="form-button-block">Create</ClowderButton>
 					</Box>
 				</Form>
 			</LoadingOverlay>

src/components/Dataset.jsx → src/components/datasets/Dataset.tsx

@@ -16,20 +16,20 @@ import {
 } from "@material-ui/core";
 import DescriptionIcon from "@material-ui/icons/Description";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
-import UploadFile from "./childComponents/UploadFile";
+import UploadFile from "../files/UploadFile";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import StarBorderIcon from "@material-ui/icons/StarBorder";
 import CloudDownloadOutlinedIcon from "@material-ui/icons/CloudDownloadOutlined";
-import {downloadDataset} from "../utils/dataset";
-import {downloadFile, fetchFileMetadata} from "../utils/file";
+import {downloadDataset} from "../../utils/dataset";
+import {downloadFile, fetchFileMetadata} from "../../utils/file";
 import {useDispatch, useSelector} from "react-redux";
-import {deleteFile as deleteFileAction} from "../actions/file";
-import {deleteDataset as deleteDatasetAction, fetchDatasetAbout, fetchFilesInDataset} from "../actions/dataset";
+import {deleteFile as deleteFileAction} from "../../actions/file";
+import {deleteDataset as deleteDatasetAction, fetchDatasetAbout, fetchFilesInDataset} from "../../actions/dataset";
 import {useNavigate, useParams} from "react-router";
-import {downloadThumbnail} from "../utils/thumbnail";
+import {downloadThumbnail} from "../../utils/thumbnail";
 import {Link as RouterLink} from "react-router-dom";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
+import TopBar from "../navigation/TopBar";
+import {BreadCrumb} from "../navigation/BreadCrumb";
 
 const useStyles = makeStyles((theme) => ({
 	appBar: {
@@ -103,10 +103,10 @@ export default function Dataset() {
 	const {datasetId} = useParams();
 
 	const dispatch = useDispatch();
-	const listFilesInDataset = (datasetId) => dispatch(fetchFilesInDataset(datasetId));
-	const listDatasetAbout = (datasetId) => dispatch(fetchDatasetAbout(datasetId));
-	const deleteFile = (fileId) => dispatch(deleteFileAction(fileId));
-	const deleteDataset = (datasetId) => dispatch(deleteDatasetAction(datasetId));
+	const listFilesInDataset = (datasetId:string|undefined) => dispatch(fetchFilesInDataset(datasetId));
+	const listDatasetAbout = (datasetId:string|undefined) => dispatch(fetchDatasetAbout(datasetId));
+	const deleteFile = (fileId:string|undefined) => dispatch(deleteFileAction(fileId));
+	const deleteDataset = (datasetId:string|undefined|null) => dispatch(deleteDatasetAction(datasetId));
 
 	const filesInDataset = useSelector((state) => state.dataset.files);
 	const datasetAbout = useSelector((state) => state.dataset.about);
@@ -142,11 +142,11 @@ export default function Dataset() {
 		})();
 	}, [filesInDataset])
 
-	const handleTabChange = (event, newTabIndex) => {
+	const handleTabChange = (_event: any, newTabIndex:number) => {
 		setSelectedTabIndex(newTabIndex);
 	};
 
-	const handleOptionClick = (event) => {
+	const handleOptionClick = (event: { currentTarget: React.SetStateAction<null>; }) => {
 		setAnchorEl(event.currentTarget);
 	};
 
@@ -169,7 +169,7 @@ export default function Dataset() {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 					<Grid container spacing={4}>
 						<Grid item lg={8} xl={8} md={8} sm={8} xs={12}>
@@ -332,7 +332,7 @@ export default function Dataset() {
 	);
 }
 
-function TabPanel(props) {
+function TabPanel(props:any) {
 	const {children, value, index, ...other} = props;
 
 	return (
@@ -352,7 +352,7 @@ function TabPanel(props) {
 	);
 }
 
-function a11yProps(index) {
+function a11yProps(index:number) {
 	return {
 		id: `dataset-tab-${index}`,
 		"aria-controls": `dataset-tabpanel-${index}`,

src/components/File.jsx → src/components/files/File.tsx

@@ -1,18 +1,18 @@
 import React, {useEffect, useState} from "react";
-import config from "../app.config";
+import config from "../../app.config";
 import {AppBar, Box, Grid, Tab, Tabs, Typography} from "@material-ui/core"
 import {makeStyles} from "@material-ui/core/styles";
-import Audio from "./previewers/Audio";
-import Video from "./previewers/Video";
-import {downloadResource} from "../utils/common";
-import Thumbnail from "./previewers/Thumbnail";
-import Html from "./previewers/Html";
+import Audio from "../previewers/Audio";
+import Video from "../previewers/Video";
+import {downloadResource} from "../../utils/common";
+import Thumbnail from "../previewers/Thumbnail";
+import Html from "../previewers/Html";
 import {useDispatch, useSelector} from "react-redux";
 import {useParams} from "react-router";
-import {fetchFileMetadata, fetchFileMetadataJsonld, fetchFilePreviews} from "../actions/file";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
-import {fetchDatasetAbout} from "../actions/dataset";
+import {fetchFileMetadata, fetchFileMetadataJsonld, fetchFilePreviews} from "../../actions/file";
+import TopBar from "../navigation/TopBar";
+import {BreadCrumb} from "../navigation/BreadCrumb";
+import {fetchDatasetAbout} from "../../actions/dataset";
 import {useSearchParams} from "react-router-dom";
 
 const useStyles = makeStyles(() => ({
@@ -35,14 +35,14 @@ export default function File() {
 	// path parameter
 	const {fileId} = useParams();
 	// search parameters
-	let [searchParams, setSearchParams] = useSearchParams();
+	let [searchParams, _] = useSearchParams();
 	const datasetId = searchParams.get("datasetId");
 
 	const dispatch = useDispatch();
-	const listFileMetadata = (fileId) => dispatch((fetchFileMetadata(fileId)));
-	const listFileMetadataJsonld = (fileId) => dispatch((fetchFileMetadataJsonld(fileId)));
-	const listFilePreviews = (fileId) => dispatch((fetchFilePreviews(fileId)));
-	const listDatasetAbout = (datasetId) => dispatch(fetchDatasetAbout(datasetId));
+	const listFileMetadata = (fileId:string|undefined) => dispatch((fetchFileMetadata(fileId)));
+	const listFileMetadataJsonld = (fileId:string|undefined) => dispatch((fetchFileMetadataJsonld(fileId)));
+	const listFilePreviews = (fileId:string|undefined) => dispatch((fetchFilePreviews(fileId)));
+	const listDatasetAbout = (datasetId:string|undefined) => dispatch(fetchDatasetAbout(datasetId));
 
 	const fileMetadata = useSelector((state) => state.file.metadata);
 	const fileMetadataJsonld = useSelector((state) => state.file.metadataJsonld);
@@ -113,7 +113,7 @@ export default function File() {
 		<>
 			<TopBar/>
 			<div className="outer-container">
-				<Breadcrumbs paths={paths}/>
+				<BreadCrumb paths={paths}/>
 				<div className="inner-container">
 					<Grid container spacing={4}>
 						<Grid item lg={8} sm={8} xl={8} xs={12}>