Switch to hook for tutorial cookies

Author: michaelmior

package.json

@@ -34,7 +34,6 @@
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.0",
     "typescript": "*",
-    "universal-cookie": "latest",
     "uuid": "^8.3.2"
   },
   "scripts": {

src/Home.js

@@ -9,7 +9,6 @@ import SourceMultiTable from './SourceMultiTable';
 import SplitPane from 'react-split-pane';
 import {changeExpr} from './modules/data';
 import {BrowserView, MobileOnlyView} from 'react-device-detect';
-import Cookies from 'universal-cookie';
 import ReactGA from 'react-ga';
 
 import './Home.css';
@@ -19,9 +18,7 @@ import Tutorial from './Tutorial';
 import type {ComponentType} from 'react';
 import type {RouterHistory} from 'react-router-dom';
 
-type State = {
-  cookies: typeof Cookies,
-};
+type State = {};
 
 type Props = {
   history: RouterHistory,
@@ -32,8 +29,6 @@ class Home extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = {cookies: new Cookies()};
-
     // If GA is no longer used, remove preconnect from index.html
     switch (process.env.NODE_ENV) {
       case 'production':
@@ -65,7 +60,7 @@ class Home extends Component<Props, State> {
       <div className="bottomLeftContainer">
         <DataContainer />
         <div className="footer">
-          <Tutorial cookies={this.state.cookies} />
+          <Tutorial />
           <p className="email">
             For questions, please email{' '}
             <a href="mailto:mmior@cs.rit.edu">mmior@cs.rit.edu</a>

src/Tutorial.js

@@ -1,20 +1,18 @@
 import Joyride, {CallBackProps, STATUS} from 'react-joyride';
 import React, {useState} from 'react';
-
-type Props = {
-  cookies: any,
-};
+import {useCookies} from 'react-cookie';
 
 const redoText = 'Redo tutorial';
 const stepStyle = {tooltipContainer: {textAlign: 'left'}};
 
 /** Container for all components of the tutorial */
-function Tutorial(props: Props) {
+function Tutorial() {
   let initialText, shouldRun;
-  if (props.cookies.get('tutorial') === undefined) {
+  const [cookies, setCookie] = useCookies(['tutorial']);
+  if (cookies.tutorial === undefined) {
     initialText = 'Tutorial';
     shouldRun = true;
-    props.cookies.set('tutorial', 'true', {path: '/'});
+    setCookie('tutorial', 'true', {path: '/'});
   } else {
     initialText = redoText;
     shouldRun = false;

src/index.js

@@ -9,7 +9,6 @@ import * as Sentry from '@sentry/browser';
 import './index.css';
 import store, {history} from './store';
 import App from './App';
-import CookiesProvider from 'react-cookie/cjs/CookiesProvider';
 
 let sentryConfig = {};
 sentryConfig.dsn = 'https://496d372d00a24c57af7967ac2ff5dacd@sentry.io/2445886';
@@ -21,14 +20,12 @@ if (process.env.REACT_APP_GIT_SHA) {
 Sentry.init(sentryConfig);
 
 ReactDOM.render(
-  <CookiesProvider>
-    <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <div>
-          <App />
-        </div>
-      </ConnectedRouter>
-    </Provider>
-  </CookiesProvider>,
+  <Provider store={store}>
+    <ConnectedRouter history={history}>
+      <div>
+        <App />
+      </div>
+    </ConnectedRouter>
+  </Provider>,
   ((document.getElementById('root'): any): HTMLElement)
 );

yarn.lock

@@ -16966,7 +16966,7 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-universal-cookie@^4.0.0, universal-cookie@latest:
+universal-cookie@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
   integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==