From 3d6d28500fa034e95e5f17ba94ccd239d00d0d07 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Tue, 1 Nov 2022 09:31:30 -0500 Subject: [PATCH 1/6] reformat --- src/actions/file.js | 4 +++- src/components/previewers/Html.jsx | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/actions/file.js b/src/actions/file.js index f3efef6..62bf995 100644 --- a/src/actions/file.js +++ b/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) => { diff --git a/src/components/previewers/Html.jsx b/src/components/previewers/Html.jsx index 92190bc..fed8ab6 100644 --- a/src/components/previewers/Html.jsx +++ b/src/components/previewers/Html.jsx @@ -1,5 +1,4 @@ import React from "react"; -import Link from "@material-ui/core/Link"; export default function Html(props) { const {fileId, htmlSrc, ...other} = props; From 3e31c6d099285876df5cb64f7a8770b31df0e903 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Tue, 1 Nov 2022 10:20:45 -0500 Subject: [PATCH 2/6] first pass turn javascript into typescript --- src/actions/dataset.js | 2 +- src/components/{Dashbard.jsx => Dashbard.tsx} | 22 ++++----- src/components/childComponents/ActionCard.jsx | 0 src/components/childComponents/BreadCrumb.jsx | 47 ------------------- src/components/childComponents/Followers.jsx | 0 src/components/childComponents/Following.jsx | 0 .../childComponents/MySelections.jsx | 0 .../childComponents/UserInfoCard.jsx | 0 .../CreateDataset.tsx} | 25 +++++----- .../{Dataset.jsx => datasets/Dataset.tsx} | 34 +++++++------- src/components/{File.jsx => files/File.tsx} | 32 ++++++------- .../UploadFile.jsx => files/UploadFile.tsx} | 21 +++++---- src/components/navigation/BreadCrumb.tsx | 28 +++++++++++ .../TopBar.jsx => navigation/TopBar.tsx} | 8 ++-- .../styledComponents/ClowderButton.jsx | 18 ------- .../styledComponents/ClowderButton.tsx | 14 ++++++ .../styledComponents/ClowderInput.jsx | 16 ------- .../styledComponents/ClowderInput.tsx | 15 ++++++ .../ClowderMetadataFormHelperText.tsx | 9 ++++ .../ClowderMetadataSelect.tsx | 17 +++++++ .../ClowderMetadataTextField.tsx | 18 +++++++ ...oreInputLabel.jsx => IncoreInputLabel.tsx} | 0 .../{IncoreSelect.jsx => IncoreSelect.tsx} | 0 src/routes.tsx | 4 +- 24 files changed, 178 insertions(+), 152 deletions(-) rename src/components/{Dashbard.jsx => Dashbard.tsx} (93%) delete mode 100644 src/components/childComponents/ActionCard.jsx delete mode 100644 src/components/childComponents/BreadCrumb.jsx delete mode 100644 src/components/childComponents/Followers.jsx delete mode 100644 src/components/childComponents/Following.jsx delete mode 100644 src/components/childComponents/MySelections.jsx delete mode 100644 src/components/childComponents/UserInfoCard.jsx rename src/components/{childComponents/CreateDataset.jsx => datasets/CreateDataset.tsx} (56%) rename src/components/{Dataset.jsx => datasets/Dataset.tsx} (91%) rename src/components/{File.jsx => files/File.tsx} (89%) rename src/components/{childComponents/UploadFile.jsx => files/UploadFile.tsx} (66%) create mode 100644 src/components/navigation/BreadCrumb.tsx rename src/components/{childComponents/TopBar.jsx => navigation/TopBar.tsx} (84%) delete mode 100644 src/components/styledComponents/ClowderButton.jsx create mode 100644 src/components/styledComponents/ClowderButton.tsx delete mode 100644 src/components/styledComponents/ClowderInput.jsx create mode 100644 src/components/styledComponents/ClowderInput.tsx create mode 100644 src/components/styledComponents/ClowderMetadataFormHelperText.tsx create mode 100644 src/components/styledComponents/ClowderMetadataSelect.tsx create mode 100644 src/components/styledComponents/ClowderMetadataTextField.tsx rename src/components/styledComponents/{IncoreInputLabel.jsx => IncoreInputLabel.tsx} (100%) rename src/components/styledComponents/{IncoreSelect.jsx => IncoreSelect.tsx} (100%) diff --git a/src/actions/dataset.js b/src/actions/dataset.js index 97297d0..6894e55 100644 --- a/src/actions/dataset.js +++ b/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}`; diff --git a/src/components/Dashbard.jsx b/src/components/Dashbard.tsx similarity index 93% rename from src/components/Dashbard.jsx rename to src/components/Dashbard.tsx index 90061f3..9a24b61 100644 --- a/src/components/Dashbard.jsx +++ b/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) { <>
- +
@@ -258,7 +258,7 @@ function TabPanel(props) { ); } -function a11yProps(index) { +function a11yProps(index:number) { return { id: `dashboard-tab-${index}`, "aria-controls": `dashboard-tabpanel-${index}`, diff --git a/src/components/childComponents/ActionCard.jsx b/src/components/childComponents/ActionCard.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/childComponents/BreadCrumb.jsx b/src/components/childComponents/BreadCrumb.jsx deleted file mode 100644 index 1c1e504..0000000 --- a/src/components/childComponents/BreadCrumb.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import MuiBreadcrumbs from "@mui/material/Breadcrumbs"; -import {Button} from "@mui/material"; -import {makeStyles} from "@material-ui/core/styles"; -import {useNavigate} from "react-router"; - -const useStyles = makeStyles((theme) => ({ - breadCrumb: { - padding: "28px" - }, - breadCrumbText: { - fontStyle: "normal", - fontWeight: "600", - fontSize: "24px", - color: "#343A40" - }, - breadCrumbLink: { - fontStyle: "normal", - fontWeight: "600", - fontSize: "24px", - color: "#6C757D", - } -})); - -export default function Breadcrumbs(props) { - const classes = useStyles(); - const history = useNavigate(); - - const {paths} = props; - return ( -
- - { - paths.map((path, index) => { - if (index !== paths.length -1){ - return (); - } - else{ - return (); - } - }) - } - -
- ); -} diff --git a/src/components/childComponents/Followers.jsx b/src/components/childComponents/Followers.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/childComponents/Following.jsx b/src/components/childComponents/Following.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/childComponents/MySelections.jsx b/src/components/childComponents/MySelections.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/childComponents/UserInfoCard.jsx b/src/components/childComponents/UserInfoCard.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/childComponents/CreateDataset.jsx b/src/components/datasets/CreateDataset.tsx similarity index 56% rename from src/components/childComponents/CreateDataset.jsx rename to src/components/datasets/CreateDataset.tsx index 26c5309..791d6a6 100644 --- a/src/components/childComponents/CreateDataset.jsx +++ b/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..." > -
{onSave(formData);}}> + ["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets} + onSubmit={({formData}, _) => {onSave(formData);}}> - + Create
diff --git a/src/components/Dataset.jsx b/src/components/datasets/Dataset.tsx similarity index 91% rename from src/components/Dataset.jsx rename to src/components/datasets/Dataset.tsx index 2b1e0ec..670365a 100644 --- a/src/components/Dataset.jsx +++ b/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; }) => { setAnchorEl(event.currentTarget); }; @@ -169,7 +169,7 @@ export default function Dataset() { <>
- +
@@ -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}`, diff --git a/src/components/File.jsx b/src/components/files/File.tsx similarity index 89% rename from src/components/File.jsx rename to src/components/files/File.tsx index 052a90e..99dc523 100644 --- a/src/components/File.jsx +++ b/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() { <>
- +
diff --git a/src/components/childComponents/UploadFile.jsx b/src/components/files/UploadFile.tsx similarity index 66% rename from src/components/childComponents/UploadFile.jsx rename to src/components/files/UploadFile.tsx index 4257723..77242aa 100644 --- a/src/components/childComponents/UploadFile.jsx +++ b/src/components/files/UploadFile.tsx @@ -1,21 +1,24 @@ import React, {useState} from "react"; -import {Box, Button, Container} from "@material-ui/core"; +import {Box, Container} from "@material-ui/core"; import LoadingOverlay from "react-loading-overlay-ts"; -import {makeStyles} from "@material-ui/core/styles"; import Form from "@rjsf/material-ui"; import {uploadFile} from "../../utils/file.js"; import fileSchema from "../../schema/fileSchema.json"; import {useNavigate} from "react-router"; +import {FormProps} from "@rjsf/core"; +import {ClowderButton} from "../styledComponents/ClowderButton"; -const useStyles = makeStyles(); +type Props = { + selectedDatasetId: string, + setOpen: any +} -export default function UploadFile(props) { +export default function UploadFile(props:Props) { const {selectedDatasetId, setOpen} = props; - const classes = useStyles(); // use history hook to redirect/navigate between routes const history = useNavigate(); @@ -23,7 +26,7 @@ export default function UploadFile(props) { const [loading, setLoading] = useState(false); - const onSave = async (formData) => { + const onSave = async (formData:FormData) => { setLoading(true); const response = await uploadFile(formData, selectedDatasetId); setLoading(false); @@ -44,10 +47,10 @@ export default function UploadFile(props) { spinner text="Saving..." > -
{onSave(formData);}}> + ["schema"]} uiSchema={fileSchema["uiSchema"]} + onSubmit={({formData}, _) => {onSave(formData);}}> - + Upload
diff --git a/src/components/navigation/BreadCrumb.tsx b/src/components/navigation/BreadCrumb.tsx new file mode 100644 index 0000000..3c4c3d7 --- /dev/null +++ b/src/components/navigation/BreadCrumb.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import MuiBreadcrumbs from "@mui/material/Breadcrumbs"; +import {Button} from "@mui/material"; +import {useNavigate} from "react-router-dom"; + +type BreadCrumbProps = { + paths: any +} +export const BreadCrumb: React.FC = (props:BreadCrumbProps) => { + const { paths } = props; + const history = useNavigate(); + + return ( + + { + paths.map((path:any, index:number) => { + if (index !== paths.length -1){ + return (); + } + else{ + return (); + } + }) + } + + ); +}; diff --git a/src/components/childComponents/TopBar.jsx b/src/components/navigation/TopBar.tsx similarity index 84% rename from src/components/childComponents/TopBar.jsx rename to src/components/navigation/TopBar.tsx index eab8609..ab0ce69 100644 --- a/src/components/childComponents/TopBar.jsx +++ b/src/components/navigation/TopBar.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import {makeStyles} from '@material-ui/core/styles'; -import {AppBar, Link, Toolbar, Typography,} from '@material-ui/core'; +import React from "react"; +import {makeStyles} from "@material-ui/core/styles"; +import {AppBar, Link, Toolbar, Typography,} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ root: { @@ -39,7 +39,7 @@ export default function TopBar() {
- clowder-logo-sm + clowder-logo-sm Home diff --git a/src/components/styledComponents/ClowderButton.jsx b/src/components/styledComponents/ClowderButton.jsx deleted file mode 100644 index a0ecbcc..0000000 --- a/src/components/styledComponents/ClowderButton.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import {styled} from "@material-ui/core/styles"; -import {Button} from "@material-ui/core"; - -export const ClowderButton = styled(Button)({ - height: "41px", - width: "100%", - fontSize: "16px", - backgroundColor: "#FFFFFF", - // "&:hover": { - // backgroundColor: "#2C4170" - // }, - color: "#007BFF", - border: "1px solid #007BFF", - borderRadius: "4px", - textTransform: "capitalize" -}); - - diff --git a/src/components/styledComponents/ClowderButton.tsx b/src/components/styledComponents/ClowderButton.tsx new file mode 100644 index 0000000..dd2be21 --- /dev/null +++ b/src/components/styledComponents/ClowderButton.tsx @@ -0,0 +1,14 @@ +import {styled} from "@mui/styles"; +import {Button} from "@mui/material"; + +export const ClowderButton = styled(Button)({ + height: "41px", + width: "100%", + fontSize: "16px", + border:"1px solid", + borderRadius: "4px", + textTransform: "capitalize", + backgroundColor: "#ffffff", +}); + + diff --git a/src/components/styledComponents/ClowderInput.jsx b/src/components/styledComponents/ClowderInput.jsx deleted file mode 100644 index 2488a96..0000000 --- a/src/components/styledComponents/ClowderInput.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import {styled} from "@material-ui/core/styles"; -import {TextField} from "@material-ui/core"; - -export const ClowderInput = styled(TextField)({ - width: "100%", - "& .MuiInputBase-root": { - height: "41px", - width: "100%", - fontSize: "16px", - backgroundColor: "#FFFFFF", - padding: "6px 12px", - border: "1px solid #CED4DA", - borderRadius: "4px", - color: "#6C757D", - }, -}); diff --git a/src/components/styledComponents/ClowderInput.tsx b/src/components/styledComponents/ClowderInput.tsx new file mode 100644 index 0000000..8e65f3a --- /dev/null +++ b/src/components/styledComponents/ClowderInput.tsx @@ -0,0 +1,15 @@ +import {styled} from "@mui/styles"; +import {TextField} from "@mui/material"; + +export const ClowderInput = styled(TextField)({ + width: "100%", + "& .MuiInputBase-root":{ + // height: "41px", + width: "100%", + fontSize: "14px", + backgroundColor: "#FFFFFF", + // padding:"6px 12px", + border:"1px solid #CED4DA", + borderRadius: "4px", + }, +}); diff --git a/src/components/styledComponents/ClowderMetadataFormHelperText.tsx b/src/components/styledComponents/ClowderMetadataFormHelperText.tsx new file mode 100644 index 0000000..6380918 --- /dev/null +++ b/src/components/styledComponents/ClowderMetadataFormHelperText.tsx @@ -0,0 +1,9 @@ +import {styled} from "@mui/styles"; +import {FormHelperText} from "@mui/material"; +import {theme} from "../../theme"; + + +export const ClowderMetadataFormHelperText = styled(FormHelperText)({ + "color": theme.palette.primary.main, + "background": "#ffffff" +}); diff --git a/src/components/styledComponents/ClowderMetadataSelect.tsx b/src/components/styledComponents/ClowderMetadataSelect.tsx new file mode 100644 index 0000000..e85f3f1 --- /dev/null +++ b/src/components/styledComponents/ClowderMetadataSelect.tsx @@ -0,0 +1,17 @@ +import {styled} from "@mui/styles"; +import {Select} from "@mui/material"; +import {theme} from "../../theme"; + + +export const ClowderMetadataSelect = styled(Select)({ + background: "#ffffff", + "& .Mui-disabled": { + "color": theme.palette.secondary.dark, + "-webkit-text-fill-color": theme.palette.secondary.dark, + "background": theme.palette.background.default + }, + "& .MuiFormHelperText-root":{ + "color": theme.palette.primary.main, + "background": "#ffffff" + } +}); diff --git a/src/components/styledComponents/ClowderMetadataTextField.tsx b/src/components/styledComponents/ClowderMetadataTextField.tsx new file mode 100644 index 0000000..17a3b9e --- /dev/null +++ b/src/components/styledComponents/ClowderMetadataTextField.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import {styled} from "@mui/styles"; +import {TextField} from "@mui/material"; +import {theme} from "../../theme"; + + +export const ClowderMetadataTextField = styled(TextField)({ + background: "#ffffff", + "& .Mui-disabled": { + "color": theme.palette.secondary.dark, + "-webkit-text-fill-color": theme.palette.secondary.dark, + "background": theme.palette.background.default + }, + "& .MuiFormHelperText-root":{ + "color": theme.palette.primary.main, + "background": "#ffffff" + } +}); diff --git a/src/components/styledComponents/IncoreInputLabel.jsx b/src/components/styledComponents/IncoreInputLabel.tsx similarity index 100% rename from src/components/styledComponents/IncoreInputLabel.jsx rename to src/components/styledComponents/IncoreInputLabel.tsx diff --git a/src/components/styledComponents/IncoreSelect.jsx b/src/components/styledComponents/IncoreSelect.tsx similarity index 100% rename from src/components/styledComponents/IncoreSelect.jsx rename to src/components/styledComponents/IncoreSelect.tsx diff --git a/src/routes.tsx b/src/routes.tsx index e0f4a78..7db0954 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -2,8 +2,8 @@ import React from "react"; import {BrowserRouter, Route, Routes} from "react-router-dom"; import Dashboard from "./components/Dashbard"; -import DatasetComponent from "./components/Dataset"; -import FileComponent from "./components/File"; +import DatasetComponent from "./components/datasets/Dataset"; +import FileComponent from "./components/files/File"; export const AppRoutes = (): JSX.Element => { return ( From 54a7716e9c3e0fe1db16bb1427a9b9c62e1fb03d Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Tue, 1 Nov 2022 10:32:34 -0500 Subject: [PATCH 3/6] more typescript --- src/components/previewers/Audio.jsx | 6 ------ src/components/previewers/Audio.tsx | 11 +++++++++++ src/components/previewers/Html.jsx | 6 ------ src/components/previewers/Html.tsx | 10 ++++++++++ .../previewers/{Thumbnail.jsx => Thumbnail.tsx} | 10 ++++++++-- src/components/previewers/{Video.jsx => Video.tsx} | 9 +++++++-- src/{loader.js => loader.ts} | 2 ++ 7 files changed, 38 insertions(+), 16 deletions(-) delete mode 100644 src/components/previewers/Audio.jsx create mode 100644 src/components/previewers/Audio.tsx delete mode 100644 src/components/previewers/Html.jsx create mode 100644 src/components/previewers/Html.tsx rename src/components/previewers/{Thumbnail.jsx => Thumbnail.tsx} (80%) rename src/components/previewers/{Video.jsx => Video.tsx} (51%) rename src/{loader.js => loader.ts} (80%) diff --git a/src/components/previewers/Audio.jsx b/src/components/previewers/Audio.jsx deleted file mode 100644 index 19b052a..0000000 --- a/src/components/previewers/Audio.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; - -export default function Audio(props) { - const {fileId, audioSrc, ...other} = props; - return -} diff --git a/src/components/previewers/Audio.tsx b/src/components/previewers/Audio.tsx new file mode 100644 index 0000000..0dbf171 --- /dev/null +++ b/src/components/previewers/Audio.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +type Props = { + fileId: string, + audioSrc: string +} + +export default function Audio(props: Props) { + const {fileId, audioSrc} = props; + return +} diff --git a/src/components/previewers/Html.jsx b/src/components/previewers/Html.jsx deleted file mode 100644 index fed8ab6..0000000 --- a/src/components/previewers/Html.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; - -export default function Html(props) { - const {fileId, htmlSrc, ...other} = props; - return