From 055c46ca0c713f58f0666a725ad98ac40328d1a8 Mon Sep 17 00:00:00 2001
From: emmanmills <emmabuy@gmail.com>
Date: Mon, 10 May 2021 16:55:49 -0700
Subject: [PATCH] Add experimental mode cookie in SRC

---
 src/lib/containers/ExperimentalMode.md  |  5 ++++
 src/lib/containers/ExperimentalMode.tsx | 37 +++++++++++++++++++++++++
 styleguide.config.js                    |  5 ++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/lib/containers/ExperimentalMode.md
 create mode 100644 src/lib/containers/ExperimentalMode.tsx

diff --git a/src/lib/containers/ExperimentalMode.md b/src/lib/containers/ExperimentalMode.md
new file mode 100644
index 0000000000..ac19cdc1c3
--- /dev/null
+++ b/src/lib/containers/ExperimentalMode.md
@@ -0,0 +1,5 @@
+```jsx
+
+<ExperimentalMode />
+
+```
\ No newline at end of file
diff --git a/src/lib/containers/ExperimentalMode.tsx b/src/lib/containers/ExperimentalMode.tsx
new file mode 100644
index 0000000000..0f9e9439b8
--- /dev/null
+++ b/src/lib/containers/ExperimentalMode.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Button } from 'react-bootstrap'
+import { useEffect, useState } from 'react'
+
+const ExperimentalMode: React.FC = () => {
+  const [isExperimentalModeOn, setIsExperimentalModeOn] = useState<boolean>(false)
+  let mounted = true
+
+  useEffect(() => {
+    if (mounted) {
+      if (document.cookie.indexOf("SynapseTestWebsite") !== -1) {
+        setIsExperimentalModeOn(true)
+      }
+    }
+    return () => {
+      mounted = false
+    }
+  }, [])
+
+  const createExperimentalModeCookie = () => {
+    document.cookie = "SynapseTestWebsite=true"
+    setIsExperimentalModeOn(true)
+  }
+
+  const deleteExperimentalModeCookie = () => {
+    document.cookie = "SynapseTestWebsite= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
+    setIsExperimentalModeOn(false)
+  }
+
+  return (<>
+    <Button variant="primary" onClick={isExperimentalModeOn ? deleteExperimentalModeCookie: createExperimentalModeCookie}>
+      Experimental mode is {isExperimentalModeOn ? "on" : "off"}
+    </Button>
+  </>)
+}
+
+export default ExperimentalMode
\ No newline at end of file
diff --git a/styleguide.config.js b/styleguide.config.js
index 0231a45d7e..428ad4a1f6 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -21,6 +21,11 @@ module.exports = {
             description: 'Content depends on if you are logged in',
             components: ['src/lib/containers/**/Login.tsx','src/lib/containers/**/Logout.tsx'],
         },
+        {
+            name: 'Experimental Mode',
+            description: 'For components that are in experimental mode',
+            components: 'src/lib/containers/**/ExperimentalMode.tsx'
+        },
         {
             name: 'Home Page',
             //   content: 'docs/homepage.md'