From 37984969856f5f3490c5d18cfe9301fda05642ac Mon Sep 17 00:00:00 2001
From: mrjvs
Date: Fri, 25 Feb 2022 21:20:35 +0100
Subject: [PATCH] Linking to github and discord on error boundary
Co-authored-by: William Oldham
---
.vscode/settings.json | 3 +-
README.md | 2 +-
src/components/Text/ArrowLink.tsx | 53 ++++++++++++++++++++++++
src/components/Text/Link.tsx | 25 ++++-------
src/components/layout/ErrorBoundary.tsx | 4 +-
src/components/layout/SectionHeading.tsx | 4 +-
src/mw_constants.ts | 5 ++-
src/views/MovieView.tsx | 1 +
8 files changed, 72 insertions(+), 25 deletions(-)
create mode 100644 src/components/Text/ArrowLink.tsx
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8e700e4d..bd0524b6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
{
"files.eol": "\n",
"editor.detectIndentation": false,
- "editor.formatOnSave": true
+ "editor.formatOnSave": false,
+ "editor.tabSize": 2
}
\ No newline at end of file
diff --git a/README.md b/README.md
index 65538911..ecb21127 100644
--- a/README.md
+++ b/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
diff --git a/src/components/Text/ArrowLink.tsx b/src/components/Text/ArrowLink.tsx
new file mode 100644
index 00000000..f663d966
--- /dev/null
+++ b/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 = (
+
+ {direction === "left" ? (
+
+
+
+ ) : null}
+ {props.linkText}
+ {direction === "right" ? (
+
+
+
+ ) : null}
+
+ );
+
+ if (isExternal)
+ return {content};
+ else if (isInternal)
+ return (
+ {content}
+ );
+ return (
+ props.onClick && props.onClick()}>{content}
+ );
+}
diff --git a/src/components/Text/Link.tsx b/src/components/Text/Link.tsx
index 829e8511..a16e5605 100644
--- a/src/components/Text/Link.tsx
+++ b/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 = (
-
- {direction === "left" ? (
-
-
-
- ) : null}
- {props.linkText}
- {direction === "right" ? (
-
-
-
- ) : null}
+
+ {props.children}
);
if (isExternal)
- return {content};
+ return {content};
else if (isInternal)
return (
{content}
diff --git a/src/components/layout/ErrorBoundary.tsx b/src/components/layout/ErrorBoundary.tsx
index c79205bb..504b8b7a 100644
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/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> {
Whoops, it broke
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 Discord server or on GitHub.
{this.state.error ? (
diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx
index 39f6006f..73aa9b3d 100644
--- a/src/components/layout/SectionHeading.tsx
+++ b/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}