Works with branch i23 in Firebase. Fixed relative paths to work with …

…local development.
bbc · Mar 18, 2020 · 9664179 · 9664179
1 parent 1cc9253
commit 9664179
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build": "webpack --config webpack.config.js --mode production",
     "dev": "webpack --watch --config webpack.dev.config.js --mode development",
-    "linked": "npm run clean && npm run dev && npm run cp",
+    "linked": "npm run clean && mkdir -p dist && npm run cp && npm run dev && npm run cp",
     "buildw": "webpack --config webpack.config.js --watch",
     "build-storybook": "build-storybook -s public",
     "build-storybook-docs": "build-storybook -s public --docs",

diff --git a/src/CustomAlert/index.js b/src/CustomAlert/index.js
@@ -37,7 +37,7 @@ const CustomAlert = ({ ...props } ) => {
 CustomAlert.propTypes = {
   show: PropTypes.bool.isRequired,
   heading: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.any,
   vatiant: PropTypes.string,
 };
 

diff --git a/src/SimpleCard/index.js b/src/SimpleCard/index.js
@@ -23,15 +23,15 @@ const SimpleCard = props => {
   };
 
   return (
-    <Card 
-    // border={'secondary'} 
-    style={ { width: '100%', marginBottom: '1em' } }
+    <Card
+    // border={'secondary'}
+      style={ { width: '100%', marginBottom: '1em' } }
     >
       <Card.Body>
         <Row>
-          <LinkContainer to={ `${ props.url }` } style={ { cursor: 'pointer' } }>
+          <LinkContainer to={ props.url } style={ { cursor: 'pointer' } }>
             <Col xs={ 8 } sm={ 10 }>
-              <Card.Title style={{ color: "#007bff" }}>{props.title}</Card.Title>
+              <Card.Title style={ { color: '#007bff' } }>{props.title}</Card.Title>
             </Col>
           </LinkContainer>
           <Col xs={ 2 } sm={ 1 }>

diff --git a/src/TranscriptCard/index.js b/src/TranscriptCard/index.js
@@ -1,91 +1,94 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import Card from "react-bootstrap/Card";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
-import Button from "react-bootstrap/Button";
-import Badge from "react-bootstrap/Badge";
-import Alert from "react-bootstrap/Alert";
-import ProgressBar from "../ProgressBar";
-import Spinner from "react-bootstrap/Spinner";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Card from 'react-bootstrap/Card';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import Badge from 'react-bootstrap/Badge';
+import Alert from 'react-bootstrap/Alert';
+import { LinkContainer } from 'react-router-bootstrap';
+import ProgressBar from '../ProgressBar';
+import Spinner from 'react-bootstrap/Spinner';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faTrash,
   faCheck,
   faExclamationTriangle,
   faPen
-} from "@fortawesome/free-solid-svg-icons";
+} from '@fortawesome/free-solid-svg-icons';
 
 const TranscriptCard = props => {
   const statusSwitch = status => {
     switch (status) {
-      case "error":
-        return {
-          variant: "danger",
-          icon: <FontAwesomeIcon icon={faExclamationTriangle} />,
-          message: props.message,
-          text: "Error",
-          title: props.title,
-          border: "danger"
-        };
-      case "in-progress":
-        return {
-          variant: "info",
-          text: "In progress",
-          icon: (
-            <Spinner
-              as="span"
-              animation="border"
-              size="sm"
-              role="status"
-              aria-hidden="true"
-            />
-          ),
-          title: props.title,
-          border: "info"
-        };
-      case "uploading":
-        return {
-          variant: "info",
-          text: "In progress",
-          icon: <FontAwesomeIcon icon={faExclamationTriangle} />,
-          title: props.title,
-          border: "info",
-          message:
-            "Do not move away from or refresh this page until upload is complete!"
-        };
-      case "done":
-        return {
-          variant: "success",
-          text: "Done",
-          icon: <FontAwesomeIcon icon={faCheck} />,
-          // border: "secondary",
-          title: <a href={`${props.url}`}>{props.title}</a>
-        };
-      default:
-        return {
-          variant: "info",
-          text: "",
-          icon: (
-            <Spinner
-              as="span"
-              animation="border"
-              size="sm"
-              role="status"
-              aria-hidden="true"
-            />
-          ),
-          title: props.title,
-          // border: "info"
-        };
+    case 'error':
+      return {
+        variant: 'danger',
+        icon: <FontAwesomeIcon icon={ faExclamationTriangle } />,
+        message: props.message,
+        text: 'Error',
+        title: props.title,
+        border: 'danger'
+      };
+    case 'in-progress':
+      return {
+        variant: 'info',
+        text: 'In progress',
+        icon: (
+          <Spinner
+            as="span"
+            animation="border"
+            size="sm"
+            role="status"
+            aria-hidden="true"
+          />
+        ),
+        title: props.title,
+        border: 'info'
+      };
+    case 'uploading':
+      return {
+        variant: 'info',
+        text: 'In progress',
+        icon: <FontAwesomeIcon icon={ faExclamationTriangle } />,
+        title: props.title,
+        border: 'info',
+        message:
+            'Do not move away from or refresh this page until upload is complete!'
+      };
+    case 'done':
+      return {
+        variant: 'success',
+        text: 'Done',
+        icon: <FontAwesomeIcon icon={ faCheck } />,
+        // border: "secondary",
+        title: props.title
+        // url: `${props.url}`
+        // title: <a href={`${props.url}`}>{props.title}</a>
+      };
+    default:
+      return {
+        variant: 'info',
+        text: '',
+        icon: (
+          <Spinner
+            as="span"
+            animation="border"
+            size="sm"
+            role="status"
+            aria-hidden="true"
+          />
+        ),
+        title: props.title,
+        // border: "info"
+      };
     }
   };
 
   // const [progress, setProgress] = useState(0)
 
   const handleDeleteClick = () => {
-    const confirmDeleteText = "Are you sure you want to delete?";
-    const cancelDeleteText = "Cancelled delete";
+    const confirmDeleteText = 'Are you sure you want to delete?';
+    const cancelDeleteText = 'Cancelled delete';
 
     const confirmationPrompt = confirm(confirmDeleteText);
 
@@ -107,10 +110,10 @@ const TranscriptCard = props => {
 
     if (statusConfig.message) {
       Message = (
-        <Alert variant={statusConfig.variant}>
+        <Alert variant={ statusConfig.variant }>
           {statusConfig.icon} {statusConfig.message}
-          {props.status === "uploading" ? (
-            <ProgressBar progress={props.progress} />
+          {props.status === 'uploading' ? (
+            <ProgressBar progress={ props.progress } />
           ) : null}
         </Alert>
       );
@@ -119,59 +122,74 @@ const TranscriptCard = props => {
     return (
       <>
         {Message ? Message : null}
-        <Badge variant={statusConfig.variant}>{statusConfig.text}</Badge>
+        <Badge variant={ statusConfig.variant }>{statusConfig.text}</Badge>
       </>
     );
   };
 
   const statusConfig = statusSwitch(props.status);
+  let TranscriptCardTitle;
+  if (props.status === 'done') {
+    TranscriptCardTitle = (
+      <LinkContainer to={ props.url } style={ { cursor: 'pointer' } }>
+        <Col xs={ 8 } sm={ 10 }>
+          <Card.Title style={ { color: '#007bff' } }>
+            {props.icon ? props.icon : ''} {statusConfig.title}</Card.Title>
+        </Col>
+      </LinkContainer>
+    );
+  } else {
+    TranscriptCardTitle = (
+      <Col xs={ 8 } sm={ 10 }>
+        <Card.Title style={ { color: '#757575' } }>
+          {props.icon ? props.icon : ''} {statusConfig.title}
+        </Card.Title>
+      </Col>
+    );
+  }
 
   return (
     <Card
-      border={statusConfig.border}
-      style={{ width: "100%", marginBottom: "1em" }}
+      border={ statusConfig.border }
+      style={ { width: '100%', marginBottom: '1em' } }
     >
       <Card.Body>
         <Row>
-          <Col xs={8} sm={10}>
-            <Card.Title style={{ color: "#757575" }}>
-              {props.icon ? props.icon : ""} {statusConfig.title}
-            </Card.Title>
-          </Col>
-          <Col xs={2} sm={1}>
+          {TranscriptCardTitle}
+          <Col xs={ 2 } sm={ 1 }>
             <Card.Link>
               <Button
-                onClick={handleEditClick}
+                onClick={ handleEditClick }
                 variant="outline-secondary"
                 size="sm"
                 aria-label="Edit title and description"
               >
-                <FontAwesomeIcon icon={faPen} />
+                <FontAwesomeIcon icon={ faPen } />
               </Button>
             </Card.Link>
           </Col>
-          <Col xs={2} sm={1}>
+          <Col xs={ 2 } sm={ 1 }>
             <Card.Link>
               <Button
-                onClick={handleDeleteClick}
+                onClick={ handleDeleteClick }
                 variant="outline-secondary"
                 size="sm"
                 aria-label="Delete transcript"
               >
-                <FontAwesomeIcon icon={faTrash} />
+                <FontAwesomeIcon icon={ faTrash } />
               </Button>
             </Card.Link>
           </Col>
         </Row>
         <Row>
-          <Col xs={12}>
+          <Col xs={ 12 }>
             <Card.Subtitle className="mb-2 text-muted">
               {props.description}
             </Card.Subtitle>
           </Col>
         </Row>
         <Row>
-          <Col xs={12}>{setDescription()}</Col>
+          <Col xs={ 12 }>{setDescription()}</Col>
         </Row>
       </Card.Body>
     </Card>
@@ -192,8 +210,8 @@ TranscriptCard.propTypes = {
 };
 
 TranscriptCard.defaultProps = {
-  title: "",
-  description: ""
+  title: '',
+  description: ''
 };
 
 export default React.memo(TranscriptCard);
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -76,24 +76,24 @@ module.exports = {
   resolve: {
     alias: {
       react: path.resolve(
-        '../../digital-paper-edit-firebase/node_modules/react'
+        '../digital-paper-edit-firebase/node_modules/react'
       ),
       'react-dom': path.resolve(
-        '../../digital-paper-edit-firebase/node_modules/react-dom'
+        '../digital-paper-edit-firebase/node_modules/react-dom'
       ),
       'react-router': path.resolve(
-        '../../digital-paper-edit-firebase/node_modules/react-router'
+        '../digital-paper-edit-firebase/node_modules/react-router'
       ),
       'react-router-dom': path.resolve(
-        '../../digital-paper-edit-firebase/node_modules/react-router-dom'
+        '../digital-paper-edit-firebase/node_modules/react-router-dom'
       )
     },
     symlinks: false
   },
   externals: {
-    react: 'commonjs react',
-    'react-dom': 'commonjs react-dom',
-    'react-router': 'commonjs react-router',
-    'react-router-dom': 'commonjs react-router-dom'
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-router': 'react-router',
+    'react-router-dom': 'react-router-dom'
   }
 };