♻️ removed complex custom gql query for GET_MANY, finalised media exa…

…mples
ericluwj · Mar 18, 2020 · 06eb1c7 · 06eb1c7
1 parent ad6b54c
commit 06eb1c7
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 211 deletions.
diff --git a/example/amplify/backend/api/raawsamplify/schema.graphql b/example/amplify/backend/api/raawsamplify/schema.graphql
@@ -1,5 +1,6 @@
 type Post
   @model
+  # @searchable
   @auth(
     rules: [
       { allow: owner }
@@ -53,6 +54,7 @@ type Comment
 
 type Media
   @model
+  # @searchable
   @auth(
     rules: [{ allow: owner }, { allow: groups, groups: ["admin", "editor"] }]
   ) {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -16,13 +16,7 @@ import {
   CommentEdit,
   CommentIcon,
 } from './Comment';
-import {
-  MediaList,
-  MediaCreate,
-  MediaShow,
-  MediaEdit,
-  MediaIcon,
-} from './Media';
+import { MediaList, MediaShow, MediaEdit, MediaIcon } from './Media';
 
 export const App = () => {
   // Pass a freshly minted dataProvider when a user object becomes available (meaning we have a JWT)
@@ -62,11 +56,10 @@ export const App = () => {
           icon={CommentIcon}
         />,
         <Resource
-          name="Media"
+          edit={MediaEdit}
           list={MediaList}
           show={MediaShow}
-          create={MediaCreate}
-          edit={MediaEdit}
+          name="Media"
           icon={MediaIcon}
         />,
         // permissions.groups.includes('admin') ? (

diff --git a/example/src/Media/MediaCreate.tsx b/example/src/Media/MediaCreate.tsx
diff --git a/example/src/Media/MediaEdit.tsx b/example/src/Media/MediaEdit.tsx
@@ -1,5 +1,14 @@
-import React from 'react';
+import * as React from 'react';
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { S3Input } from '../../../';
 
-export const MediaEdit = () => {
-  return <div></div>;
+export const MediaEdit = props => {
+  return (
+    <Edit {...props}>
+      <SimpleForm>
+        <TextInput source="name" />
+        <S3Input source="attachment" />
+      </SimpleForm>
+    </Edit>
+  );
 };
diff --git a/example/src/Media/MediaShow.tsx b/example/src/Media/MediaShow.tsx
@@ -1,5 +1,29 @@
-import React from 'react';
+import * as React from 'react';
+import {
+  Show,
+  TextField,
+  SimpleShowLayout,
+  DeleteButton,
+  TopToolbar,
+} from 'react-admin';
+import { S3ImageField } from '../../../';
 
-export const MediaShow = () => {
-  return <div></div>;
+export const MediaShow = props => {
+  console.log('running');
+
+  return (
+    <Show
+      {...props}
+      actions={
+        <TopToolbar>
+          <DeleteButton />
+        </TopToolbar>
+      }
+    >
+      <SimpleShowLayout>
+        <S3ImageField source="attachment" />
+        <TextField source="name" />
+      </SimpleShowLayout>
+    </Show>
+  );
 };
diff --git a/example/src/Media/index.ts b/example/src/Media/index.ts
@@ -1,4 +1,3 @@
-export * from './MediaCreate';
 export * from './MediaEdit';
 export * from './MediaList';
 export * from './MediaShow';

diff --git a/example/src/Post/PostCreate.tsx b/example/src/Post/PostCreate.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Create, TextInput, FormWithRedirect, SaveButton } from 'react-admin';
+import {
+  Create,
+  TextInput,
+  FormWithRedirect,
+  SaveButton,
+  Labeled,
+} from 'react-admin';
 import { Box, Grid, Toolbar, makeStyles } from '@material-ui/core';
 
 import { MediaUploadInput } from '../common';
@@ -39,7 +45,9 @@ export const PostCreate: React.FC<any> = props => {
                 />
               </SanitizeGrid>
               <SanitizeGrid item xs>
-                <MediaUploadInput source="postImageId" {...props} />
+                <Labeled label="Featured Image">
+                  <MediaUploadInput inputField="postImageId" {...props} />
+                </Labeled>
               </SanitizeGrid>
             </SanitizeGrid>
             <Toolbar>

diff --git a/example/src/Post/PostEdit.tsx b/example/src/Post/PostEdit.tsx
@@ -6,7 +6,7 @@ export const PostEdit: React.FC = props => {
   return (
     <Edit {...props}>
       <SimpleForm>
-        <MediaUploadInput source="image.id" />
+        <MediaUploadInput source="image.id" inputField="postImageId" />
         <TextInput source="title" />
         <TextInput source="content" multiline rows={5} />
         {/* <TextInput value={} disabled /> */}

diff --git a/example/src/Post/PostShow.tsx b/example/src/Post/PostShow.tsx
@@ -30,8 +30,15 @@ export const PostShow: React.FC<{
       <TextField source="id" disabled />
       <TextField source="title" />
       <TextField source="content" />
-      <ReferenceField source="postImageId" reference="Media">
-        <S3ImageField source="attachment" />
+      <ReferenceField
+        label="Featured image"
+        source="image.id"
+        reference="Media"
+      >
+        <S3ImageField
+          source="attachment"
+          style={{ width: 100, height: 'auto' }}
+        />
       </ReferenceField>
       <ReferenceManyField reference="Comment" target="commentsByPost">
         <Datagrid>

diff --git a/example/src/common/MediaUploadInput.tsx b/example/src/common/MediaUploadInput.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Box,
   Button,
   Portal,
   Dialog,
@@ -10,14 +11,8 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/CloseRounded';
-import {
-  TextInput,
-  ReferenceField,
-  useMutation,
-  useNotify,
-  useInput,
-} from 'react-admin';
-import { UPDATE, CREATE } from 'ra-core';
+import { TextInput, ReferenceField, useMutation, useInput } from 'react-admin';
+import { CREATE } from 'ra-core';
 import { S3Input, S3ImageField } from '../../..';
 import { Form, useFormState } from 'react-final-form';
 
@@ -36,19 +31,34 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const MediaUploadInput: React.FC<any> = ({
   source,
+  inputField,
   record,
+  label,
   ...props
 }) => {
-  const { input } = useInput({ source });
-  const { values } = useFormState();
+  /** On mount, create input and set to source value if provided. */
+  const { input } = useInput({ source: inputField });
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    if (record[source] && !mounted.current) {
+      input.onChange(record[source]);
+    }
+    mounted.current = true;
+  }, [input, source, record]);
 
+  /** Handle modal dialog state */
   const [open, setOpen] = React.useState(false);
+
+  /** Mutation action for saving a new media file */
   const [saveMedia, { data, loaded }] = useMutation({
-    type: values[source] ? UPDATE : CREATE,
+    type: CREATE,
     resource: 'Media',
   });
 
-  // listen for change of mutation and close window
+  /** Handle popup form save, use dataProvider via hooks */
+  const handleSave = data => saveMedia({ payload: { data } });
+
+  /** Listen for successful mutation, set field and close window */
   const newlyCreatedMediaId = data?.id;
   React.useEffect(() => {
     if (newlyCreatedMediaId && loaded) {
@@ -57,30 +67,32 @@ export const MediaUploadInput: React.FC<any> = ({
     }
   }, [newlyCreatedMediaId, loaded]);
 
-  /** Handle popup form save, use dataProvider via hooks */
-  const handleSave = data => saveMedia({ payload: { data } });
-
   /** Handles removal of media model connection from parent model */
   const handleRemove = () => input.onChange(undefined);
 
-  const classes = useStyles();
-
-  console.log(source, record);
+  /** Get form values for conditionally rendering form */
+  const { values } = useFormState();
 
+  const classes = useStyles();
   return (
-    <>
+    <Box mb={2}>
       <ReferenceField
         basePath={props.basePath}
         reference="Media"
-        source={source}
-        record={record || values}
+        source={inputField}
+        record={values}
       >
         <S3ImageField source="attachment" />
       </ReferenceField>
-      <Button onClick={() => setOpen(true)}>
-        {values[source] ? 'Change media' : 'Add media'}
-      </Button>
-      <Button onClick={handleRemove}>Remove Media</Button>
+
+      <Box>
+        <Button onClick={() => setOpen(true)}>
+          {values[inputField] ? 'Change media' : 'Add media'}
+        </Button>
+        {values[inputField] && (
+          <Button onClick={handleRemove}>Remove Media</Button>
+        )}
+      </Box>
       <Portal>
         <Dialog open={open}>
           <DialogTitle className={classes.root} disableTypography>
@@ -95,17 +107,17 @@ export const MediaUploadInput: React.FC<any> = ({
           </DialogTitle>
           <Form onSubmit={handleSave} key={1}>
             {(props: any) => (
-              <form onSubmit={props.handleSubmit}>
+              <Box p={2} component="form" onSubmit={props.handleSubmit}>
                 <TextInput source="name" />
                 <S3Input source="attachment" />
                 <Button variant="contained" color="primary" type="submit">
                   Save
                 </Button>
-              </form>
+              </Box>
             )}
           </Form>
         </Dialog>
       </Portal>
-    </>
+    </Box>
   );
 };
diff --git a/package.json b/package.json
@@ -14,7 +14,13 @@
     "prepare": "tsdx build"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "aws-amplify": "^2.2.6",
+    "react-admin": "^3.3.1",
+    "@material-ui/core": "^4.9.5",
+    "@material-ui/icons": "^4.9.1",
+    "react-redux": "^7.2.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   },
   "husky": {
     "hooks": {
@@ -31,33 +37,30 @@
   "author": "Harley Alexander",
   "module": "dist/ra-aws-amplify.esm.js",
   "devDependencies": {
+    "aws-amplify": "^2.2.6",
+    "react-admin": "^3.3.1",
     "@material-ui/core": "^4.9.5",
     "@material-ui/icons": "^4.9.1",
+    "react-redux": "^7.2.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "@types/graphql": "^14.5.0",
     "@types/jest": "^25.1.4",
     "@types/lodash": "^4.14.149",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
-    "aws-amplify": "^2.2.6",
-    "aws-amplify-react": "^3.1.7",
     "husky": "^4.2.3",
-    "lodash.merge": "^4.6.2",
-    "ra-data-graphql": "^3.2.2",
-    "react": "^16.13.0",
-    "react-admin": "^3.3.1",
-    "react-dom": "^16.13.0",
-    "react-redux": "^7.2.0",
     "tsdx": "^0.12.3",
     "tslib": "^1.11.1",
-    "typescript": "^3.8.3",
-    "uuidv4": "^6.0.6"
+    "typescript": "^3.8.3"
   },
   "dependencies": {
     "aws-appsync": "^3.0.2",
     "graphql": "^14.6.0",
-    "graphql-ast-types": "^1.0.2",
-    "graphql-ast-types-browser": "^1.0.2"
+    "lodash.merge": "^4.6.2",
+    "ra-data-graphql": "^3.2.2",
+    "uuidv4": "^6.0.6"
   }
 }
diff --git a/src/S3ImageField/S3ImageField.tsx b/src/S3ImageField/S3ImageField.tsx
@@ -7,6 +7,7 @@ interface S3ImageFieldProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   record?: Record<string, any>;
   label?: string;
   imgProps?: any;
+  addLabel?: boolean;
 }
 
 export const S3ImageField: React.FC<S3ImageFieldProps> = ({
@@ -51,3 +52,7 @@ export const S3ImageField: React.FC<S3ImageFieldProps> = ({
   // otherwise do nothing
   return null;
 };
+
+S3ImageField.defaultProps = {
+  addLabel: true,
+};