Recompose-to-React-Hooks-Compose.md

Replacing recompose with React Hooks Compose

12.12.23 - Understanding Apollo Link

• The error that occured yesterday is still occuring today.
• I've decided it's time to read up on Apollo Link to figure out what the hell is going on in this document.
• But before I do that, I want to revert my changes on the apollo-client-singleton file to see if I can slowly re-activate this error and identify where it breaks and why.

Breaks

• When I reverted the apollo-client-singleton file as it was before. I get the following error:
• UserMenu.jsx:214 Uncaught TypeError: lodash__WEBPACK_IMPORTED_MODULE_10__.flowRight.flowRight is not a function
• I know exactly when this occured while I updated the UserMenu.jsx. Let's go fix that error now!
• Okay, now lodash is expecting a function. Lodash was an addition that Daniel and I decided to incorporate to replace react-apollo. Maybe instead of downloading a seperate dependency (even though it's supposed to be the same methods just packaged in a new package.) I should look at how to correctly integrate this lodash function. It looks like it breaks in UserMenu.jsx first, then TopNav.jsx, and then AdminDashboard.jsx. So Lodash is far reaching and if I can load it up correctly here, it will function correctly in the rest of these files.
• Because this is breaking first at UserMenu.jsx, that is letting me know that our import is what is causing this breaking change.
• I now need to look into what would be the best way forward in terms of integrating lodash but replacing react-apollo
• Here is a document that holds all the coding files that import Lodash

lodash.js:5145 Uncaught TypeError: Expected a function
    at lodash.js:5145:1
    at apply (lodash.js:488:1)
    at lodash.js:6627:1
    at ./src/containers/UserMenu.jsx (UserMenu.jsx:214:23)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/TopNav.jsx (TexterStats.jsx:123:27)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/AdminDashboard.jsx (SortBy.jsx:92:22)`

BEFORE

import fetch from "isomorphic-fetch";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { createHttpLink } from "apollo-link-http";
import { onError } from "apollo-link-error";
import { InMemoryCache } from "apollo-cache-inmemory";
import { getMainDefinition } from "apollo-utilities";
import omitDeep from "omit-deep-lodash";

const httpLink = createHttpLink({

DESIRED GOAL FOR AFTER

// import fetch from "isomorphic-fetch";
// import { ApolloClient, ApolloLink, HttpLink } from "@apollo/client";
// import { onError } from "@apollo/client/link/error";
// import { InMemoryCache } from '@apollo/client/cache';
// import { getMainDefinition } from "@apollo/client/utilities";
// import omitDeep from "omit-deep-lodash";

// const httpLink = HttpLink({

12.11.23 - Uncaught Type Error

core.cjs:21 Uncaught TypeError: Cannot set properties of undefined (setting 'request') This is the trace of this error:

   at ApolloLink (core.cjs:21:1)
   at HttpLink (http.cjs:615:1)
   at ./src/network/apollo-client-singleton.js (apollo-client-singleton.js:8:26)
   at __webpack_require__ (bootstrap:24:1)
   at fn (hot module replacement:62:1)
   at ./src/containers/hoc/load-data.jsx (ThemeContext.js:5:23)
   at __webpack_require__ (bootstrap:24:1)
   at fn (hot module replacement:62:1)
   at ./src/containers/UserMenu.jsx (UserEdit.jsx:516:24)
   at __webpack_require__ (bootstrap:24:1)

12.11.23

• Mad at graphql
• https://github.com/graphql/graphql-js/tags?after=v14.2.0
• apollo-client is at 2.6.4 current version 3.8.8 apollo-client changelog

warning "apollo-server-express > apollo-server-core@1.4.0" has incorrect peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "apollo-server-express > apollo-server-core > apollo-cache-control@0.1.1" has incorrect peer dependency "graphql@0.10.x - 0.13.x".
warning "apollo-server-express > apollo-server-core > apollo-tracing@0.1.4" has incorrect peer dependency "graphql@0.10.x - 0.13.x".
warning "apollo-server-express > apollo-server-core > graphql-extensions@0.0.10" has incorrect peer dependency "graphql@0.10.x - 0.13.x".

• React-Apollo
• Apollo Client Tags
• apollo-link-batch is now @apollo/client/link/batch apollo-link-batch-http is now @apollo/client/link/batch-http apollo-link-context is now @apollo/client/link/context apollo-link-error is now @apollo/client/link/error apollo-link-retry is now @apollo/client/link/retry apollo-link-schema is now @apollo/client/link/schema apollo-link-ws is now @apollo/client/link/ws

npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated apollo-tracing@0.1.4: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
npm WARN deprecated graphql-extensions@0.0.10: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated apollo-cache-control@0.1.1: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated apollo-server-core@1.4.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated core-js@1.2.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js

npm ls core-js

├─┬ apollo-server-express@1.4.0
│ └─┬ apollo-server-core@1.4.0
│   └─┬ graphql-extensions@0.0.10
│     └── core-js@2.6.12
├─┬ babel-polyfill@6.26.0
│ └── core-js@2.6.12
├─┬ babel-runtime@6.26.0
│ └── core-js@2.6.12
├── core-js@3.34.0
├─┬ draft-js@0.11.7
│ └─┬ fbjs@2.0.0
│   └── core-js@3.34.0 deduped
├─┬ react-scripts@5.0.1
│ └─┬ react-app-polyfill@3.0.0
│   └── core-js@3.34.0 deduped
├─┬ recompose@0.30.0
│ └─┬ fbjs@0.8.18
│   └── core-js@1.2.7
├─┬ rethink-knex-adapter@0.4.20
│ └─┬ knex@0.17.6
│   └─┬ @babel/polyfill@7.12.1
│     └── core-js@2.6.12
└─┬ wait-on@2.1.2
  └── core-js@2.6.12

warning "apollo-server-express > apollo-server-core@1.4.0" has incorrect peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "apollo-server-express > apollo-server-core > apollo-cache-control@0.1.1" has incorrect peer dependency "graphql@0.10.x - 0.13.x".
warning "apollo-server-express > apollo-server-core > apollo-tracing@0.1.4" has incorrect peer dependency "graphql@0.10.x - 0.13.x".
warning "apollo-server-express > apollo-server-core > graphql-extensions@0.0.10" has incorrect peer dependency "graphql@0.10.x - 0.13.x".

12.8.23

• Following this tutorial on Reach Hooks Compose
• Was looking for an alternative because of the 35 files that needed to be updated in order to successfully remove our prodcut away from Recompose.
• I liked this because the syntax was similar, and I was hoping to be able to continue to use our withMUITheme and withRouter modules that are so critical to our codebase.
• If this dependency can buy us time to refactor into ReactHooks in 2024, than it will be worth the breathing room to deliver the Nodejs20.10.0 upgrade to Spoke.
• I imported the Here is the AssignmentSummary.jsx

Working to refactor AssignmentSumarry.jsx

• I'm getting a type error: withRouter.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'displayName')
• Got my first useful error:
• The entries below allowed me to see that our graphql update could only go to 15, and not 16.18.1

> npm install react-apollo
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: spoke@13.1.0
npm ERR! Found: graphql@0.13.2
npm ERR! node_modules/graphql
npm ERR!   graphql@"^0.13.2" from the root project
npm ERR!   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-client@2.6.10
npm ERR!   node_modules/apollo-client
npm ERR!     apollo-client@"^2.6.10" from the root project
npm ERR!     peer apollo-client@"^2.6.4" from react-apollo@3.1.5
npm ERR!     node_modules/react-apollo
npm ERR!       react-apollo@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^14.3.1" from react-apollo@3.1.5
npm ERR! node_modules/react-apollo
npm ERR!   react-apollo@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

• ran > npm install --save graphql@16.18.1 and got:

> npm install --save graphql@16.18.1
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache-inmemory@1.6.6
npm WARN node_modules/apollo-cache-inmemory
npm WARN   apollo-cache-inmemory@"^1.6.6" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-client@2.6.4
npm WARN node_modules/apollo-client
npm WARN   apollo-client@"^2.6.4" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link@1.2.14
npm WARN node_modules/apollo-link
npm WARN   apollo-link@"^1.0.0" from apollo-client@2.6.4
npm WARN   node_modules/apollo-client
npm WARN   5 more (apollo-link-error, apollo-link-http, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link-http@1.5.17
npm WARN node_modules/apollo-link-http
npm WARN   apollo-link-http@"^1.5.17" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-utilities@1.3.4
npm WARN node_modules/apollo-utilities
npm WARN   apollo-utilities@"^1.3.4" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN   4 more (apollo-cache-inmemory, apollo-link, graphql-tools, the root project)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@">=0.5.0" from graphql-date@1.0.3
npm WARN node_modules/graphql-date
npm WARN   graphql-date@"^1.0.3" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" from graphql-tag@2.12.6
npm WARN node_modules/graphql-tag
npm WARN   graphql-tag@"^2.10.3" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0" from graphql-tools@2.24.0
npm WARN node_modules/graphql-tools
npm WARN   graphql-tools@"^2.8.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@">=0.8.0" from graphql-type-json@0.3.2
npm WARN node_modules/graphql-type-json
npm WARN   graphql-type-json@"^0.3.2" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: spoke@13.1.0
npm ERR! Found: graphql@undefined
npm ERR! node_modules/graphql
npm ERR!   graphql@"16.18.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link@1.2.14
npm ERR! node_modules/apollo-link
npm ERR!   apollo-link@"^1.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/ariqueaguilar/.npm/_logs/2023-12-08T19_17_02_975Z-eresolve-report.txt

• ran npm ls graphql ├─┬ apollo-cache-inmemory@1.6.6 (UP TO DATE!) │ ├─┬ apollo-cache@1.3.5 (APOLLO CACHE IS UP TO DATE!) │ │ └── graphql@0.13.2 deduped (this is so old, I can't even look at it!) │ └── graphql@0.13.2 deduped ├─┬ apollo-client@2.6.10 │ └── graphql@0.13.2 deduped ├─┬ apollo-link-error@1.1.13 │ └─┬ apollo-link-http-common@0.2.16 │ └── graphql@0.13.2 deduped ├─┬ apollo-link-http@1.5.17 │ └── graphql@0.13.2 deduped ├─┬ apollo-link@1.2.14 │ └── graphql@0.13.2 deduped ├─┬ apollo-server-express@1.4.0 │ └─┬ apollo-server-core@1.4.0 │ ├─┬ apollo-cache-control@0.1.1 │ │ └── graphql@0.13.2 deduped │ ├─┬ apollo-tracing@0.1.4 │ │ └── graphql@0.13.2 deduped │ ├─┬ graphql-extensions@0.0.10 │ │ └── graphql@0.13.2 deduped │ └── graphql@0.13.2 deduped ├─┬ apollo-utilities@1.3.4 │ └── graphql@0.13.2 deduped ├─┬ graphql-date@1.0.3 │ └── graphql@0.13.2 deduped ├─┬ graphql-tag@2.12.6 │ └── graphql@0.13.2 deduped ├─┬ graphql-tools@2.24.0 │ └── graphql@0.13.2 deduped ├─┬ graphql-type-json@0.1.4 │ └── graphql@0.13.2 deduped └── graphql@0.13.2

Handeling Peer Dependencies after installing Graphql@15.0.0

• ended up going to graphqlv14 due to peer dependencies

> npm install graphql@15.0.0
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-client@2.6.4
npm WARN node_modules/apollo-client
npm WARN   apollo-client@"^2.6.4" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@0.13.2
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache@1.3.5
npm WARN   node_modules/apollo-cache
npm WARN     apollo-cache@"^1.3.5" from apollo-cache-inmemory@1.6.6
npm WARN     node_modules/apollo-cache-inmemory
npm WARN   16 more (apollo-cache-control, apollo-cache-inmemory, ...)
npm WARN

Graphql-tools@2.24.0

npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0" from graphql-tools@2.24.0
npm WARN node_modules/graphql-tools
npm WARN   graphql-tools@"^2.8.0" from the root project

In research graphql-tools, I found this message:

• This package has been deprecated and now it only exports makeExecutableSchema. And it will no longer receive updates. We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc. Check out https://www.graphql-tools.com to learn what package you should use instead
• I am trying to change it to @graphql-tools/schema for the src/server/index.js
• It looks like maybe I have to uninstall graphql-tools because both these commands: npm install graphql-tools/schema@10.0.2 npm i @graphql-tools/schema aren't allowing me to install due to the dependency on graphql-tools

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: apollo-utilities@1.3.2
npm WARN Found: graphql@15.0.0
npm WARN node_modules/graphql
npm WARN   graphql@"15.0.0" from the root project
npm WARN   9 more (apollo-cache, apollo-cache-inmemory, apollo-link, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-utilities@1.3.2
npm WARN node_modules/apollo-client/node_modules/apollo-utilities
npm WARN   apollo-utilities@"1.3.2" from apollo-client@2.6.4
npm WARN   node_modules/apollo-client
npm WARN   1 more (apollo-cache)
npm WARN
npm WARN Conflicting peer dependency: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-utilities@1.3.2
npm WARN   node_modules/apollo-client/node_modules/apollo-utilities
npm WARN     apollo-utilities@"1.3.2" from apollo-client@2.6.4
npm WARN     node_modules/apollo-client
npm WARN     1 more (apollo-cache)

npm WARN deprecated apollo-tracing@0.1.4: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated graphql-extensions@0.0.10: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/

Deprecated apollo-cache-control

npm WARN deprecated apollo-cache-control@0.1.1: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.

Apollo-server-core@1.4.0 deprecation

npm WARN deprecated apollo-server-core@1.4.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.

core-js deprecation

npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

Graphql dependencies that need upgrading

after funning npm ls graphql, I was able to see that graphql has upgraded easily to version 14.7.0, except for the following dependencies:

├─┬ apollo-server-express@1.4.0
│ └─┬ apollo-server-core@1.4.0
│   ├─┬ apollo-cache-control@0.1.1
│   │ └── graphql@0.13.2 deduped
│   ├─┬ apollo-tracing@0.1.4
│   │ └── graphql@0.13.2 deduped
│   ├─┬ graphql-extensions@0.0.10
│   │ └── graphql@0.13.2 deduped
│   └── graphql@0.13.2

I'm running in circles it seems

• After trying to ungrade graphql to 16.6.0 - because apollo/server requires that level no matter how low I go with the version, it only makes sense that this is my next to-do!
• A lot of our current dependencies require the highest of v15 graphql, but nothing for 16.6.0, which is what apollo/server wants in order to utilize it.
• Going to take a brain break!

> npm install graphql@16.6.0
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-cache-inmemory@1.6.6
npm WARN node_modules/apollo-cache-inmemory
npm WARN   apollo-cache-inmemory@"^1.6.6" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-client@2.6.4
npm WARN node_modules/apollo-client
npm WARN   peer apollo-client@"^2.6.4" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN   5 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" from apollo-client@2.6.4
npm WARN node_modules/apollo-client
npm WARN   peer apollo-client@"^2.6.4" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN   5 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link@1.2.14
npm WARN node_modules/apollo-link
npm WARN   peer apollo-link@"^1.2.12" from @apollo/react-components@3.1.5
npm WARN   node_modules/@apollo/react-components
npm WARN   5 more (apollo-client, apollo-link-error, apollo-link-http, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link-http@1.5.17
npm WARN node_modules/apollo-link-http
npm WARN   apollo-link-http@"^1.5.17" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-utilities@1.3.4
npm WARN node_modules/apollo-utilities
npm WARN   peer apollo-utilities@"^1.3.2" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN   5 more (@apollo/react-components, apollo-cache, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: spoke@13.1.0
npm WARN Found: graphql@14.7.0
npm WARN node_modules/graphql
npm WARN   peer graphql@"^14.3.1" from @apollo/react-common@3.1.4
npm WARN   node_modules/@apollo/react-common
npm WARN     @apollo/react-common@"^3.1.4" from @apollo/react-components@3.1.5
npm WARN     node_modules/@apollo/react-components
npm WARN     4 more (@apollo/react-hoc, @apollo/react-hooks, ...)
npm WARN   20 more (@apollo/react-components, @apollo/react-hoc, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql@"^14.3.1" from react-apollo@3.1.5
npm WARN node_modules/react-apollo
npm WARN   react-apollo@"^3.1.5" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: spoke@13.1.0
npm ERR! Found: graphql@16.6.0
npm ERR! node_modules/graphql
npm ERR!   graphql@"16.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" from apollo-link@1.2.14
npm ERR! node_modules/apollo-link
npm ERR!   apollo-link@"^1.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/ariqueaguilar/.npm/_logs/2023-12-08T20_39_00_419Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/ariqueaguilar/.npm/_logs/2023-12-08T20_39_00_419Z-debug-0.log

AssignmentSummary Base Code BEFORE

import PropTypes from "prop-types";
import React, { Component } from "react";
import { StyleSheet, css } from "aphrodite";
import { compose } from "recompose";

import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";

import { withRouter } from "react-router";
import withMuiTheme from "../containers/hoc/withMuiTheme";
import { dataTest } from "../lib/attributes";
import {
  getSideboxes,
  renderSummary
} from "../extensions/texter-sideboxes/components";
import theme from "../styles/mui-theme";

const styles = StyleSheet.create({
  container: {
    margin: `${theme.spacing(2)}px 0`
  },
  image: {
    height: 100
  },
  buttonRow: {
    display: "flex",
    flexWrap: "wrap",
    gap: theme.spacing(2),
    marginBottom: theme.spacing(2)
  }
});

export class AssignmentSummaryBase extends Component {
  state = {
    badTimezoneTooltipOpen: false
  };

  goToTodos(contactsFilter, assignmentId) {
    const { organizationId, router, todoLink } = this.props;
    if (todoLink) {
      return todoLink(contactsFilter, assignmentId, router);
    }
    if (contactsFilter) {
      router.push(
        `/app/${organizationId}/todos/${assignmentId}/${contactsFilter}`
      );
    }
  }

  renderBadgedButton({
    dataTestText,
    assignment,
    title,
    count,
    disabled,
    contactsFilter,
    hideIfZero,
    style,
    hideBadge,
    color
  }) {
    if (count === 0 && hideIfZero) {
      return "";
    }
    if (count === 0 || hideBadge) {
      return (
        <Button
          {...dataTest(dataTestText)}
          disabled={disabled}
          variant="outlined"
          onClick={() => this.goToTodos(contactsFilter, assignment.id)}
        >
          {title}
        </Button>
      );
    } else {
      return (
        <Badge
          key={title}
          badgeContent={count || ""}
          color={disabled ? "primary" : color}
        >
          <Button
            {...dataTest(dataTestText)}
            disabled={disabled}
            onClick={() => this.goToTodos(contactsFilter, assignment.id)}
            variant="outlined"
          >
            {title}
          </Button>
        </Badge>
      );
    }
  }

  render() {
    const { assignment, texter } = this.props;
    const {
      campaign,
      unmessagedCount,
      unrepliedCount,
      badTimezoneCount,
      pastMessagesCount,
      skippedMessagesCount,
      feedback
    } = assignment;
    const {
      id: campaignId,
      title,
      description,
      primaryColor,
      logoImageUrl,
      introHtml,
      texterUIConfig
    } = campaign;
    const settingsData = JSON.parse(
      (texterUIConfig && texterUIConfig.options) || "{}"
    );
    const sideboxProps = { assignment, campaign, texter, settingsData };
    const enabledSideboxes = getSideboxes(sideboxProps, "TexterTodoList");
    // if there's a sidebox marked popup, then we will only show that sidebox and little else
    const hasPopupSidebox = Boolean(enabledSideboxes.popups.length);
    const sideboxList = enabledSideboxes
      .filter(sb =>
        hasPopupSidebox ? sb.name === enabledSideboxes.popups[0] : true
      )
      .map(sb => renderSummary(sb, settingsData, this, sideboxProps));

    let cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
      this.props.muiTheme.palette.background.default
    );
    if (primaryColor) {
      try {
        cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
          primaryColor
        );
      } catch (e) {}
    }

    // NOTE: we bring back archived campaigns if they have feedback
    // but want to get rid of them once feedback is acknowledged
    if (campaign.isArchived && !hasPopupSidebox) return null;
    const campaignAllowBulkSend = texterUIConfig && texterUIConfig.sideboxChoices && texterUIConfig.sideboxChoices.includes("per-campaign-bulk-send") ? settingsData["per-campaign-bulk-send"] : true;
    return (
      <div
        className={css(styles.container)}
        {...dataTest(`assignmentSummary-${campaignId}`)}
      >
        <Card>
          <CardHeader
            title={title}
            subheader={description}
            style={{
              backgroundColor: primaryColor,
              color: cardTitleTextColor
            }}
            subheaderTypographyProps={{
              color: "inherit"
            }}
            avatar={
              logoImageUrl ? (
                <img src={logoImageUrl} className={css(styles.image)} />
              ) : null
            }
          />
          <CardContent>
            {introHtml && (
              <div style={{ margin: "20px" }}>
                <div dangerouslySetInnerHTML={{ __html: introHtml }} />
              </div>
            )}
            {(hasPopupSidebox && sideboxList) || null}

            <div className={css(styles.buttonRow)}>
              {(this.props.assignment.campaign.organization.allowSendAll &&
                campaignAllowBulkSend) ||
              hasPopupSidebox
                ? null
                : this.renderBadgedButton({
                    dataTestText: "sendFirstTexts",
                    assignment,
                    title: "Send first texts",
                    count: unmessagedCount,
                    primary: true,
                    disabled: false,
                    contactsFilter: "text",
                    hideIfZero: true,
                    color: "primary"
                  })}
              {hasPopupSidebox
                ? null
                : this.renderBadgedButton({
                    dataTestText: "Respond",
                    assignment,
                    title: "Respond",
                    count: unrepliedCount,
                    primary: false,
                    disabled: false,
                    contactsFilter: "reply",
                    hideIfZero: true,
                    color: "error"
                  })}
              {this.renderBadgedButton({
                assignment,
                title: pastMessagesCount
                  ? `Past ${pastMessagesCount} Messages`
                  : `Past Messages`,
                count: pastMessagesCount,
                primary: false,
                disabled: false,
                contactsFilter: "stale",
                hideIfZero: true,
                color: "secondary",
                hideBadge: true
              })}
              {this.renderBadgedButton({
                assignment,
                title: skippedMessagesCount
                  ? `Skipped ${skippedMessagesCount} Messages`
                  : `Skipped Messages`,
                count: skippedMessagesCount,
                primary: false,
                disabled: false,
                contactsFilter: "skipped",
                hideIfZero: true,
                color: "secondary",
                hideBadge: true
              })}
              {this.props.assignment.campaign.organization.allowSendAll &&
              campaignAllowBulkSend &&
              !hasPopupSidebox
                ? this.renderBadgedButton({
                    assignment,
                    title: "Send messages",
                    primary: true,
                    disabled: false,
                    contactsFilter: "text",
                    count: 0,
                    hideIfZero: false,
                    color: "primary"
                  })
                : ""}
              {this.renderBadgedButton({
                assignment,
                title: "Send later (outside timezone)",
                count: badTimezoneCount,
                primary: false,
                disabled: true,
                contactsFilter: null,
                hideIfZero: true,
                color: "secondary"
              })}
            </div>

            {sideboxList.length && !hasPopupSidebox ? (
              <div>{sideboxList}</div>
            ) : null}

            {!sideboxList.length &&
              !unmessagedCount &&
              !unrepliedCount &&
              !pastMessagesCount &&
              !skippedMessagesCount &&
              !badTimezoneCount && <div>Nothing to do</div>}
          </CardContent>
        </Card>
      </div>
    );
  }
}

AssignmentSummaryBase.propTypes = {
  organizationId: PropTypes.string,
  router: PropTypes.object,
  assignment: PropTypes.object,
  texter: PropTypes.object,
  refreshData: PropTypes.func,
  todoLink: PropTypes.func
};

export default compose(withMuiTheme, withRouter)(AssignmentSummaryBase);

AFTER

import PropTypes from "prop-types";
import React, { Component } from "react";
import { StyleSheet, css } from "aphrodite";
// import { compose } from "recompose";
import composeHooks from 'react-hooks-compose';

import Button from "@material-ui/core/Button";
import Badge from "@material-ui/core/Badge";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";

import { withRouter } from "react-router";
import withMuiTheme from "../containers/hoc/withMuiTheme";
import { dataTest } from "../lib/attributes";
import {
  getSideboxes,
  renderSummary
} from "../extensions/texter-sideboxes/components";
import theme from "../styles/mui-theme";

const useForm = () => {
  // what does this Assignment Summary utilize as a form?
  //styles
  // 
}

const styles = StyleSheet.create({
  container: {
    margin: `${theme.spacing(2)}px 0`
  },
  image: {
    height: 100
  },
  buttonRow: {
    display: "flex",
    flexWrap: "wrap",
    gap: theme.spacing(2),
    marginBottom: theme.spacing(2)
  }
});

export class AssignmentSummaryBase {
  state = {
    badTimezoneTooltipOpen: false
  };

  goToTodos(contactsFilter, assignmentId) {
    const { organizationId, router, todoLink } = this.props;
    if (todoLink) {
      return todoLink(contactsFilter, assignmentId, router);
    }
    if (contactsFilter) {
      router.push(
        `/app/${organizationId}/todos/${assignmentId}/${contactsFilter}`
      );
    }
  }

  renderBadgedButton({
    dataTestText,
    assignment,
    title,
    count,
    disabled,
    contactsFilter,
    hideIfZero,
    style,
    hideBadge,
    color
  }) {
    if (count === 0 && hideIfZero) {
      return "";
    }
    if (count === 0 || hideBadge) {
      return (
        <Button
          {...dataTest(dataTestText)}
          disabled={disabled}
          variant="outlined"
          onClick={() => this.goToTodos(contactsFilter, assignment.id)}
        >
          {title}
        </Button>
      );
    } else {
      return (
        <Badge
          key={title}
          badgeContent={count || ""}
          color={disabled ? "primary" : color}
        >
          <Button
            {...dataTest(dataTestText)}
            disabled={disabled}
            onClick={() => this.goToTodos(contactsFilter, assignment.id)}
            variant="outlined"
          >
            {title}
          </Button>
        </Badge>
      );
    }
  }

  render() {
    const { assignment, texter } = this.props;
    const {
      campaign,
      unmessagedCount,
      unrepliedCount,
      badTimezoneCount,
      pastMessagesCount,
      skippedMessagesCount,
      feedback
    } = assignment;
    const {
      id: campaignId,
      title,
      description,
      primaryColor,
      logoImageUrl,
      introHtml,
      texterUIConfig
    } = campaign;
    const settingsData = JSON.parse(
      (texterUIConfig && texterUIConfig.options) || "{}"
    );
    const sideboxProps = { assignment, campaign, texter, settingsData };
    const enabledSideboxes = getSideboxes(sideboxProps, "TexterTodoList");
    // if there's a sidebox marked popup, then we will only show that sidebox and little else
    const hasPopupSidebox = Boolean(enabledSideboxes.popups.length);
    const sideboxList = enabledSideboxes
      .filter(sb =>
        hasPopupSidebox ? sb.name === enabledSideboxes.popups[0] : true
      )
      .map(sb => renderSummary(sb, settingsData, this, sideboxProps));

    let cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
      this.props.muiTheme.palette.background.default
    );
    if (primaryColor) {
      try {
        cardTitleTextColor = this.props.muiTheme.palette.getContrastText(
          primaryColor
        );
      } catch (e) {}
    }

    // NOTE: we bring back archived campaigns if they have feedback
    // but want to get rid of them once feedback is acknowledged
    if (campaign.isArchived && !hasPopupSidebox) return null;
    const campaignAllowBulkSend = texterUIConfig && texterUIConfig.sideboxChoices && texterUIConfig.sideboxChoices.includes("per-campaign-bulk-send") ? settingsData["per-campaign-bulk-send"] : true;
    return (
      <div
        className={css(styles.container)}
        {...dataTest(`assignmentSummary-${campaignId}`)}
      >
        <Card>
          <CardHeader
            title={title}
            subheader={description}
            style={{
              backgroundColor: primaryColor,
              color: cardTitleTextColor
            }}
            subheaderTypographyProps={{
              color: "inherit"
            }}
            avatar={
              logoImageUrl ? (
                <img src={logoImageUrl} className={css(styles.image)} />
              ) : null
            }
          />
          <CardContent>
            {introHtml && (
              <div style={{ margin: "20px" }}>
                <div dangerouslySetInnerHTML={{ __html: introHtml }} />
              </div>
            )}
            {(hasPopupSidebox && sideboxList) || null}

            <div className={css(styles.buttonRow)}>
              {(this.props.assignment.campaign.organization.allowSendAll &&
                campaignAllowBulkSend) ||
              hasPopupSidebox
                ? null
                : this.renderBadgedButton({
                    dataTestText: "sendFirstTexts",
                    assignment,
                    title: "Send first texts",
                    count: unmessagedCount,
                    primary: true,
                    disabled: false,
                    contactsFilter: "text",
                    hideIfZero: true,
                    color: "primary"
                  })}
              {hasPopupSidebox
                ? null
                : this.renderBadgedButton({
                    dataTestText: "Respond",
                    assignment,
                    title: "Respond",
                    count: unrepliedCount,
                    primary: false,
                    disabled: false,
                    contactsFilter: "reply",
                    hideIfZero: true,
                    color: "error"
                  })}
              {this.renderBadgedButton({
                assignment,
                title: pastMessagesCount
                  ? `Past ${pastMessagesCount} Messages`
                  : `Past Messages`,
                count: pastMessagesCount,
                primary: false,
                disabled: false,
                contactsFilter: "stale",
                hideIfZero: true,
                color: "secondary",
                hideBadge: true
              })}
              {this.renderBadgedButton({
                assignment,
                title: skippedMessagesCount
                  ? `Skipped ${skippedMessagesCount} Messages`
                  : `Skipped Messages`,
                count: skippedMessagesCount,
                primary: false,
                disabled: false,
                contactsFilter: "skipped",
                hideIfZero: true,
                color: "secondary",
                hideBadge: true
              })}
              {this.props.assignment.campaign.organization.allowSendAll &&
              campaignAllowBulkSend &&
              !hasPopupSidebox
                ? this.renderBadgedButton({
                    assignment,
                    title: "Send messages",
                    primary: true,
                    disabled: false,
                    contactsFilter: "text",
                    count: 0,
                    hideIfZero: false,
                    color: "primary"
                  })
                : ""}
              {this.renderBadgedButton({
                assignment,
                title: "Send later (outside timezone)",
                count: badTimezoneCount,
                primary: false,
                disabled: true,
                contactsFilter: null,
                hideIfZero: true,
                color: "secondary"
              })}
            </div>

            {sideboxList.length && !hasPopupSidebox ? (
              <div>{sideboxList}</div>
            ) : null}

            {!sideboxList.length &&
              !unmessagedCount &&
              !unrepliedCount &&
              !pastMessagesCount &&
              !skippedMessagesCount &&
              !badTimezoneCount && <div>Nothing to do</div>}
          </CardContent>
        </Card>
      </div>
    );
  }
}

AssignmentSummaryBase.propTypes = {
  organizationId: PropTypes.string,
  router: PropTypes.object,
  assignment: PropTypes.object,
  texter: PropTypes.object,
  refreshData: PropTypes.func,
  todoLink: PropTypes.func
};

export default composeHooks( {withMuiTheme, withRouter} )( AssignmentSummaryBase );