Fix recoil + rbd bug

github/facebookexperimental/Recoil#496
Fix styled-components bug
github/styled-components/styled-components#3564

b2b-app/imports/ui/admin/forms/survey-builder/context/dnd.js

@@ -1,39 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { DragDropContext } from 'react-beautiful-dnd'
-import { selector, useSetRecoilState } from 'recoil'
-import { singleState } from '../types/single/single'
-import produce from 'immer'
-
-const dndState = selector({
-  key: 'dnd',
-  set: ({ get, set }, result) => {
-    const { source, destination, draggableId } = result
-    if (!destination) return
-    if (
-      destination.droppableId === source.droppableId &&
-      destination.index === source.index
-    ) {
-      return
-    }
-
-    // FIXME: convert part ids to strings. remember to update stories too
-    let [key, id] = draggableId.split('-')
-    id = parseInt(id)
-    const single = get(singleState(id))
-    const items = Array.from(single.answers)
-    const [reorderedItem] = items.splice(source.index, 1)
-    items.splice(destination.index, 0, reorderedItem)
-
-    const nextState = produce(single, (draft) => {
-      draft.answers = items
-    })
-    set(singleState(id), nextState)
-  },
-})
+import { useRecoilCallback } from 'recoil'
+import { singleAnswersState } from '../types/single/inner'
 
 const DndProvider = ({ children }) => {
-  const setList = useSetRecoilState(dndState)
+  const setList = useRecoilCallback(
+    ({ set }) => (result) => {
+      const { source, destination, draggableId } = result
+      if (!destination) return
+      if (
+        destination.droppableId === source.droppableId &&
+        destination.index === source.index
+      ) {
+        return
+      }
+
+      // FIXME: convert part ids to strings. remember to update stories too
+      let id = draggableId.split('-')[1]
+      id = parseInt(id)
+
+      set(singleAnswersState(id), (answers) => {
+        const items = Array.from(answers)
+        const [reorderedItem] = items.splice(source.index, 1)
+        items.splice(destination.index, 0, reorderedItem)
+        return items
+      })
+    },
+    []
+  )
 
   const handleDragEnd = (result) => {
     setList(result)

b2b-app/imports/ui/admin/forms/survey-builder/types/single/inner.js

@@ -1,14 +1,13 @@
-import React, { useEffect, useLayoutEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { selectorFamily, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { selectorFamily, useSetRecoilState } from 'recoil'
 import { Draggable, Droppable } from 'react-beautiful-dnd'
 
 import Item from './item'
 import Question from '../../question'
 import { useListControls } from '../../hooks'
 import { defaultAnswer, singleState } from './single'
 import produce from 'immer'
-import { dndState } from '../../context/dnd'
 
 export const singleAnswersState = selectorFamily({
   key: 'singleAnswers',
@@ -44,8 +43,7 @@ const SingleInner = ({ id, initialLabel, initialList }) => {
     initialList
   )
   const setQuestion = useSetRecoilState(singleQuestionState(id))
-  const [answers, setAnswers] = useRecoilState(singleAnswersState(id))
-  console.log('all', all)
+
   return (
     <div>
       <Question