Dataset page (#1)

* breadcrum updates

* make app component; seperate dataset

* styling

* connect to API get files within dataset

* use endpint to get files in dataset

* put common style in to main css

* add about dataset

* add thumbnails

* thumbnail works

* temp; thumbnail not working

* finally thumbnail works

* fix thumbnail

* hook with click effect

src/actions/dataset.js

@@ -0,0 +1,56 @@
+import config from "../app.config";
+import {getHeader} from "../utils/common";
+
+export const RECEIVE_FILES_IN_DATASET= "RECEIVE_FILES_IN_DATASET";
+export function receiveFilesInDataset(type, json){
+	return (dispatch) => {
+		dispatch({
+			type: type,
+			files: json,
+			receivedAt: Date.now(),
+		});
+	};
+}
+export function fetchFilesInDataset(id="610d54a15e0e9253e65863f8"){
+	let url = `${config.hostname}/clowder/api/datasets/${id}/files?superAdmin=true`;
+	return (dispatch) => {
+		return fetch(url, {mode:"cors", headers: getHeader()})
+		.then((response) => {
+			if (response.status === 200) {
+				response.json().then(json =>{
+					dispatch(receiveFilesInDataset(RECEIVE_FILES_IN_DATASET, json));
+				});
+			}
+			else {
+				dispatch(receiveFilesInDataset(RECEIVE_FILES_IN_DATASET, []));
+			}
+		});
+	};
+}
+
+export const RECEIVE_DATASET_ABOUT = "RECEIVE_DATASET_ABOUT";
+export function receiveDatasetAbout(type, json){
+	return (dispatch) => {
+		dispatch({
+			type: type,
+			about: json,
+			receivedAt: Date.now(),
+		});
+	};
+}
+export function fetchDatasetAbout(id="610d54a15e0e9253e65863f8"){
+	let url = `${config.hostname}/clowder/api/datasets/${id}?superAdmin=true`;
+	return (dispatch) => {
+		return fetch(url, {mode:"cors", headers: getHeader()})
+		.then((response) => {
+			if (response.status === 200) {
+				response.json().then(json =>{
+					dispatch(receiveDatasetAbout(RECEIVE_DATASET_ABOUT, json));
+				});
+			}
+			else {
+				dispatch(receiveDatasetAbout(RECEIVE_DATASET_ABOUT, []));
+			}
+		});
+	};
+}

src/actions/file.js

@@ -1,33 +1,6 @@
 import config from "../app.config";
 import {getHeader} from "../utils/common";
 
-export const RECEIVE_FILE_METADATA = "RECEIVE_FILE_METADATA";
-export function receiveFileMetadata(type, json){
-	return (dispatch) => {
-		dispatch({
-			type: type,
-			metadata: json,
-			receivedAt: Date.now(),
-		});
-	};
-}
-export function fetchFileMetadata(id){
-	let url = `${config.hostname}/clowder/api/files/${id}/metadata?superAdmin=true`;
-	return (dispatch) => {
-		return fetch(url, {mode:"cors", headers: getHeader()})
-		.then((response) => {
-			if (response.status === 200) {
-				response.json().then(json =>{
-					dispatch(receiveFileMetadata(RECEIVE_FILE_METADATA, json));
-				});
-			}
-			else {
-				dispatch(receiveFileMetadata(RECEIVE_FILE_METADATA, []));
-			}
-		});
-	};
-}
-
 export const RECEIVE_FILE_EXTRACTED_METADATA = "RECEIVE_FILE_EXTRACTED_METADATA";
 export function receiveFileExtractedMetadata(type, json){
 	return (dispatch) => {

src/components/App.jsx

@@ -0,0 +1,114 @@
+import React, {useEffect, useState} from "react";
+import TopBar from "./childComponents/TopBar";
+import Breadcrumbs from "./childComponents/BreadCrumb";
+import {makeStyles} from "@material-ui/core/styles";
+import File from "./File";
+import Dataset from "./Dataset";
+import {fetchFileMetadata} from "../utils/file";
+import {downloadThumbnail} from "../utils/thumbnail";
+
+
+const useStyles = makeStyles((theme) => ({
+
+}));
+
+export default function App(props) {
+	const classes = useStyles();
+
+	const [datasetId, setDatasetId] = useState("");
+	const [selectedFileId, setSelectedFileId] = useState("");
+	const [fileMetadataList, setFileMetadataList] = useState([]);
+	const [thumbnailList, setThumbnailList] = useState([]);
+
+	const [paths, setPaths] = useState(["explore", "collection", "dataset", ""]);
+
+	const {
+		// files
+		listFileExtractedMetadata, fileExtractedMetadata,
+		listFileMetadataJsonld, fileMetadataJsonld,
+		listFilePreviews, filePreviews,
+
+		//dataset
+		listFilesInDataset, filesInDataset,
+		listDatasetAbout, datasetAbout,
+		...other
+	} = props;
+
+	// component did mount
+	useEffect(() => {
+		listFilesInDataset();
+		listDatasetAbout();
+	}, []);
+
+	// // set breadcrumbs
+	// useEffect(() => {
+	// 	setPaths(paths => [...paths.slice(0, paths.length - 1), fileMetadata["filename"]]);
+	// }, [fileMetadata]);
+
+	// get metadata of each files; because we need the thumbnail of each file!!!
+	useEffect(() => {
+
+		(async () => {
+			if (filesInDataset !== undefined && filesInDataset.length > 0){
+
+				let fileMetadataListTemp = [];
+				let thumbnailListTemp = [];
+				await Promise.all(filesInDataset.map(async (fileInDataset) => {
+
+					let fileMetadata = await fetchFileMetadata(fileInDataset["id"]);
+
+					// add thumbnails
+					if (fileMetadata["thumbnail"] !== null && fileMetadata["thumbnail"] !== undefined){
+						let thumbnailURL = await downloadThumbnail(fileMetadata["thumbnail"]);
+						fileMetadataListTemp.push({"id":fileInDataset["id"], "metadata": fileMetadata, "thumbnail": thumbnailURL});
+						thumbnailListTemp.push({"id":fileInDataset["id"], "thumbnail": thumbnailURL})
+					}
+				}));
+
+				setFileMetadataList(fileMetadataListTemp);
+				setThumbnailList(thumbnailListTemp);
+			}
+		})();
+	}, [filesInDataset])
+
+	const selectFile = (selectedFileId) => {
+		// pass that id to file component
+		setSelectedFileId(selectedFileId);
+
+		// load file information
+		listFileExtractedMetadata(selectedFileId);
+		listFileMetadataJsonld(selectedFileId);
+		listFilePreviews(selectedFileId);
+	}
+
+	return (
+		<div>
+			<TopBar/>
+			<div className="outer-container">
+				<Breadcrumbs paths={paths}/>
+				{
+					selectedFileId === "" ?
+						// Dataset page
+						<Dataset selectFile={selectFile}
+								 files={filesInDataset}
+								 thumbnails={thumbnailList}
+								 about={datasetAbout}
+						/>
+						:
+						// file page
+						fileMetadataList.map((fileMetadata) =>{
+							if (selectedFileId === fileMetadata["id"]){
+								return (
+									<File fileMetadata={fileMetadata["metadata"]}
+										  fileExtractedMetadata={fileExtractedMetadata}
+										  fileMetadataJsonld={fileMetadataJsonld}
+										  filePreviews={filePreviews}
+										  fileId={selectedFileId}/>
+								)
+							}
+						})
+				}
+			</div>
+		</div>
+	);
+}