cleaning up a bit

GoogleForCreators · Jul 8, 2020 · 7faed40 · 7faed40
1 parent 8d313c1
commit 7faed40
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 37 deletions.
diff --git a/assets/src/dashboard/components/fileUpload/index.js b/assets/src/dashboard/components/fileUpload/index.js
@@ -156,8 +156,8 @@ function disableDefaults(e) {
 const FileUpload = ({
   id,
   label,
-  handleDelete,
-  handleSubmit,
+  onDelete,
+  onSubmit,
   isFileNameVisible,
   isMultiple,
   ariaLabel,
@@ -169,29 +169,29 @@ const FileUpload = ({
   const fileInputRef = useRef(null);
   const [isDragging, setDragging] = useState(false);
 
-  const handleFileStructuringPreSubmit = useCallback(
+  const handleUploadFile = useCallback(
     (files) => {
-      handleSubmit(Object.values(files));
+      onSubmit(Object.values(files));
     },
-    [handleSubmit]
+    [onSubmit]
   );
 
   const handleChange = useCallback(
     (event) => {
-      handleFileStructuringPreSubmit(event.target.files);
+      handleUploadFile(event.target.files);
       fileInputRef.current.value = '';
     },
-    [handleFileStructuringPreSubmit]
+    [handleUploadFile]
   );
 
   const handleDragDrop = useCallback(
     (e) => {
       disableDefaults(e);
       const files = e.dataTransfer?.files;
-      handleFileStructuringPreSubmit(files);
+      handleUploadFile(files);
       setDragging(false);
     },
-    [handleFileStructuringPreSubmit]
+    [handleUploadFile]
   );
 
   const handleDrag = useCallback(
@@ -206,11 +206,11 @@ const FileUpload = ({
     [isDragging]
   );
 
-  const onDeleteFile = useCallback(
+  const handleDeleteFile = useCallback(
     (index, fileData) => {
-      handleDelete(index, fileData);
+      onDelete(index, fileData);
     },
-    [handleDelete]
+    [onDelete]
   );
 
   useEffect(() => {
@@ -239,10 +239,10 @@ const FileUpload = ({
         <UploadedContentContainer data-testid="file-upload-content-container">
           {uploadedContent.map((file, idx) => (
             <UploadedContent key={idx}>
-              {Boolean(handleDelete) && (
+              {Boolean(onDelete) && (
                 <DeleteButton
                   data-testid={`file-upload-delete-button_${idx}`}
-                  onClick={() => onDeleteFile(idx, file)}
+                  onClick={() => handleDeleteFile(idx, file)}
                   aria-label={sprintf(
                     /* translators: %s is the file name to delete */
                     __('Delete %s', 'web-stories'),
@@ -286,8 +286,8 @@ const FileUpload = ({
 FileUpload.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   label: PropTypes.string.isRequired,
-  handleDelete: PropTypes.func,
-  handleSubmit: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onSubmit: PropTypes.func.isRequired,
   isMultiple: PropTypes.bool,
   isFileNameVisible: PropTypes.bool,
   ariaLabel: PropTypes.string,

diff --git a/assets/src/dashboard/components/fileUpload/stories/index.js b/assets/src/dashboard/components/fileUpload/stories/index.js
@@ -40,7 +40,7 @@ export const _default = () => {
   const [uploadedContent, setUploadedContent] = useState([]);
 
   const formatFiles = async (files) => {
-    action('handleSubmit fired')(files);
+    action('onSubmit fired')(files);
     const resources = await Promise.all(
       files.map(async (file) => ({
         localResource: await getResourceFromLocalFile(file),
@@ -61,7 +61,7 @@ export const _default = () => {
   };
 
   const deleteUploadedContent = useCallback((index, fileData) => {
-    action('handleDelete fired')(index, fileData);
+    action('onDelete fired')(index, fileData);
     setUploadedContent((existingUploadedContent) => {
       existingUploadedContent.splice(index, 1);
       return [...existingUploadedContent];
@@ -72,8 +72,8 @@ export const _default = () => {
     <Container>
       <FileUpload
         acceptableFormats={['.jpg', '.jpeg', '.png', '.gif']}
-        handleSubmit={formatFiles}
-        handleDelete={deleteUploadedContent}
+        onSubmit={formatFiles}
+        onDelete={deleteUploadedContent}
         id={'898989'}
         label={text('label', 'Upload')}
         isMultiple={boolean('isMultiple', true)}

diff --git a/assets/src/dashboard/components/fileUpload/test/fileUpload.js b/assets/src/dashboard/components/fileUpload/test/fileUpload.js
@@ -29,8 +29,8 @@ describe('FileUpload', () => {
   it('should render empty upload component by default', () => {
     const { queryAllByTestId } = renderWithTheme(
       <FileUpload
-        handleSubmit={jest.fn}
-        handleDelete={jest.fn}
+        onSubmit={jest.fn}
+        onDelete={jest.fn}
         id={'898989'}
         label="Upload"
         ariaLabel="Click to upload a file"
@@ -40,13 +40,13 @@ describe('FileUpload', () => {
     expect(queryAllByTestId('file-upload-content-container')).toHaveLength(0);
   });
 
-  it('should trigger handleSubmit when file is added through input', () => {
-    const handleSubmitMock = jest.fn();
+  it('should trigger onSubmit when file is added through input', () => {
+    const onSubmitMock = jest.fn();
 
     const { getByTestId } = renderWithTheme(
       <FileUpload
-        handleSubmit={handleSubmitMock}
-        handleDelete={jest.fn}
+        onSubmit={onSubmitMock}
+        onDelete={jest.fn}
         id={'898989'}
         label="Upload"
         ariaLabel="Click to upload a file"
@@ -58,19 +58,19 @@ describe('FileUpload', () => {
     expect(UploadInput).toBeDefined();
     fireEvent.click(UploadInput);
     fireEvent.change(UploadInput, { target: { files: {} } });
-    expect(handleSubmitMock).toHaveBeenCalledTimes(1);
+    expect(onSubmitMock).toHaveBeenCalledTimes(1);
   });
 
-  it('should trigger handleSubmit when file is dropped in container', () => {
-    const handleSubmitMock = jest.fn();
+  it('should trigger onSubmit when file is dropped in container', () => {
+    const onSubmitMock = jest.fn();
 
     const mockFile = new File([''], 'mockfile.png', {
       type: 'image/png',
     });
     const { getByTestId } = renderWithTheme(
       <FileUpload
-        handleSubmit={handleSubmitMock}
-        handleDelete={jest.fn}
+        onSubmit={onSubmitMock}
+        onDelete={jest.fn}
         id={'898989'}
         label="Upload"
         ariaLabel="Click to upload a file"
@@ -95,16 +95,16 @@ describe('FileUpload', () => {
 
     fireEvent(DropArea, dropEvent);
 
-    expect(handleSubmitMock).toHaveBeenCalledTimes(1);
+    expect(onSubmitMock).toHaveBeenCalledTimes(1);
   });
 
-  it('should trigger handleDelete when delete button is clicked on an uploaded file', () => {
-    const handleDeleteMock = jest.fn();
+  it('should trigger onDelete when delete button is clicked on an uploaded file', () => {
+    const onDeleteMock = jest.fn();
 
     const { getByTestId } = renderWithTheme(
       <FileUpload
-        handleSubmit={jest.fn}
-        handleDelete={handleDeleteMock}
+        onSubmit={jest.fn}
+        onDelete={onDeleteMock}
         id={'898989'}
         label="Upload"
         ariaLabel="Click to upload a file"
@@ -121,6 +121,6 @@ describe('FileUpload', () => {
     const DeleteFileButton = getByTestId('file-upload-delete-button_0');
     expect(DeleteFileButton).toBeDefined();
     fireEvent.click(DeleteFileButton);
-    expect(handleDeleteMock).toHaveBeenCalledTimes(1);
+    expect(onDeleteMock).toHaveBeenCalledTimes(1);
   });
 });