dev feature flags with query + cookies

Author: pwfisher

explorer/components/AppFlags.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { useCookies } from 'react-cookie'
+
+const flags = ['myTags']
+
+export const AppFlags: React.FC = () => {
+  const { query } = useRouter()
+  const [cookies, setCookie] = useCookies()
+
+  React.useEffect(() => {
+    flags.forEach(flag => {
+      const key = `feature__${flag}`
+      if (query?.[key] === 'on' && cookies[key] !== 'on') setCookie(key, 'on', { path: '/' })
+      if (query?.[key] === 'off' && cookies[key] !== 'off') setCookie(key, 'off', { path: '/' })
+    })
+  }, [query])
+
+  return null
+}

explorer/components/DrawingPage/ActionsMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { navBarItemStyles } from './styles'
+import { useCookies } from 'react-cookie'
 
 type Action = {
   title: string
@@ -9,31 +10,38 @@ type Action = {
 
 export const ActionsMenu: React.FC = () => {
   const [isActive, setIsActive] = React.useState(false)
+  const [cookies] = useCookies(['feature__myTags'])
+  const [actions, setActions] = React.useState<Action[]>([])
 
-  const actions: Action[] = []
+  const addNewTag = { title: 'Add new tag', onClick: () => alert('add new tag') }
 
-  if (!actions.length) return null
+  React.useEffect(() => {
+    const newActions = []
+    if (cookies.feature__myTags === 'on') newActions.push(addNewTag)
+    setActions(newActions)
+  }, [cookies])
 
   return (
-    <Container title='More Actions' onClick={() => setIsActive(!isActive)}>
+    <Container title='Actions' onClick={() => setIsActive(!isActive)} isHidden={!actions.length}>
       <svg viewBox="0 0 24 24">
         <circle cx="5" cy="12" r="2" />
         <circle cx="12" cy="12" r="2" />
         <circle cx="19" cy="12" r="2" />
       </svg>
       <Popup isActive={isActive}>
         {actions.map(action => (
-          <Item><a onClick={action.onClick}>{action.title}</a></Item>
+          <Item key={action.title}><a onClick={action.onClick}>{action.title}</a></Item>
         ))}
       </Popup>
     </Container>
   )
 }
 
-const Container = styled.button.attrs({ className: 'Explorer__ActionsMenu__Container'})`
+const Container = styled.button.attrs({ className: 'Explorer__ActionsMenu__Container'})<{ isHidden: boolean }>`
   ${navBarItemStyles}
   background: none;
   border: 0;
+  display: ${o => o.isHidden && 'none'};
 
   svg {
     display: block;

explorer/pages/_app.js

@@ -1,10 +1,13 @@
+import { AppFlags } from '../components/AppFlags'
 import { AppStyle } from '../components/AppStyle'
+import { CookiesProvider } from 'react-cookie'
 
 export default function App({ Component, pageProps }) {
   return (
-    <>
+    <CookiesProvider>
+      <AppFlags />
       <AppStyle />
       <Component {...pageProps} />
-    </>
+    </CookiesProvider>
   )
 }