refactor: ♻️ refactor isHosted && type clean up (#3290)

* refactor: ♻️ refactor isHosted && type clean up

Change-Id: I4dfbad8a07607432801de78920ce42bf81e46498

* refactor: ♻️ code clean up

Change-Id: I8f487a33d332a2acaff84397a97371b56ace28a1

* feat: 💄 lint

Change-Id: I776b1a5e249bdb542f8e6da7cb2277821cf91094

* feat: ✨ ci type

Change-Id: I486dde7bf60321238e9a394c40ad8cdb8bfc54c8

* feat: some code sugession

Change-Id: I4761d057344b95a98e99068d312a42292977875b

app/components/Sidebar/App.tsx

@@ -25,7 +25,7 @@ import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
-import SidebarButton from "./components/SidebarButton";
+import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
 import TrashLink from "./components/TrashLink";
@@ -55,7 +55,7 @@ function AppSidebar() {
       {dndArea && (
         <DndProvider backend={HTML5Backend} options={html5Options}>
           <OrganizationMenu>
-            {(props) => (
+            {(props: SidebarButtonProps) => (
               <SidebarButton
                 {...props}
                 title={team.name}

app/components/Sidebar/Settings.tsx

@@ -7,8 +7,8 @@ import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
-import env from "~/env";
 import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
+import isHosted from "~/utils/isHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -16,8 +16,6 @@ import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Version from "./components/Version";
 
-const isHosted = env.DEPLOYMENT === "hosted";
-
 function SettingsSidebar() {
   const { t } = useTranslation();
   const history = useHistory();

app/components/Sidebar/Sidebar.tsx

@@ -13,7 +13,7 @@ import AccountMenu from "~/menus/AccountMenu";
 import { fadeIn } from "~/styles/animations";
 import Avatar from "../Avatar";
 import ResizeBorder from "./components/ResizeBorder";
-import SidebarButton from "./components/SidebarButton";
+import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
 const ANIMATION_MS = 250;
@@ -170,7 +170,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
 
           {user && (
             <AccountMenu>
-              {(props) => (
+              {(props: SidebarButtonProps) => (
                 <SidebarButton
                   {...props}
                   showMoreMenu

app/components/Sidebar/components/DocumentLink.tsx

@@ -66,8 +66,7 @@ function DocumentLink(
   }, [fetchChildDocuments, node, hasChildDocuments, isActiveDocument]);
 
   const pathToNode = React.useMemo(
-    () =>
-      collection && collection.pathToDocument(node.id).map((entry) => entry.id),
+    () => collection?.pathToDocument(node.id).map((entry) => entry.id),
     [collection, node]
   );
 

app/components/Sidebar/components/Header.tsx

@@ -5,10 +5,9 @@ import styled from "styled-components";
 type Props = {
   onClick?: React.MouseEventHandler;
   expanded?: boolean;
-  children: React.ReactNode;
 };
 
-export function Header({ onClick, expanded, children }: Props) {
+export const Header: React.FC<Props> = ({ onClick, expanded, children }) => {
   return (
     <H3>
       <Button onClick={onClick} disabled={!onClick}>
@@ -19,7 +18,7 @@ export function Header({ onClick, expanded, children }: Props) {
       </Button>
     </H3>
   );
-}
+};
 
 const Button = styled.button`
   display: inline-flex;

app/components/Sidebar/components/NavLink.tsx

@@ -70,7 +70,7 @@ const NavLink = ({
   const { pathname: path } = toLocation;
 
   // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
-  const escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
+  const escapedPath = path?.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
   const match = escapedPath
     ? matchPath(currentLocation.pathname, {
         path: escapedPath,

app/components/Sidebar/components/SidebarButton.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 
-type Props = {
+export type SidebarButtonProps = {
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;
@@ -13,7 +13,7 @@ type Props = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(
+const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
   (
     {
       showDisclosure,
@@ -22,7 +22,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(
       title,
       minHeight = 0,
       ...rest
-    }: Props,
+    }: SidebarButtonProps,
     ref
   ) => (
     <Wrapper