Add useInterval Hook, Refactor Live to use useInterval

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,18 @@
+// Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+import { useEffect, useRef } from 'react';
+
+const noop = () => undefined;
+export const useInterval = (callback: () => void = noop, delay: number) => {
+  const savedCallback = useRef(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const id =
+      delay !== null ? setInterval(savedCallback.current, delay) : null;
+
+    return () => clearInterval(id);
+  }, [delay]);
+};

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

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

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+import { useSignals, useStore } from 'app/store';
+
+import {
+  ErrorDescription,
+  WorkspaceInputContainer,
+  WorkspaceSubtitle,
+} from '../../elements';
+
+import { More } from '../More';
+
+import { Description } from './elements';
+import { LiveButton } from './LiveButton';
+import { LiveInfo } from './LiveInfo';
+
+export const Live = observer(() => {
+  const {
+    live: { createLiveClicked },
+  } = useSignals();
+  const {
+    editor: { currentId, currentSandbox, isAllModulesSynced },
+    isLoggedIn,
+    live: { isLive, isLoading },
+  } = useStore();
+
+  const showPlaceHolder = !(isLoggedIn && (isLive || currentSandbox.owned));
+  if (showPlaceHolder) {
+    const message = isLoggedIn ? (
+      <>
+        You need to own this sandbox to open a live session to collaborate with
+        others in real time.{' '}
+        <p>Fork this sandbox to live share it with others!</p>
+      </>
+    ) : (
+      `You need to be signed in to open a live session to collaborate with others in real time. Sign in to live share this sandbox!`
+    );
+
+    return <More message={message} id="live" />;
+  }
+
+  const hasUnsyncedModules = !isAllModulesSynced;
+  return (
+    <div>
+      {isLive ? (
+        <LiveInfo />
+      ) : (
+        <>
+          <Description>
+            {`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
+              disable={hasUnsyncedModules}
+              isLoading={isLoading}
+              onClick={() => {
+                createLiveClicked({ sandboxId: currentId });
+              }}
+            />
+          </WorkspaceInputContainer>
+        </>
+      )}
+    </div>
+  );
+});

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

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

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

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components';
+import { HTMLAttributes } from 'react';
+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 HTMLAttributes<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/index.ts

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