🔨 Refactor ConnectionNotice to use hooks (codesandbox#1963)

Small example refactor showing how to use Cerebral with React Hooks

Author: MichaelDeBoey

…itor/Workspace/ConnectionNotice/index.js …ce/ConnectionNotice/ConnectionNotice.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/ConnectionNotice.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/ConnectionNotice.tsx

@@ -1,18 +1,20 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { inject, observer } from 'mobx-react';
+
+import { useStore } from 'app/store';
 
 import { Container } from './elements';
 
-function ConnectionNotice({ store }) {
+export const ConnectionNotice = observer(() => {
+  const { connected } = useStore();
+
   return (
-    !store.connected && (
+    !connected && (
       <Container>
         You{"'"}re not connected to the internet. You can still edit, but you
         cannot save. We recommend using the {"'"}Download{"'"} function to keep
         your changes.
       </Container>
     )
   );
-}
-
-export default inject('store')(observer(ConnectionNotice));
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.js

@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.red};
+    background-color: ${theme.redBackground};
+    padding: 1rem;
+    font-size: 0.75rem;
+  `}
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/ConnectionNotice/elements.ts

@@ -0,0 +1 @@
+export { ConnectionNotice } from './ConnectionNotice';