Update dependencies

functions/package.json

@@ -15,10 +15,10 @@
   "main": "lib/index.js",
   "dependencies": {
     "firebase-admin": "^8.9.2",
-    "firebase-functions": "^3.3.0"
+    "firebase-functions": "^3.5.0"
   },
   "devDependencies": {
-    "firebase-functions-test": "^0.1.7",
+    "firebase-functions-test": "^0.2.0",
     "firebase-tools": "^7.13.1",
     "tslint": "^6.0.0",
     "typescript": "^3.7.5"

functions/src/remove-old-slides.ts

@@ -5,10 +5,7 @@ const dateThirtyDaysAgo = new Date()
 dateThirtyDaysAgo.setTime(dateThirtyDaysAgo.getTime() - DATE_OFFSET)
 
 const getOldSlides = (db: admin.firestore.Firestore) =>
-  db
-    .collection('slides')
-    .where('createdAt', '<', dateThirtyDaysAgo)
-    .get()
+  db.collection('slides').where('createdAt', '<', dateThirtyDaysAgo).get()
 
 const getImages = (slide: FirebaseFirestore.QueryDocumentSnapshot) =>
   slide.ref.collection('images').get()
@@ -17,7 +14,7 @@ const getImages = (slide: FirebaseFirestore.QueryDocumentSnapshot) =>
 const removeSlide = async (slide: FirebaseFirestore.QueryDocumentSnapshot) => {
   const images = await getImages(slide)
   const imageDeleteBatch: Promise<FirebaseFirestore.WriteResult>[] = []
-  images.forEach(image => imageDeleteBatch.push(image.ref.delete()))
+  images.forEach((image) => imageDeleteBatch.push(image.ref.delete()))
   return Promise.all(imageDeleteBatch).then(() => slide.ref.delete())
 }
 
@@ -28,7 +25,7 @@ export default async (db: admin.firestore.Firestore) => {
     `${slides.size} slides created before ${dateThirtyDaysAgo.toJSON()}`
   )
 
-  slides.forEach(async slide => {
+  slides.forEach(async (slide) => {
     const { visitedAt } = slide.data()
 
     // Remove when visitedAt is undefined or old

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "react-scripts build",
     "deploy": "npm run build && firebase deploy",
-    "format": "prettier --write '**/*.{md,js,json,ts,tsx}'",
+    "format": "prettier --write .",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint .",
     "lint:css": "stylelint './src/**/*.{ts,tsx}'",
@@ -25,42 +25,42 @@
   "license": "ISC",
   "dependencies": {
     "@tippy.js/react": "^3.1.1",
-    "@types/jest": "^25.1.2",
+    "@types/jest": "^25.1.4",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^13.7.1",
+    "@types/node": "^13.9.5",
     "@types/prismjs": "^1.16.0",
-    "@types/react": "^16.9.20",
+    "@types/react": "^16.9.26",
     "@types/react-dom": "^16.9.5",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-test-renderer": "^16.9.2",
-    "@types/styled-components": "^4.4.3",
-    "@types/uuid": "^3.4.7",
+    "@types/styled-components": "^5.0.1",
+    "@types/uuid": "^7.0.2",
     "@types/uuid-validate": "0.0.1",
-    "firebase": "^7.8.2",
+    "firebase": "^7.13.0",
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.19.0",
-    "query-string": "^6.11.0",
-    "react": "^16.12.0",
+    "query-string": "^6.11.1",
+    "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.1",
     "react-full-screen": "^0.2.4",
     "react-markdown": "^4.3.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.0",
-    "react-split-pane": "^0.1.89",
+    "react-scripts": "^3.4.1",
+    "react-split-pane": "^0.1.91",
     "styled-components": "^5.0.1",
-    "typescript": "^3.7.5",
-    "uuid": "^3.4.0",
+    "typescript": "^3.8.3",
+    "uuid": "^7.0.2",
     "uuid-validate": "0.0.3"
   },
   "devDependencies": {
     "eslint-plugin-prettier": "^3.1.2",
-    "firebase-tools": "^7.13.1",
-    "http-proxy-middleware": "^0.21.0",
+    "firebase-tools": "^7.16.1",
+    "http-proxy-middleware": "^1.0.3",
     "jest-styled-components": "^7.0.0",
-    "prettier": "^1.19.1",
-    "react-test-renderer": "^16.12.0",
-    "stylelint": "^13.2.0",
+    "prettier": "^2.0.2",
+    "react-test-renderer": "^16.13.1",
+    "stylelint": "^13.2.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0"

prettier.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   semi: false,
-  singleQuote: true
+  singleQuote: true,
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, Suspense, lazy } from 'react'
 import { ThemeProvider } from 'styled-components'
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
-import uuid from 'uuid/v4'
+import { v4 as uuid } from 'uuid'
 import validate from 'uuid-validate'
 
 import { GlobalStyle } from './App.style'
@@ -24,7 +24,7 @@ const App = () => (
             <Redirect exact from="/" to={editPath} />
             <Route
               path="/edit/:slidesId?"
-              render={props =>
+              render={(props) =>
                 validate(props.match.params.slidesId) ? (
                   <SlidesEditor {...props} />
                 ) : (

src/components/Button/Button.style.ts

@@ -2,35 +2,35 @@ import styled from 'styled-components'
 
 export const StyledButton = styled.button`
   background-color: #fff;
-  border: 1px solid ${props => props.theme.colors.purple};
-  color: ${props => props.theme.colors.purple};
+  border: 1px solid ${(props) => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.purple};
   cursor: pointer;
-  font-family: ${props => props.theme.fonts.default};
+  font-family: ${(props) => props.theme.fonts.default};
   font-size: 0.75rem;
   font-weight: bold;
   line-height: 2.375rem;
   outline: none;
   padding: 0 0.75rem;
   white-space: nowrap;
 
-  @media (min-width: ${props => props.theme.breakpoints.md}) {
+  @media (min-width: ${(props) => props.theme.breakpoints.md}) {
     font-size: 1rem;
     padding: 0 1rem;
   }
 
   &:focus {
-    outline: 1px solid ${props => props.theme.colors.purple};
+    outline: 1px solid ${(props) => props.theme.colors.purple};
     outline-offset: 1px;
   }
 
   &:disabled {
-    border-color: ${props => props.theme.colors.border};
-    color: ${props => props.theme.colors.border};
+    border-color: ${(props) => props.theme.colors.border};
+    color: ${(props) => props.theme.colors.border};
     cursor: default;
   }
 
   &:hover:not(:disabled) {
-    background-color: ${props => props.theme.colors.purple};
+    background-color: ${(props) => props.theme.colors.purple};
     color: #fff;
   }
 `

src/components/Editor/Editor.style.ts

@@ -10,9 +10,9 @@ export const StyledWrapper = styled.div`
 
 export const StyledTextarea = styled.textarea`
   border: 0;
-  caret-color: ${props => props.theme.colors.purple};
-  color: ${props => props.theme.colors.lightText};
-  font-family: ${props => props.theme.fonts.monospace};
+  caret-color: ${(props) => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.lightText};
+  font-family: ${(props) => props.theme.fonts.monospace};
   font-size: 16px;
   height: 100%;
   left: 0;
@@ -29,7 +29,7 @@ export const StyledTextarea = styled.textarea`
   }
 
   &::selection {
-    background-color: ${props => props.theme.colors.purple};
+    background-color: ${(props) => props.theme.colors.purple};
     color: #fff;
   }
 `
@@ -52,12 +52,12 @@ export const StyledProgressBar = styled.div<Props>`
   &::after {
     background-image: linear-gradient(
       90deg,
-      ${props => props.theme.colors.purple} 0%,
-      ${props => props.theme.colors.purple} ${props => props.progress}%,
-      #fff ${props => props.progress}%,
+      ${(props) => props.theme.colors.purple} 0%,
+      ${(props) => props.theme.colors.purple} ${(props) => props.progress}%,
+      #fff ${(props) => props.progress}%,
       #fff 100%
     );
-    border: 2px solid ${props => props.theme.colors.purple};
+    border: 2px solid ${(props) => props.theme.colors.purple};
     border-radius: 1rem;
     content: '';
     height: 1rem;

src/components/Editor/Editor.tsx

@@ -3,21 +3,21 @@ import React, { FC, useRef } from 'react'
 import {
   StyledWrapper,
   StyledTextarea,
-  StyledProgressBar
+  StyledProgressBar,
 } from './Editor.style'
 
 import {
   getCurrentLineNumber,
   getSlidesFirstLines,
-  getCurrentSlide
+  getCurrentSlide,
 } from './utils'
 
 interface Props {
   isLoading: boolean
   onChange: React.HTMLProps<HTMLTextAreaElement>['onChange']
   onCursorPositionChange({
     cursorPosition,
-    slide
+    slide,
   }: {
     cursorPosition: number
     slide: number
@@ -33,7 +33,7 @@ const Editor: FC<Props> = ({
   onCursorPositionChange,
   onDrop,
   progress,
-  value
+  value,
 }) => {
   const editorRef = useRef<HTMLTextAreaElement>(null)
 
@@ -48,7 +48,7 @@ const Editor: FC<Props> = ({
 
     onCursorPositionChange({
       cursorPosition,
-      slide
+      slide,
     })
   }
 

src/components/Editor/utils.test.ts

@@ -1,7 +1,7 @@
 import {
   getCurrentLineNumber,
   getSlidesFirstLines,
-  getCurrentSlide
+  getCurrentSlide,
 } from './utils'
 
 it('getCurrentLineNumber', () => {
@@ -14,7 +14,7 @@ it('getSlidesFirstLines', () => {
   expect(getSlidesFirstLines(value)).toEqual([
     { slide: 0, firstLine: 0 },
     { slide: 1, firstLine: 2 },
-    { slide: 2, firstLine: 4 }
+    { slide: 2, firstLine: 4 },
   ])
   expect(getSlidesFirstLines()).toEqual([{ slide: 0, firstLine: 0 }])
 })
@@ -23,7 +23,7 @@ it('getCurrentSlide', () => {
   const slides = [
     { slide: 0, firstLine: 0 },
     { slide: 1, firstLine: 10 },
-    { slide: 2, firstLine: 20 }
+    { slide: 2, firstLine: 20 },
   ]
 
   const value0 = getCurrentSlide(slides, 0)

src/components/Editor/utils.ts

@@ -21,7 +21,7 @@ export const getCurrentSlide = (
 ): number => {
   const slideObj = [...slides]
     .reverse()
-    .find(slide => currentLineNumber > slide.firstLine)
+    .find((slide) => currentLineNumber > slide.firstLine)
 
   return slideObj?.slide ?? 0
 }

src/components/Icon/Icon.style.tsx

@@ -7,7 +7,7 @@ interface Props {
 export const StyledIcon = styled.img.attrs({})<Props>`
   cursor: pointer;
   display: block;
-  opacity: ${props => (props.isDisabled ? 0.1 : 1)};
+  opacity: ${(props) => (props.isDisabled ? 0.1 : 1)};
   transition: transform 0.1s ease-in-out;
 
   &:hover {

src/components/Icon/Icon.tsx

@@ -21,7 +21,7 @@ const ICONS = {
   minimize: minimizeSvg,
   presentation: presentationSvg,
   right: rightSvg,
-  share: shareSvg
+  share: shareSvg,
 }
 
 interface Props {

src/components/Logo/Logo.style.ts

@@ -5,8 +5,8 @@ interface Props {
 }
 
 export const StyledImg = styled.img<Props>`
-  ${props => props.onClick && 'cursor: pointer'};
+  ${(props) => props.onClick && 'cursor: pointer'};
   display: block;
-  height: ${props => (props.large ? '5rem' : '2rem')};
-  width: ${props => (props.large ? '5rem' : '2rem')};
+  height: ${(props) => (props.large ? '5rem' : '2rem')};
+  width: ${(props) => (props.large ? '5rem' : '2rem')};
 `

src/components/Modal/Modal.style.ts

@@ -59,7 +59,7 @@ export const StyledModalCloseButton = styled.button`
 
   &::after,
   &::before {
-    background-color: ${props => props.theme.colors.purple};
+    background-color: ${(props) => props.theme.colors.purple};
     border-radius: 1px;
     content: '';
     display: block;

src/components/Modal/Modal.tsx

@@ -4,7 +4,7 @@ import {
   StyledModalContainer,
   StyledModal,
   StyledHeading,
-  StyledModalCloseButton
+  StyledModalCloseButton,
 } from './Modal.style'
 
 interface Props {
@@ -28,7 +28,7 @@ const Modal: FC<Props> = ({ children, heading, onClose }) => {
 
   return (
     <StyledModalContainer onClick={onClose}>
-      <StyledModal onClick={e => e.stopPropagation()}>
+      <StyledModal onClick={(e) => e.stopPropagation()}>
         {heading && <StyledHeading>{heading}</StyledHeading>}
         {children}
         <StyledModalCloseButton onClick={onClose} />

src/components/Notification/Notification.tsx

@@ -18,9 +18,9 @@ const Notification: FC<Props> = ({ children, className, timeout = 15000 }) => {
 }
 
 const StyledNotification = styled(Notification)<{ slideDown?: boolean }>`
-  color: ${props => props.theme.colors.purple};
+  color: ${(props) => props.theme.colors.purple};
 
-  ${props =>
+  ${(props) =>
     props.slideDown &&
     css`
       animation: slide-down 1s ease-out;

src/components/Slide/Slide.style.ts

@@ -6,7 +6,7 @@ export const StyledTransformContainer = styled.div`
   &:not(:last-child) {
     margin-bottom: 1rem;
 
-    @media (min-width: ${props => props.theme.breakpoints.xl}) {
+    @media (min-width: ${(props) => props.theme.breakpoints.xl}) {
       margin-bottom: 2rem;
     }
   }
@@ -26,7 +26,7 @@ export const StyledSlideContainer = styled.div<{ single?: boolean }>`
   top: 50%;
   width: 800px;
 
-  ${props =>
+  ${(props) =>
     !props.single &&
     css`
       box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1);

src/components/Slide/Slide.tsx

@@ -12,7 +12,7 @@ const renderers = {
   code: Code,
   image: Image,
   table: Table,
-  tableCell: TableCell
+  tableCell: TableCell,
 }
 
 interface SlideProps {