Add-download-text-button and bug-ci-github

front/config/test/jest.js

@@ -7,5 +7,6 @@ module.exports = {
   modulePathIgnorePatterns: ['cypress'],
   moduleNameMapper: {
     '^.+\\.png$': '<rootDir>/pngTransform.js',
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
   }
 };

front/src/common-app/components/download-text/download-text.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import * as innerClasses from './download-text.styles';
+import Button from '@material-ui/core/Button';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+export const DownloadTxtFile: React.FC = () => {
+  const handleDownloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob(
+      [(document.getElementById('session') as HTMLInputElement).value],
+      {
+        type: 'text/json;charset=utf-8,',
+      }
+    );
+    element.href = URL.createObjectURL(file);
+    element.download = 'Codepaster.txt';
+    document.body.appendChild(element);
+    element.click();
+  };
+
+  return (
+    <Button
+      variant="contained"
+      className={innerClasses.downloadButton}
+      onClick={() => handleDownloadTxtFile()}
+    >
+      <ArrowDownwardIcon className={innerClasses.downloadIcon} />
+      Download File
+    </Button>
+  );
+};

front/src/common-app/components/download-text/download-text.styles.ts

@@ -0,0 +1,46 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+const { typography, spacing, palette, breakpoints } = theme;
+const color = palette.customPalette;
+
+export const downloadButton = css`
+  grid-area: span;
+  display: flex;
+  align-items: center;
+  padding: ${spacing(1.25)} ${spacing(1.875)};
+  font-size: 1.188rem;
+  font-weight: 400;
+  text-transform: capitalize;
+  color: ${color.primary};
+  background-color: white;
+  border-radius: 0;
+  border: 2px solid ${color.primary};
+  transition: all 0.2s;
+  &:hover,
+  &:active {
+    color: white;
+    background-color: ${color.primary};
+    border: 2px solid ${color.primary};
+    outline: none;
+  }
+  @media (max-width: ${breakpoints.values.xs}px) {
+    color: white;
+    background-color: ${color.primary};
+    border: none;
+    &:hover,
+    &:active {
+      background-color: ${color.primary};
+      border: none;
+    }
+  }
+`;
+
+export const downloadIcon = css`
+  margin-right: ${spacing(1.25)};
+  font-size: 1.25rem;
+  display: none;
+  @media (min-width: ${breakpoints.values.xs}px) {
+    display: initial;
+  }
+`;

front/src/common-app/components/download-text/index.ts

@@ -0,0 +1 @@
+export * from './download-text.component'

front/src/common-app/index.ts

@@ -1,2 +1,3 @@
 export * from './components/appbar';
 export * from './components/footer';
+export * from './components/download-text';

front/src/pods/student/student.component.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import * as innerClasses from './student.styles';
+import { DownloadTxtFile } from 'common-app';
+
 interface Props {
   room: string;
   log: string;
 }
 
-export const StudentComponent: React.FC<Props> = props => {
+export const StudentComponent: React.FC<Props> = (props) => {
   const { room, log } = props;
 
   return (
@@ -29,6 +31,7 @@ export const StudentComponent: React.FC<Props> = props => {
         className={innerClasses.textarea}
         value={log ?? ''}
       />
+      <DownloadTxtFile />
     </main>
   );
 };

front/src/pods/trainer/components/session.component.tsx

@@ -5,6 +5,7 @@ import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
 import UndoIcon from '@material-ui/icons/Undo';
 import Button from '@material-ui/core/Button';
 import * as innerClasses from './session.styles';
+import { DownloadTxtFile } from 'common-app';
 
 interface Props {
   log: string;
@@ -66,6 +67,8 @@ export const SessionComponent: React.FC<Props> = props => {
         Send Full Content
         <ArrowForwardRoundedIcon className={innerClasses.sendIcon} />
       </Button>
+
+      <DownloadTxtFile />
     </form>
   );
 };