Linking to github and discord on error boundary

Co-authored-by: William Oldham <wegg7250@gmail.com>

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "files.eol": "\n",
     "editor.detectIndentation": false,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false,
+    "editor.tabSize": 2
 }

README.md

@@ -40,7 +40,7 @@ Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/iss
 - [x] Store watched percentage
 - [ ] Add Brand tag top left
 - [ ] Add github and discord top right
-- [ ] Link Github and Discord in error boundary
+- [x] Link Github and Discord in error boundary
 - [ ] Implement movie + series view
   - [ ] Global state for media objects
   - [ ] Styling for pages

src/components/Text/ArrowLink.tsx

@@ -0,0 +1,53 @@
+import { Icon, Icons } from "components/Icon";
+import { Link as LinkRouter } from "react-router-dom";
+
+interface IArrowLinkPropsBase {
+  linkText: string;
+  className?: string;
+  onClick?: () => void;
+  direction?: "left" | "right";
+}
+
+interface IArrowLinkPropsExternal extends IArrowLinkPropsBase {
+  url: string;
+}
+
+interface IArrowLinkPropsInternal extends IArrowLinkPropsBase {
+  to: string;
+}
+
+export type ArrowLinkProps =
+  | IArrowLinkPropsExternal
+  | IArrowLinkPropsInternal
+  | IArrowLinkPropsBase;
+
+export function ArrowLink(props: ArrowLinkProps) {
+  const direction = props.direction || "right";
+  const isExternal = !!(props as IArrowLinkPropsExternal).url;
+  const isInternal = !!(props as IArrowLinkPropsInternal).to;
+  const content = (
+    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95">
+      {direction === "left" ? (
+        <span className="text-xl transition-transform group-hover:-translate-x-1">
+          <Icon icon={Icons.ARROW_LEFT} />
+        </span>
+      ) : null}
+      <span className="flex-1">{props.linkText}</span>
+      {direction === "right" ? (
+        <span className="text-xl transition-transform group-hover:translate-x-1">
+          <Icon icon={Icons.ARROW_RIGHT} />
+        </span>
+      ) : null}
+    </span>
+  );
+
+  if (isExternal)
+    return <a href={(props as IArrowLinkPropsExternal).url}>{content}</a>;
+  else if (isInternal)
+    return (
+      <LinkRouter to={(props as IArrowLinkPropsInternal).to}>{content}</LinkRouter>
+    );
+  return (
+    <span onClick={() => props.onClick && props.onClick()}>{content}</span>
+  );
+}

src/components/Text/Link.tsx

@@ -1,48 +1,37 @@
-import { Icon, Icons } from "components/Icon";
+import { ReactNode } from "react";
 import { Link as LinkRouter } from "react-router-dom";
 
 interface ILinkPropsBase {
-  linkText: string;
+  children?: ReactNode;
   className?: string;
   onClick?: () => void;
-  direction?: "left" | "right";
 }
 
 interface ILinkPropsExternal extends ILinkPropsBase {
   url: string;
+  newTab?: boolean;
 }
 
 interface ILinkPropsInternal extends ILinkPropsBase {
   to: string;
 }
 
-export type LinkProps =
+type LinkProps =
   | ILinkPropsExternal
   | ILinkPropsInternal
   | ILinkPropsBase;
 
 export function Link(props: LinkProps) {
-  const direction = props.direction || "right";
   const isExternal = !!(props as ILinkPropsExternal).url;
   const isInternal = !!(props as ILinkPropsInternal).to;
   const content = (
-    <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95">
-      {direction === "left" ? (
-        <span className="text-xl transition-transform group-hover:-translate-x-1">
-          <Icon icon={Icons.ARROW_LEFT} />
-        </span>
-      ) : null}
-      <span className="flex-1">{props.linkText}</span>
-      {direction === "right" ? (
-        <span className="text-xl transition-transform group-hover:translate-x-1">
-          <Icon icon={Icons.ARROW_RIGHT} />
-        </span>
-      ) : null}
+    <span className="text-bink-600 hover:text-bink-700 cursor-pointer font-bold">
+      {props.children}
     </span>
   );
 
   if (isExternal)
-    return <a href={(props as ILinkPropsExternal).url}>{content}</a>;
+    return <a target={(props as ILinkPropsExternal).newTab ? "blank" : undefined} rel="noopener" href={(props as ILinkPropsExternal).url}>{content}</a>;
   else if (isInternal)
     return (
       <LinkRouter to={(props as ILinkPropsInternal).to}>{content}</LinkRouter>

src/components/layout/ErrorBoundary.tsx

@@ -1,6 +1,8 @@
 import { IconPatch } from "components/Buttons/IconPatch";
 import { Icons } from "components/Icon";
+import { Link } from "components/Text/Link";
 import { Title } from "components/Text/Title";
+import { DISCORD_LINK, GITHUB_LINK } from "mw_constants";
 import { Component } from "react";
 
 interface ErrorBoundaryState {
@@ -49,7 +51,7 @@ export class ErrorBoundary extends Component<{}, ErrorBoundaryState> {
           <Title>Whoops, it broke</Title>
           <p className="my-6 max-w-lg">
             The app encountered an error and wasn't able to recover, please
-            report it to the discord server or on GitHub.
+            report it to the <Link url={DISCORD_LINK} newTab>Discord server</Link> or on <Link url={GITHUB_LINK} newTab>GitHub</Link>.
           </p>
         </div>
         {this.state.error ? (

src/components/layout/SectionHeading.tsx

@@ -1,5 +1,5 @@
 import { Icon, Icons } from "components/Icon";
-import { Link } from "components/Text/Link";
+import { ArrowLink } from "components/Text/ArrowLink";
 import { ReactNode } from "react";
 
 interface SectionHeadingProps {
@@ -23,7 +23,7 @@ export function SectionHeading(props: SectionHeadingProps) {
           {props.title}
         </p>
         {props.linkText ? (
-          <Link
+          <ArrowLink
             linkText={props.linkText}
             direction="left"
             onClick={props.onClick}

src/mw_constants.ts

@@ -1,2 +1,3 @@
-export const CORS_PROXY_URL =
-  "https://proxy-1.movie-web.workers.dev/?destination=";
+export const CORS_PROXY_URL = "https://proxy-1.movie-web.workers.dev/?destination=";
+export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb";
+export const GITHUB_LINK = "https://github.com/JamesHawkinss/movie-web";

src/views/MovieView.tsx

@@ -10,6 +10,7 @@ export function MovieView() {
   const store = useWatchedContext();
 
   useEffect(() => {
+    throw new Error("Hi");
     (async () => {
       setStreamUrl(mediaPortable && (await getStream(mediaPortable)));
     })();