feat: mock data updates

feat: mock data updates

src/components/AppContainer.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  */
 
 const AppContainer = ({ Component }) => (
-  <div>
+  <div className="bg-light-300">
     <Component />
   </div>
 );

src/components/FilePreview/BaseRenderers/TXTRenderer.jsx → src/components/FilePreview/components/FileRenderer/BaseRenderers/TXTRenderer.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { rendererHooks } from './textHooks';
+import { useTextRendererData } from './textHooks';
 
 const TXTRenderer = ({ url, onError, onSuccess }) => {
-  const { content } = rendererHooks({ url, onError, onSuccess });
+  const { content } = useTextRendererData({ url, onError, onSuccess });
   return (
     <pre className="txt-renderer">
       {content}

src/components/FilePreview/BaseRenderers/textHooks.js → src/components/FilePreview/components/FileRenderer/BaseRenderers/textHooks.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { get } from 'axios';
+import axios from 'axios';
 import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
 
 export const stateKeys = StrictDict({
@@ -12,14 +12,14 @@ export const fetchFile = async ({
   url,
   onError,
   onSuccess,
-}) => get(url)
+}) => axios.get(url)
   .then(({ data }) => {
     onSuccess();
     setContent(data);
   })
   .catch((e) => onError(e.response.status));
 
-export const rendererHooks = ({ url, onError, onSuccess }) => {
+export const useTextRendererData = ({ url, onError, onSuccess }) => {
   const [content, setContent] = useKeyedState(stateKeys.content, '');
   useEffect(() => {
     fetchFile({
@@ -33,6 +33,6 @@ export const rendererHooks = ({ url, onError, onSuccess }) => {
 };
 
 export default {
-  rendererHooks,
+  useTextRendererData,
   fetchFile,
 };

src/components/FilePreview/FileCard.jsx → src/components/FilePreview/components/FileRenderer/FileCard/index.jsx

@@ -8,27 +8,21 @@ import './FileCard.scss';
 /**
  * <FileCard />
  */
-export const FileCard = ({ file, children }) => (
-  <Card className="file-card" key={file.name}>
+const FileCard = ({ file, children }) => (
+  <Card className="file-card" key={file.fileName}>
     <Collapsible
       className="file-collapsible"
       defaultOpen
-      title={<h3 className="file-card-title">{file.name}</h3>}
+      title={<h3 className="file-card-title">{file.fileName}</h3>}
     >
       <div className="preview-panel">
         {children}
       </div>
     </Collapsible>
   </Card>
 );
-FileCard.defaultProps = {
-};
 FileCard.propTypes = {
-  file: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    downloadUrl: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-  }).isRequired,
+  file: PropTypes.shape({ fileName: PropTypes.string.isRequired }).isRequired,
   children: PropTypes.node.isRequired,
 };
 

src/components/FilePreview/FileCard.test.jsx → src/components/FilePreview/components/FileRenderer/FileCard/index.test.jsx

@@ -3,7 +3,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { Collapsible } from '@edx/paragon';
 
-import FileCard from './FileCard';
+import FileCard from './';
 
 describe('File Preview Card component', () => {
   const props = {

src/components/FilePreview/components/FileRenderer/hooks.js

@@ -0,0 +1,58 @@
+import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
+
+import { errorStatuses, errorMessages, renderers } from '../constants';
+import { getFileType } from '../utils';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  errorStatus: 'errorStatus',
+  isLoading: 'isLoading',
+});
+
+/**
+ * component hooks
+ */
+export const useRenderData = ({
+  file,
+  formatMessage,
+}) => {
+  const [errorStatus, setErrorStatus] = useKeyedState(stateKeys.errorStatus, null);
+  const [isLoading, setIsLoading] = useKeyedState(stateKeys.isLoading, true);
+
+  const setState = (newState) => {
+    setErrorStatus(newState.errorStatus);
+    setIsLoading(newState.isLoading);
+  };
+
+  const stopLoading = (status = null) => setState({ isLoading: false, errorStatus: status });
+
+  const errorMessage = (
+    errorMessages[errorStatus] || errorMessages[errorStatuses.serverError]
+  );
+  const errorAction = {
+    id: 'retry',
+    onClick: () => setState({ errorStatus: null, isLoading: true }),
+    message: messages.retryButton,
+  };
+  const error = {
+    headerMessage: errorMessage,
+    children: formatMessage(errorMessage),
+    actions: [errorAction],
+  };
+
+  const Renderer = renderers[getFileType(file.fileName)];
+  const rendererProps = {
+    fileName: file.fileName,
+    url: file.fileUrl,
+    onError: stopLoading,
+    onSuccess: () => stopLoading(),
+  };
+
+  return {
+    errorStatus,
+    isLoading,
+    error,
+    Renderer,
+    rendererProps,
+  };
+};

src/components/FilePreview/FileRenderer.jsx → src/components/FilePreview/components/FileRenderer/index.jsx

@@ -5,25 +5,23 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import FileCard from './FileCard';
 import { ErrorBanner, LoadingBanner } from './Banners';
-import { renderHooks } from './hooks';
+import { useRenderData } from './hooks';
 
 /**
  * <FileRenderer />
  */
-export const FileRenderer = ({
-  file,
-}) => {
+export const FileRenderer = ({ file }) => {
   const { formatMessage } = useIntl();
   const {
     Renderer,
     isLoading,
     errorStatus,
     error,
     rendererProps,
-  } = renderHooks({ file, formatMessage });
+  } = useRenderData({ file, formatMessage });
 
   return (
-    <FileCard key={file.downloadUrl} file={file}>
+    <FileCard key={file.fileUrl} file={file}>
       {isLoading && <LoadingBanner />}
       {errorStatus ? (
         <ErrorBanner {...error} />
@@ -37,8 +35,8 @@ export const FileRenderer = ({
 FileRenderer.defaultProps = {};
 FileRenderer.propTypes = {
   file: PropTypes.shape({
-    name: PropTypes.string,
-    downloadUrl: PropTypes.string,
+    fileName: PropTypes.string,
+    fileUrl: PropTypes.string,
   }).isRequired,
   // injected
   // intl: intlShape.isRequired,

src/components/FilePreview/components/FileRenderer/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  fileInfo: {
+    id: 'ora-grading.InfoPopover.fileInfo',
+    defaultMessage: 'File info',
+    description: 'Popover trigger button text for file preview card',
+  },
+  retryButton: {
+    id: 'ora-grading.ResponseDisplay.FileRenderer.retryButton',
+    defaultMessage: 'Retry',
+    description: 'Retry button for error in file renderer',
+  },
+});
+
+export default messages;

src/components/FilePreview/components/constants.js

@@ -0,0 +1,56 @@
+import { StrictDict } from '@edx/react-unit-test-utils';
+
+import {
+  PDFRenderer,
+  ImageRenderer,
+  TXTRenderer,
+} from './FileRenderer/BaseRenderers';
+
+import messages from './messages';
+
+export const errorStatuses = StrictDict({
+  badRequest: 400,
+  unauthorized: 401,
+  forbidden: 403,
+  notFound: 404,
+  conflict: 409,
+  serverError: 500,
+});
+
+export const fileTypes = StrictDict({
+  pdf: 'pdf',
+  jpg: 'jpg',
+  jpeg: 'jpeg',
+  png: 'png',
+  bmp: 'bmp',
+  txt: 'txt',
+  gif: 'gif',
+  jfif: 'jfif',
+  pjpeg: 'pjpeg',
+  pjp: 'pjp',
+  svg: 'svg',
+});
+
+export const errorMessages = {
+  [errorStatuses.notFound]: messages.fileNotFoundError,
+  [errorStatuses.serverError]: messages.unknownError,
+};
+
+/**
+ * Config data
+ */
+export const renderers = {
+  [fileTypes.pdf]: PDFRenderer,
+  [fileTypes.jpg]: ImageRenderer,
+  [fileTypes.jpeg]: ImageRenderer,
+  [fileTypes.bmp]: ImageRenderer,
+  [fileTypes.png]: ImageRenderer,
+  [fileTypes.txt]: TXTRenderer,
+  [fileTypes.gif]: ImageRenderer,
+  [fileTypes.jfif]: ImageRenderer,
+  [fileTypes.pjpeg]: ImageRenderer,
+  [fileTypes.pjp]: ImageRenderer,
+  [fileTypes.svg]: ImageRenderer,
+};
+
+export const supportedTypes = Object.keys(renderers);

src/components/FilePreview/components/index.jsx

@@ -0,0 +1,2 @@
+export { default as FileRenderer } from './FileRenderer';
+export { isSupported } from './utils';

src/components/FilePreview/messages.js → src/components/FilePreview/components/messages.js

@@ -1,16 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  fileInfo: {
-    id: 'ora-grading.InfoPopover.fileInfo',
-    defaultMessage: 'File info',
-    description: 'Popover trigger button text for file preview card',
-  },
-  retryButton: {
-    id: 'ora-grading.ResponseDisplay.FileRenderer.retryButton',
-    defaultMessage: 'Retry',
-    description: 'Retry button for error in file renderer',
-  },
   fileNotFoundError: {
     id: 'ora-grading.ResponseDisplay.FileRenderer.fileNotFound',
     defaultMessage: 'File not found',

src/components/FilePreview/components/utils.js

@@ -0,0 +1,15 @@
+import {
+  PDFRenderer,
+  ImageRenderer,
+  TXTRenderer,
+} from './FileRenderer/BaseRenderers';
+
+import { supportedTypes } from './constants';
+
+/**
+ * Util methods and transforms
+ */
+export const getFileType = (fileName) => fileName.split('.').pop()?.toLowerCase();
+export const isSupported = ({ fileName }) => supportedTypes.includes(
+  getFileType(fileName),
+);