diff --git a/src/actions/dataset.js b/src/actions/dataset.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Dataset.jsx b/src/components/Dataset.jsx
index e69de29..f8928f0 100644
--- a/src/components/Dataset.jsx
+++ b/src/components/Dataset.jsx
@@ -0,0 +1,97 @@
+import React, {useEffect, useState} from "react";
+import TopBar from "./childComponents/TopBar";
+import Breadcrumbs from "./childComponents/BreadCrumb";
+import {makeStyles} from "@material-ui/core/styles";
+import {Link, Button} from "@material-ui/core";
+import File from "./File";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ flexGrow: 1,
+ },
+ appBar:{
+ background: "#FFFFFF",
+ boxShadow: "none",
+ },
+ tab:{
+ fontStyle: "normal",
+ fontWeight: "normal",
+ fontSize: "16px",
+ color: "#495057",
+ textTransform:"capitalize",
+ },
+ infoCard:{
+ padding: "48px 0",
+ },
+ title:{
+ fontWeight: "600",
+ fontSize: "16px",
+ color: "#000000",
+ marginBottom:"8px"
+ },
+ content:{
+ fontSize: "14px",
+ color: "#000000",
+ }
+}));
+
+export default function Dataset(props) {
+ const classes = useStyles();
+
+ const [fileId, setFileId] = useState("");
+ const [paths, setPaths] = useState(["explore","collection", "datasetID"]);
+
+ const {
+ listFileMetadata, fileMetadata,
+ listFileExtractedMetadata, fileExtractedMetadata,
+ listFileMetadataJsonld, fileMetadataJsonld,
+ listFilePreviews, filePreviews,
+ ...other
+ } = props;
+
+ useEffect(() => {
+ // set breadcrumbs
+ setPaths(paths => [...paths.slice(0, paths.length), fileMetadata["filename"]]);
+ }, [fileMetadata]);
+
+ const selectFile = (selectedFileId) => {
+ // pass that id to file component
+ setFileId(selectedFileId);
+
+ // load file information
+ listFileMetadata(selectedFileId);
+ listFileExtractedMetadata(selectedFileId);
+ listFileMetadataJsonld(selectedFileId);
+ listFilePreviews(selectedFileId);
+
+ {/**/}
+ {/*
*/}
+ {/*
*/}
+
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {
+ fileId !== "" ?
+
+ :
+ <>>
+ }
+
+
+ );
+}
diff --git a/src/components/File.jsx b/src/components/File.jsx
index 4c780a4..37cfedf 100644
--- a/src/components/File.jsx
+++ b/src/components/File.jsx
@@ -1,8 +1,6 @@
import React, {useEffect, useState} from "react";
import config from "../app.config";
-import TopBar from "./childComponents/TopBar";
-import Breadcrumbs from "./childComponents/BreadCrumb";
-import {AppBar, Box, Tab, Tabs, Typography, Grid, Divider} from "@material-ui/core"
+import {AppBar, Box, Divider, Grid, Tab, Tabs, Typography} from "@material-ui/core"
import {makeStyles} from "@material-ui/core/styles";
import {ClowderInput} from "./styledComponents/ClowderInput";
import {ClowderButton} from "./styledComponents/ClowderButton";
@@ -11,42 +9,36 @@ const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
- appBar:{
+ appBar: {
background: "#FFFFFF",
boxShadow: "none",
},
- tab:{
+ tab: {
fontStyle: "normal",
fontWeight: "normal",
fontSize: "16px",
color: "#495057",
- textTransform:"capitalize",
+ textTransform: "capitalize",
},
- infoCard:{
+ infoCard: {
padding: "48px 0",
},
- title:{
+ title: {
fontWeight: "600",
fontSize: "16px",
color: "#000000",
- marginBottom:"8px"
+ marginBottom: "8px"
},
- content:{
+ content: {
fontSize: "14px",
color: "#000000",
-}
+ }
}));
export default function File(props) {
const classes = useStyles();
- const {
- listFileMetadata, fileMetadata,
- listFileExtractedMetadata, fileExtractedMetadata,
- listFileMetadataJsonld, fileMetadataJsonld,
- listFilePreviews, filePreviews,
- ...other
- } = props;
+ const {fileMetadata, fileExtractedMetadata, fileMetadataJsonld, filePreviews, fileId, ...other} = props;
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
@@ -69,7 +61,7 @@ export default function File(props) {
previewerScripts[0].parentNode.removeChild(previewerScripts[0]);
}
- if (filePreviews.length > 0 && filePreviews[0].previews !== undefined) {
+ if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) {
let uniquePid = [];
// look at which previewer to load
filePreviews[0].previews.map((filePreview, index) => {
@@ -90,14 +82,7 @@ export default function File(props) {
}
});
}
- }, [filePreviews])
-
- const selectFile = (fileId) => {
- listFileMetadata(fileId);
- listFileExtractedMetadata(fileId);
- listFileMetadataJsonld(fileId);
- listFilePreviews(fileId);
- }
+ }, [filePreviews]);
const handleTabChange = (event, newTabIndex) => {
setSelectedTabIndex(newTabIndex);
@@ -105,116 +90,108 @@ export default function File(props) {
return (
-
-
-
-
- {/*tabs*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- filePreviews.length > 0 && filePreviews[0].previews !== undefined
- ?
- filePreviews[0].previews.map((filePreview, index) => {
- const Configuration = {};
- Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`;
- Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`;
- Configuration.fileid = filePreview["pv_id"];
- Configuration.previewer = `/public${filePreview["p_path"]}/`;
- Configuration.fileType = filePreview["pv_contenttype"];
- Configuration.APIKEY = config.apikey;
- Configuration.authenticated = true;
- // Configuration.metadataJsonld = fileMetadataJsonld;
-
- let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase();
- return ();
- })
- :
- <>>
- }
-
-
- NA
-
-
- {
+ {/*tabs*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined
+ ?
+ filePreviews[0].previews.map((filePreview, index) => {
+ const Configuration = {};
+ Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`;
+ Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`;
+ Configuration.fileid = filePreview["pv_id"];
+ Configuration.previewer = `/public${filePreview["p_path"]}/`;
+ Configuration.fileType = filePreview["pv_contenttype"];
+ Configuration.APIKEY = config.apikey;
+ Configuration.authenticated = true;
+ // Configuration.metadataJsonld = fileMetadataJsonld;
+
+ let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase();
+ return ();
+ })
+ :
+ <>>
+ }
+
+
+ NA
+
+
+ {
+ fileMetadataJsonld !== undefined && fileMetadataJsonld.length > 0 ?
fileMetadataJsonld.map((item) => {
return Object.keys(item["content"]).map((key) => {
return ({key} - {JSON.stringify(item["content"][key])}
);
}
);
- })
- }
-
-
- Extractions
-
-
- Comments
-
-
-
-
- About
- Type: {fileMetadata["content-type"]}
- File size: {fileMetadata["size"]}
- Uploaded on: {fileMetadata["date-created"]}
- Uploaded as: {fileMetadata["filename"]}
- Uploaded by: {fileMetadata["authorId"]}
- Status: {fileMetadata["status"]}
-
-
-
- Statistics
- Views:10
- Last viewed:Jun 07, 2021 21:49:09
- Downloads:0
- Last downloaded:Never
-
-
-
- Tags
-
-
-
-
-
- Search
-
+ }) : <>>
+ }
+
+
+ Extractions
+
+
+ Comments
+
+
+
+ {
+ fileMetadata !== undefined ?
+
+ About
+ Type: {fileMetadata["content-type"]}
+ File
+ size: {fileMetadata["size"]}
+ Uploaded
+ on: {fileMetadata["date-created"]}
+ Uploaded
+ as: {fileMetadata["filename"]}
+ Uploaded
+ by: {fileMetadata["authorId"]}
+ Status: {fileMetadata["status"]}
+ : <>>
+ }
+
+
+ Statistics
+ Views:10
+ Last viewed:Jun 07, 2021 21:49:09
+ Downloads:0
+ Last downloaded:Never
+
+
+
+ Tags
+
+
+
+
+
+ Search
-
-
-
+
+
+
-
-
-
+
-
-
);
}
diff --git a/src/components/childComponents/BreadCrumb.jsx b/src/components/childComponents/BreadCrumb.jsx
index 3548096..ccd5963 100644
--- a/src/components/childComponents/BreadCrumb.jsx
+++ b/src/components/childComponents/BreadCrumb.jsx
@@ -19,28 +19,28 @@ const useStyles = makeStyles((theme) => ({
fontStyle: "normal",
fontWeight: "600",
fontSize: "24px",
- color: "#6C757D"
+ color: "#6C757D",
+ textTransform: "capitalize"
}
}));
export default function Breadcrumbs(props) {
const classes = useStyles();
- const {
- filename, ...other} = props;
+ const { paths, ...other} = props;
return (
-
- Explore
-
-
- Collection
-
-
- Dataset
-
- {filename}
+ {
+ paths.map((path, index) => {
+ if (index !== paths.length -1){
+ return ({path});
+ }
+ else{
+ return ({path});
+ }
+ })
+ }
diff --git a/src/containers/Dataset.jsx b/src/containers/Dataset.jsx
new file mode 100644
index 0000000..c9cdc5f
--- /dev/null
+++ b/src/containers/Dataset.jsx
@@ -0,0 +1,38 @@
+import {connect} from "react-redux";
+import DatasetComponents from "../components/Dataset";
+import {
+ fetchFileExtractedMetadata,
+ fetchFileMetadata,
+ fetchFileMetadataJsonld,
+ fetchFilePreviews
+} from "../actions/file";
+
+const mapStateToProps = (state) => {
+ return {
+ fileMetadata: state.file.metadata,
+ fileExtractedMetadata: state.file.extractedMetadata,
+ fileMetadataJsonld: state.file.metadataJsonld,
+ filePreviews: state.file.previews,
+ };
+};
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ listFileMetadata: (id) => {
+ dispatch(fetchFileMetadata(id));
+ },
+ listFileExtractedMetadata: (id) => {
+ dispatch(fetchFileExtractedMetadata(id));
+ },
+ listFileMetadataJsonld: (id) => {
+ dispatch(fetchFileMetadataJsonld(id));
+ },
+ listFilePreviews: (fileId) => {
+ dispatch(fetchFilePreviews(fileId));
+ }
+ };
+};
+
+const Dataset = connect(mapStateToProps, mapDispatchToProps)(DatasetComponents);
+
+export default Dataset;
diff --git a/src/routes.js b/src/routes.js
index 5455269..fc61e17 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,12 +2,14 @@ import React from "react";
import {Route, Switch} from "react-router-dom";
import File from "./containers/File";
+import Dataset from "./containers/Dataset";
export default (
- {
- return ();
+ {
+ return ();
}}/>
+ {return ();}}/>
);