working with consort now

Author: longshuicy

README.md

@@ -5,7 +5,7 @@ custom react frontend working with consort clowder instance
 run `npm install`
 
 ## Run Project
-- Set hostname environment variable: `export CLOWDER_REMOTE_HOSTNAME=https://consort.clowderframework.org/clowder`
+- Set hostname environment variable: `export CLOWDER_REMOTE_HOSTNAME=https://consort.clowderframework.org`
 - Set APIKEY: `export APIKEY={your clowder API key}`
 - run `npm start` when in development mode.
 

package-lock.json

@@ -37,6 +37,8 @@
 		"@mui/lab": "^5.0.0-alpha.73",
 		"@mui/material": "^5.2.8",
 		"@mui/styles": "^5.3.0",
+	  	"@rjsf/core": "^3.2.1",
+	  	"@rjsf/material-ui": "^3.2.1",
 		"babel-polyfill": "^6.26.0",
 		"classnames": "^2.2.6",
 		"date-fns": "^2.28.0",

package.json

@@ -2,7 +2,6 @@ import React, {useState} from "react";
 
 import {Box, Button, Container} from "@material-ui/core";
 
-import LoadingOverlay from "react-loading-overlay";
 import {makeStyles} from "@material-ui/core/styles";
 
 import Form from "@rjsf/material-ui";
@@ -30,18 +29,12 @@ export default function CreateDataset(props) {
 
 	return (
 		<Container>
-			<LoadingOverlay
-				active={loading}
-				spinner
-				text="Saving..."
-			>
-				<Form schema={datasetSchema["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
-					  onSubmit={({formData}, e) => {onSave(formData);}}>
-					<Box className="inputGroup">
-						<Button variant="contained" type="submit" className="form-button-block">Create</Button>
-					</Box>
-				</Form>
-			</LoadingOverlay>
+			<Form schema={datasetSchema["schema"]} uiSchema={datasetSchema["uiSchema"]} // widgets={widgets}
+				  onSubmit={({formData}, e) => {onSave(formData);}}>
+				<Box className="inputGroup">
+					<Button variant="contained" type="submit" className="form-button-block">Create</Button>
+				</Box>
+			</Form>
 		</Container>
 	);
 }

src/components/childComponents/CreateDataset.jsx

@@ -2,7 +2,7 @@ import React, {useState} from "react";
 
 import {Box, Button, Container} from "@material-ui/core";
 
-import LoadingOverlay from "react-loading-overlay";
+// import LoadingOverlay from "react-loading-overlay";
 import {makeStyles} from "@material-ui/core/styles";
 
 import Form from "@rjsf/material-ui";
@@ -36,18 +36,18 @@ export default function UploadFile(props) {
 
 	return (
 		<Container>
-			<LoadingOverlay
-				active={loading}
-				spinner
-				text="Saving..."
-			>
+			{/*<LoadingOverlay*/}
+			{/*	active={loading}*/}
+			{/*	spinner*/}
+			{/*	text="Saving..."*/}
+			{/*>*/}
 				<Form schema={fileSchema["schema"]} uiSchema={fileSchema["uiSchema"]}
 					  onSubmit={({formData}, e) => {onSave(formData);}}>
 					<Box className="inputGroup">
 						<Button variant="contained" type="submit" className="form-button-block">Upload</Button>
 					</Box>
 				</Form>
-			</LoadingOverlay>
+			{/*</LoadingOverlay>*/}
 		</Container>
 	);
 

src/components/childComponents/UploadFile.jsx

@@ -0,0 +1,23 @@
+// Set up your application entry point here...
+///* eslint-disable import/default */
+
+import React from "react";
+import { render } from "react-dom";
+import { Provider } from "react-redux";
+import { AppRoutes } from "./routes";
+import configureStore from "./store/configureStore";
+import {ThemeProvider} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+const store = configureStore();
+import {theme} from './theme';
+
+
+render(
+	<ThemeProvider theme={theme}>
+		<Provider store={store}>
+			<CssBaseline />
+			<AppRoutes />
+		</Provider>
+	</ThemeProvider>
+	, document.getElementById("app")
+);

src/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import {Route, Routes, BrowserRouter} from "react-router-dom";
+
+import App from "./containers/App";
+
+
+export const AppRoutes = (): JSX.Element => {
+	return (
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<App/>} />
+				<Route path="*"
+					   element={
+						   <main style={{ padding: "1rem" }}>
+							   <p>Page Not Found!</p>
+						   </main>
+					   }
+				/>
+			</Routes>
+		</BrowserRouter>
+	)
+}

src/index.tsx

@@ -0,0 +1,57 @@
+import { createTheme } from '@mui/material/styles';
+
+// A custom theme for this app
+export const theme = createTheme({
+	typography: {
+		fontFamily: [
+			'Open Sans',
+			'sans-serif',
+		].join(','),
+	},
+	palette:{
+		primary:{
+			light: "#F7941E",
+			main: "#F7941E",
+			dark: "#e65100",
+			contrastText: '#FFFFFF',
+		},
+		secondary:{
+			light: "#868E96",
+			main: "#6C757D",
+			dark: "#333333",
+		},
+		info:{
+			main:"#0086A1"
+		},
+		background: {
+			default: "#F8F8F8"
+		}
+	},
+	components: {
+		MuiAppBar: {
+			styleOverrides: {
+				colorInherit: {
+					backgroundColor: "#FFFFFF",
+					boxShadow: "none",
+				},
+			},
+			defaultProps: {
+				color: "inherit",
+			},
+		},
+	},
+});
+
+export const searchTheme = {
+	typography: {
+    	fontFamily: theme.typography.fontFamily,
+    	fontSize: "16px",
+	},
+	colors: {
+		textColor: theme.palette.secondary.dark,
+		primaryTextColor: theme.palette.primary.contrastText,
+		primaryColor: theme.palette.primary.main,
+		titleColor: theme.palette.secondary.dark,
+		alertColor: theme.palette.primary.dark,
+	}
+};

src/public/favicon.ico

@@ -1,17 +1,5 @@
-import Cookies from "universal-cookie";
-import jwt_decode from "jwt-decode";
 import config from "../app.config";
 
-const cookies = new Cookies();
-
-
-//NOTE: This is only checking if a cookie is present, but not validating the cookie.
-export const isAuthorized = () => {
-	const authorization = cookies.get("Authorization");
-	return process.env.DEPLOY_ENV === "local" ||
-			(authorization !== undefined && authorization !== "" && authorization !==
-					null);
-};
 
 // construct header
 export function getHeader() {