refactor: files-and-videos folder (openedx#672)

src/files-and-videos/files-page/FileInfoAssetSidebar.jsx → src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -18,10 +18,10 @@ import {
 } from '@edx/paragon';
 import { ContentCopy, InfoOutline } from '@edx/paragon/icons';
 
-import { getFileSizeToClosestByte } from '../data/utils';
+import { getFileSizeToClosestByte } from '../generic/utils';
 import messages from './messages';
 
-const FileInfoAssetSidebar = ({
+const FileInfoModalSidebar = ({
   asset,
   handleLockedAsset,
   // injected
@@ -109,7 +109,7 @@ const FileInfoAssetSidebar = ({
     </Stack>
   );
 };
-FileInfoAssetSidebar.propTypes = {
+FileInfoModalSidebar.propTypes = {
   asset: PropTypes.shape({
     displayName: PropTypes.string.isRequired,
     wrapperType: PropTypes.string.isRequired,
@@ -127,4 +127,4 @@ FileInfoAssetSidebar.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(FileInfoAssetSidebar);
+export default injectIntl(FileInfoModalSidebar);

src/files-and-videos/files-page/AssetThumbnail.jsx → src/files-and-videos/files-page/FileThumbnail.jsx

@@ -5,10 +5,10 @@ import {
   Icon,
   Image,
 } from '@edx/paragon';
-import { getSrc } from '../data/utils';
+import { getSrc } from './data/utils';
 import messages from './messages';
 
-const AssetThumbnail = ({
+const FileThumbnail = ({
   thumbnail,
   wrapperType,
   externalUrl,
@@ -50,13 +50,13 @@ const AssetThumbnail = ({
     </div>
   );
 };
-AssetThumbnail.defaultProps = {
+FileThumbnail.defaultProps = {
   thumbnail: null,
   wrapperType: null,
   externalUrl: null,
   displayName: null,
 };
-AssetThumbnail.propTypes = {
+FileThumbnail.propTypes = {
   thumbnail: PropTypes.string,
   wrapperType: PropTypes.string,
   externalUrl: PropTypes.string,
@@ -69,4 +69,4 @@ AssetThumbnail.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(AssetThumbnail);
+export default injectIntl(FileThumbnail);

src/files-and-videos/files-page/FilesAndUploads.jsx → src/files-and-videos/files-page/FilesPage.jsx

@@ -16,19 +16,22 @@ import {
   getUsagePaths,
   resetErrors,
   updateAssetOrder,
-} from '../data/thunks';
+} from './data/thunks';
 import messages from './messages';
-import FilesAndUploadsProvider from './FilesAndUploadsProvider';
+import FilesPageProvider from './FilesPageProvider';
 import getPageHeadTitle from '../../generic/utils';
-import FileTable from '../FileTable';
-import EditFileErrors from '../EditFileErrors';
-import { getFileSizeToClosestByte } from '../data/utils';
-import ThumbnailColumn from '../table-components/table-custom-columns/ThumbnailColumn';
-import ActiveColumn from '../table-components/table-custom-columns/ActiveColumn';
-import AccessColumn from '../table-components/table-custom-columns/AccessColumn';
-import AssetThumbnail from './AssetThumbnail';
+import {
+  AccessColumn,
+  ActiveColumn,
+  EditFileErrors,
+  FileTable,
+  ThumbnailColumn,
+} from '../generic';
+import { getFileSizeToClosestByte } from '../generic/utils';
+import FileThumbnail from './FileThumbnail';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
 
-const FilesAndUploads = ({
+const FilesPage = ({
   courseId,
   // injected
   intl,
@@ -52,17 +55,24 @@ const FilesAndUploads = ({
     errors: errorMessages,
   } = useSelector(state => state.assets);
 
+  const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleAddFile = (file) => dispatch(addAssetFile(courseId, file, totalCount));
   const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id, totalCount));
   const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId }));
-  const handleLockFile = ({ fileId, locked }) => dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+  const handleLockFile = (fileId, locked) => {
+    handleErrorReset({ errorType: 'lock' });
+    dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+  };
   const handleUsagePaths = (asset) => dispatch(getUsagePaths({ asset, courseId }));
-  const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleFileOrder = ({ newFileIdOrder, sortType }) => {
     dispatch(updateAssetOrder(courseId, newFileIdOrder, sortType));
   };
 
-  const thumbnailPreview = (props) => AssetThumbnail(props);
+  const thumbnailPreview = (props) => FileThumbnail(props);
+  const infoModalSidebar = (asset) => FileInfoModalSidebar({
+    asset,
+    handleLockedAsset: handleLockFile,
+  });
 
   const assets = useModels('assets', assetIds);
   const data = {
@@ -141,7 +151,7 @@ const FilesAndUploads = ({
     );
   }
   return (
-    <FilesAndUploadsProvider courseId={courseId}>
+    <FilesPageProvider courseId={courseId}>
       <main>
         <div className="p-4">
           <EditFileErrors
@@ -169,18 +179,19 @@ const FilesAndUploads = ({
             tableColumns,
             maxFileSize,
             thumbnailPreview,
+            infoModalSidebar,
             files: assets,
           }}
         />
       </main>
-    </FilesAndUploadsProvider>
+    </FilesPageProvider>
   );
 };
 
-FilesAndUploads.propTypes = {
+FilesPage.propTypes = {
   courseId: PropTypes.string.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(FilesAndUploads);
+export default injectIntl(FilesPage);

src/files-and-videos/files-page/FilesAndUploads.test.jsx → src/files-and-videos/files-page/FilesPage.test.jsx

@@ -19,7 +19,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import initializeStore from '../../store';
 import { executeThunk } from '../../utils';
 import { RequestStatus } from '../../data/constants';
-import FilesAndUploads from './FilesAndUploads';
+import FilesPage from './FilesPage';
 import {
   generateFetchAssetApiResponse,
   generateEmptyApiResponse,
@@ -35,9 +35,9 @@ import {
   deleteAssetFile,
   updateAssetLock,
   getUsagePaths,
-} from '../data/thunks';
-import { getAssetsUrl } from '../data/api';
-import messages from '../messages';
+} from './data/thunks';
+import { getAssetsUrl } from './data/api';
+import messages from '../generic/messages';
 
 let axiosMock;
 let store;
@@ -49,7 +49,7 @@ const renderComponent = () => {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <FilesAndUploads courseId={courseId} />
+        <FilesPage courseId={courseId} />
       </AppProvider>
     </IntlProvider>,
   );

src/files-and-videos/files-page/FilesAndUploadsProvider.jsx → src/files-and-videos/files-page/FilesPageProvider.jsx

@@ -1,25 +1,25 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-export const FilesAndUploadsContext = React.createContext({});
+export const FilesPageContext = React.createContext({});
 
-const FilesAndUploadsProvider = ({ courseId, children }) => {
+const FilesPageProvider = ({ courseId, children }) => {
   const contextValue = useMemo(() => ({
     courseId,
     path: `/course/${courseId}/assets`,
   }), []);
   return (
-    <FilesAndUploadsContext.Provider
+    <FilesPageContext.Provider
       value={contextValue}
     >
       {children}
-    </FilesAndUploadsContext.Provider>
+    </FilesPageContext.Provider>
   );
 };
 
-FilesAndUploadsProvider.propTypes = {
+FilesPageProvider.propTypes = {
   courseId: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
 };
 
-export default FilesAndUploadsProvider;
+export default FilesPageProvider;

src/files-and-videos/data/slice.js → src/files-and-videos/files-page/data/slice.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-import { RequestStatus } from '../../data/constants';
+import { RequestStatus } from '../../../data/constants';
 
 const slice = createSlice({
   name: 'assets',

src/files-and-videos/data/thunks.js → src/files-and-videos/files-page/data/thunks.js

@@ -1,11 +1,11 @@
 import { isEmpty } from 'lodash';
-import { RequestStatus } from '../../data/constants';
+import { RequestStatus } from '../../../data/constants';
 import {
   addModel,
   addModels,
   removeModel,
   updateModel,
-} from '../../generic/model-store';
+} from '../../../generic/model-store';
 import {
   getAssets,
   getAssetUsagePaths,

src/files-and-videos/data/utils.js → src/files-and-videos/files-page/data/utils.js

@@ -4,7 +4,7 @@ import {
   AudioFile,
 } from '@edx/paragon/icons';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
-import FILES_AND_UPLOAD_TYPE_FILTERS from './constant';
+import FILES_AND_UPLOAD_TYPE_FILTERS from '../../generic/constants';
 
 ensureConfig([
   'STUDIO_BASE_URL',
@@ -54,55 +54,3 @@ export const getSrc = ({ thumbnail, wrapperType, externalUrl }) => {
     return InsertDriveFile;
   }
 };
-
-export const getFileSizeToClosestByte = (fileSize, numberOfDivides = 0) => {
-  if (fileSize > 1000) {
-    const updatedSize = fileSize / 1000;
-    const incrementNumberOfDivides = numberOfDivides + 1;
-    return getFileSizeToClosestByte(updatedSize, incrementNumberOfDivides);
-  }
-  const fileSizeFixedDecimal = Number.parseFloat(fileSize).toFixed(2);
-  switch (numberOfDivides) {
-  case 1:
-    return `${fileSizeFixedDecimal} KB`;
-  case 2:
-    return `${fileSizeFixedDecimal} MB`;
-  case 3:
-    return `${fileSizeFixedDecimal} GB`;
-  default:
-    return `${fileSizeFixedDecimal} B`;
-  }
-};
-
-export const sortFiles = (files, sortType) => {
-  const [sort, direction] = sortType.split(',');
-  let sortedFiles;
-  if (sort === 'displayName') {
-    sortedFiles = files.sort((f1, f2) => {
-      const lowerCaseF1 = f1[sort].toLowerCase();
-      const lowerCaseF2 = f2[sort].toLowerCase();
-      if (lowerCaseF1 < lowerCaseF2) {
-        return 1;
-      }
-      if (lowerCaseF1 > lowerCaseF2) {
-        return -1;
-      }
-      return 0;
-    });
-  } else {
-    sortedFiles = files.sort((f1, f2) => {
-      if (f1[sort] < f2[sort]) {
-        return 1;
-      }
-      if (f1[sort] > f2[sort]) {
-        return -1;
-      }
-      return 0;
-    });
-  }
-  const sortedIds = sortedFiles.map(file => file.id);
-  if (direction === 'asc') {
-    return sortedIds.reverse();
-  }
-  return sortedIds;
-};

src/files-and-videos/files-page/index.js

@@ -1,3 +1,5 @@
-import FilesAndUploads from './FilesAndUploads';
+import FilesPage from './FilesPage';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
 
-export default FilesAndUploads;
+export default FilesPage;
+export { FileInfoModalSidebar };

src/files-and-videos/EditFileErrors.jsx → src/files-and-videos/generic/EditFileErrors.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { ErrorAlert } from '@edx/frontend-lib-content-components';
-import { RequestStatus } from '../data/constants';
+import { RequestStatus } from '../../data/constants';
 import messages from './messages';
 
 const EditFileErrors = ({

src/files-and-videos/FileInput.jsx → src/files-and-videos/generic/FileInput.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getSupportedFormats } from './videos-page/data/utils';
+import { getSupportedFormats } from '../videos-page/data/utils';
 
 export const useFileInput = ({
   onAddFile,