🔨 Add useInterval Hook, Refactor Live to use useInterval

Added a useInterval Hook (demo here: https://codesandbox.io/s/sessiontimer-useinterval-hook-demo-0l6jq)

Refactored Live workspace item and it's dependents to use hooks.

Author: Saeris

packages/app/src/app/hooks/index.ts

@@ -1 +1,2 @@
+export { useInterval } from './useInterval';
 export { useScript } from './useScript';

packages/app/src/app/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+// Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+import { useEffect, useRef } from 'react';
+
+export const useInterval = (callback = () => {}, delay: number) => {
+  const savedCallback = useRef(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+
+      return () => clearInterval(id);
+    }
+
+    return undefined;
+  }, [delay]);
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -10,7 +10,7 @@ import Files from './items/Files';
 import ProjectInfo from './items/ProjectInfo';
 import GitHub from './items/GitHub';
 import Server from './items/Server';
-import Live from './items/Live';
+import { Live } from './items/Live';
 import More from './items/More';
 import Deployment from './items/Deployment';
 import ConfigurationFiles from './items/ConfigurationFiles';

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/Countdown.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useSignals, useStore } from 'app/store';
+import { LiveInfo } from './LiveInfo';
+import { LiveButton } from './LiveButton';
+import {
+  Description,
+  ErrorDescription,
+  WorkspaceInputContainer,
+  WorkspaceSubtitle,
+} from '../../elements';
+
+export const Live = observer(() => {
+  const signals = useSignals();
+  const store = useStore();
+  const hasUnsyncedModules = !store.editor.isAllModulesSynced;
+
+  return (
+    <div>
+      {store.live.isLive ? (
+        <LiveInfo />
+      ) : (
+        <>
+          <Description style={{ marginBottom: '1rem' }}>
+            Invite others to live edit this sandbox with you. We
+            {"'"}
+            re doing it live!
+          </Description>
+
+          <>
+            <WorkspaceSubtitle>Create live room</WorkspaceSubtitle>
+
+            <Description>
+              To invite others you need to generate a URL that others can join.
+            </Description>
+
+            {hasUnsyncedModules && (
+              <ErrorDescription>
+                Save all your files before going live
+              </ErrorDescription>
+            )}
+
+            <WorkspaceInputContainer>
+              <LiveButton
+                onClick={() => {
+                  signals.live.createLiveClicked({
+                    sandboxId: store.editor.currentId,
+                  });
+                }}
+                isLoading={store.live.isLoading}
+                disable={hasUnsyncedModules}
+              />
+            </WorkspaceInputContainer>
+          </>
+        </>
+      )}
+    </div>
+  );
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/Live.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { useInterval } from 'app/hooks';
+
+import { AnimatedRecordIcon, Button, LoadingDiv } from './elements';
+
+export const LiveButton = ({
+  disable,
+  icon = true,
+  isLoading,
+  message = 'Go Live',
+  onClick,
+}) => {
+  const [hovering, setHovering] = useState(false);
+  const [showIcon, setShowIcon] = useState(icon);
+
+  useInterval(
+    () => {
+      if (hovering) {
+        setShowIcon(!showIcon);
+      }
+    },
+    hovering ? 1000 : null
+  );
+
+  if (!hovering && !showIcon) {
+    setShowIcon(true);
+  }
+
+  const startHovering = () => setHovering(true);
+  const stopHovering = () => setHovering(false);
+
+  if (isLoading) {
+    return <LoadingDiv>Creating Session</LoadingDiv>;
+  }
+
+  return (
+    <Button
+      disable={disable}
+      onMouseEnter={startHovering}
+      onMouseLeave={stopHovering}
+      onClick={onClick}
+    >
+      {/*
+       // @ts-ignore */}
+      {icon && <AnimatedRecordIcon opacity={Number(showIcon)} />} {message}
+    </Button>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveButton.js

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+
+const styles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  padding: 0.5rem;
+  background-color: #fd2439b8;
+  width: 100%;
+  color: white;
+  border-radius: 4px;
+  font-weight: 800;
+  border: 2px solid #fd2439b8;
+`;
+
+interface ButtonProps extends HTMLButtonElement {
+  disable?: boolean;
+}
+export const Button = styled.button<ButtonProps>`
+  ${({ disable }) => css`
+    transition: 0.3s ease all;
+    ${styles};
+    cursor: pointer;
+
+    svg {
+      margin-right: 0.25rem;
+    }
+
+    ${disable
+      ? css`
+          pointer-events: none;
+          background-color: rgba(0, 0, 0, 0.3);
+          border-color: rgba(0, 0, 0, 0.2);
+          color: rgba(255, 255, 255, 0.7);
+        `
+      : css`
+          &:hover {
+            background-color: #fd2439fa;
+          }
+        `};
+  `}
+`;
+
+export const LoadingDiv = styled.div`
+  ${styles};
+`;
+
+export const AnimatedRecordIcon = styled(RecordIcon)`
+  ${({ opacity = 1 }) => css`
+    opacity: ${opacity};
+    transition: 0.3s ease opacity;
+  `}
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveButton/LiveButton.tsx

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