resource component

src/features/resources/edit/components/ResourceComponent.js

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, Paper, ButtonBase, TextField } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import style from "../styles";
+import ResourcePreviewComponent from "./ResourcePreviewComponent";
+import { onTextFieldChange } from "../../../../utils/adapters";
+
+const useStyles = makeStyles(style);
+
+const ResourceComponent = ({ resource, onPropertyChange }) => {
+  const classes = useStyles();
+  return (
+    <Paper className={classes.paper}>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={5}>
+          <ButtonBase>
+            <ResourcePreviewComponent resource={resource} />
+          </ButtonBase>
+        </Grid>
+        <Grid item xs={12} sm={7}>
+          <Grid container spacing={2}>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                id="resource-code"
+                label="Code"
+                fullWidth
+                required
+                value={resource.resourceCode}
+                onChange={onTextFieldChange(onPropertyChange("resourceCode"))}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                id="resource-name"
+                label="Name"
+                fullWidth
+                required
+                value={resource.resourceName}
+                onChange={onTextFieldChange(onPropertyChange("resourceName"))}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                id="resource-path"
+                label="Path on disk"
+                fullWidth
+                disabled
+                value={resource.resourcePath}
+              />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            fullWidth
+            multiline
+            rows={3}
+            id="resource-description"
+            label="Description"
+            variant="outlined"
+          />
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};
+
+ResourceComponent.propTypes = {
+  resource: PropTypes.object.isRequired,
+  onPropertyChange: PropTypes.func.isRequired
+};
+
+export default ResourceComponent;

src/features/resources/edit/components/ResourceContainer.js

@@ -3,11 +3,17 @@ import PageTitle from "../../../../components/PageTitle";
 import { useParams } from "react-router-dom";
 import { useResourcesApi } from "../../api";
 import { LoadingText } from "../../../../components";
+import ResourceComponent from "./ResourceComponent";
+import { makeStyles } from "@material-ui/core/styles";
+import style from "../styles";
+
+const useStyles = makeStyles(style);
 
 const ResourceContainer = () => {
   const [state, setState] = useState(null);
   const [loading, setLoading] = useState(false);
 
+  const classes = useStyles();
   const params = useParams();
   const { getResource } = useResourcesApi();
 
@@ -23,12 +29,21 @@ const ResourceContainer = () => {
     });
   }, [getResource, isNew, params.id]);
 
+  const handlePropertyChange = (prop) => (value) => {
+    setState((prev) => ({ ...prev, [prop]: value }));
+  };
+
   if (loading || state === null) return <LoadingText lines={15} onPaper />;
 
   return (
     <>
       <PageTitle title={state.resourceName} />
-      <>.................</>
+      <div className={classes.root}>
+        <ResourceComponent
+          resource={state}
+          onPropertyChange={handlePropertyChange}
+        />
+      </div>
     </>
   );
 };

src/features/resources/edit/components/ResourcePreviewComponent.js

@@ -1,3 +1,61 @@
-const ResourcePreviewComponent = () => {};
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import UnknownResourceType from "../../../../images/UnknownResourceType.jpg";
+import style from "../styles";
+import { makeStyles } from "@material-ui/core/styles";
+import { useResourceSecurity } from "../../../../hooks";
+
+const useStyles = makeStyles(style);
+
+const RESOURCE_TYPES = {
+  UNKNOWN: "UNKNOWN",
+  IMAGE: "IMAGE"
+};
+
+const getResourceType = (mimeType) => {
+  if (mimeType.startsWith("image/")) return RESOURCE_TYPES.IMAGE;
+  return RESOURCE_TYPES.UNKNOWN;
+};
+
+const ResourcePreviewComponent = ({ resource }) => {
+  const classes = useStyles();
+  const { secureUrl } = useResourceSecurity();
+
+  const resourceType = useMemo(() => getResourceType(resource.mimeType), [
+    resource.mimeType
+  ]);
+
+  const resourceUrl = useMemo(
+    () => (resource.secured ? secureUrl(resource.urls[2]) : resource.urls[2]),
+    [resource.secured, resource.urls, secureUrl]
+  );
+
+  const isImage = useMemo(() => resourceType === RESOURCE_TYPES.IMAGE, [
+    resourceType
+  ]);
+  const isUnknown = useMemo(() => resourceType === RESOURCE_TYPES.UNKNOWN, [
+    resourceType
+  ]);
+
+  return (
+    <>
+      {isImage && (
+        <img src={resourceUrl} alt="..." className={classes.resourceImage} />
+      )}
+
+      {isUnknown && (
+        <img
+          src={UnknownResourceType}
+          alt="..."
+          className={classes.resourceImage}
+        />
+      )}
+    </>
+  );
+};
+
+ResourcePreviewComponent.propTypes = {
+  resource: PropTypes.object.isRequired
+};
 
 export default ResourcePreviewComponent;

src/features/resources/edit/styles.js

@@ -0,0 +1,19 @@
+const style = (theme) => {
+  return {
+    root: {
+      flexGrow: 1
+    },
+    paper: {
+      padding: theme.spacing(2),
+      margin: "auto"
+    },
+    resourceImage: {
+      margin: "auto",
+      display: "block",
+      maxWidth: "100%",
+      maxHeight: "100%"
+    }
+  };
+};
+
+export default style;

src/utils/adapters/index.js

@@ -0,0 +1,2 @@
+export const onTextFieldChange = (onPropertyChange) => (event) =>
+  onPropertyChange(event.target.value);