🔨 Switch Header to use useOvermind (#3218)

* 🔨 Switch Header to use useOvermind

* Fix linting errors

* fix header

Co-authored-by: Sara Vieira <[email protected]>

Author: MichaelDeBoey

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,27 @@
+import { useEffect, useRef } from 'react';
+
+const noop = () => undefined;
+
+export const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef<() => void>();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay !== null) {
+      const tick = () => {
+        if (savedCallback?.current) {
+          savedCallback.current();
+        }
+      };
+
+      const interval = setInterval(tick, delay);
+
+      return () => clearInterval(interval);
+    }
+
+    return noop;
+  }, [delay]);
+};

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/Action/Action.tsx

@@ -1 +1,114 @@
-export { Action } from './Action';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { FunctionComponent } from 'react';
+
+import {
+  Title,
+  Container,
+  ActionLink,
+  ActionA,
+  ActionTooltip,
+  IconContainer,
+  MoreInfoIcon,
+} from './elements';
+import { ActionProps } from './types';
+
+export const Action: FunctionComponent<ActionProps> = ({
+  onClick,
+  href,
+  a,
+  Icon,
+  title,
+  tooltip,
+  highlight,
+  placeholder,
+  moreInfo,
+  unresponsive,
+  iconProps = {},
+  iconContainerProps = {},
+  children,
+  ...props
+}) => {
+  if (!href && (placeholder || tooltip)) {
+    return (
+      <Container onClick={onClick} {...props}>
+        <Tooltip content={placeholder || tooltip} hideOnClick={false}>
+          <IconContainer {...iconContainerProps}>
+            <Icon {...iconProps} />
+
+            {title !== undefined && <Title>{title}</Title>}
+
+            {moreInfo && <MoreInfoIcon />}
+          </IconContainer>
+
+          {children}
+        </Tooltip>
+      </Container>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <Container onClick={onClick} highlight={highlight} {...props}>
+        <IconContainer {...iconContainerProps}>
+          <Icon {...iconProps} />
+
+          {title !== undefined && <Title>{title}</Title>}
+
+          {moreInfo && <MoreInfoIcon />}
+        </IconContainer>
+
+        {children}
+      </Container>
+    );
+  }
+
+  if (href && a && (placeholder || tooltip)) {
+    return (
+      <ActionA href={href} target="_blank" rel="noopener noreferrer">
+        <ActionTooltip content={placeholder || tooltip}>
+          <IconContainer {...iconContainerProps}>
+            <Icon {...iconProps} />
+
+            {title !== undefined && <Title>{title}</Title>}
+
+            {moreInfo && <MoreInfoIcon />}
+          </IconContainer>
+        </ActionTooltip>
+
+        {children}
+      </ActionA>
+    );
+  }
+
+  if (href && (placeholder || tooltip)) {
+    return (
+      <ActionLink to={href} {...props}>
+        <ActionTooltip content={placeholder || tooltip}>
+          <IconContainer>
+            <Icon {...iconProps} />
+
+            {title !== undefined && <Title>{title}</Title>}
+
+            {moreInfo && <MoreInfoIcon />}
+          </IconContainer>
+        </ActionTooltip>
+
+        {children}
+      </ActionLink>
+    );
+  }
+
+  return (
+    <ActionLink to={href} {...props}>
+      <IconContainer {...iconContainerProps}>
+        <Icon {...iconProps} />
+
+        {title !== undefined && <Title>{title}</Title>}
+
+        {moreInfo && <MoreInfoIcon />}
+      </IconContainer>
+
+      {children}
+    </ActionLink>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/Action/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ComponentType } from 'react';
 
 export type OptionProps = {
   blink?: boolean;
@@ -20,6 +20,5 @@ export interface ActionProps {
   href?: string;
   a?: boolean;
   onClick?: () => void;
-  children?: React.ReactNode;
-  Icon: React.ComponentType;
+  Icon: ComponentType;
 }

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/Action/types.ts

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
-import { default as BaseProgressButton } from '@codesandbox/common/lib/components/ProgressButton';
+import { default as ProgressButtonBase } from '@codesandbox/common/lib/components/ProgressButton';
 import BaseForkIcon from 'react-icons/lib/go/repo-forked';
+import styled from 'styled-components';
 
-export const ProgressButton = styled(BaseProgressButton)`
+export const ProgressButton = styled(ProgressButtonBase)`
   font-size: 0.75rem;
 `;
 

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/ForkButton/elements.ts

@@ -11,8 +11,8 @@ export const ForkButton: FunctionComponent = () => {
     },
     state: {
       editor: {
-        isForkingSandbox,
         currentSandbox: { owned },
+        isForkingSandbox,
       },
     },
   } = useOvermind();