Merge pull request #343 from celestiaorg/hotfix/white-screen-on-back-…

…navigation-from-wic fixed back navigation error from what is celestia page
celestiaorg · Jan 4, 2024 · 1558f1e · 1558f1e
2 parents 45dc6e1 + b949269
commit 1558f1e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 26 deletions.
diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
@@ -2,32 +2,43 @@ import * as React from "react";
 import Image from "../imageComponent";
 import { Link } from "gatsby";
 
-export default class TwoColumnH2 extends React.Component {
-	render() {
-		return (
-			<section className={`two-column-h2 ${this.props.direction}`}>
-				<div className={"row align-items-center"}>
-					<div className={`col col-12 col-lg-6 ${this.props.direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-						<Image alt={this.props.title} filename={this.props.image} />
-					</div>
-					<div className={`d-table-cell align-middle col col-12 col-lg-6 ${this.props.direction === "rtl" ? "order-lg-1" : "order-lg-2"}`}>
-						<div className={"text"}>
-							<h2 className={"with-decor mt-4 mt-lg-0"}>{this.props.title}</h2>
-							<div className='paragraph' dangerouslySetInnerHTML={{ __html: this.props.text }} />
-							<div className={"flex mt-4"}>
-								<Link to={this.props.buttonPrimaryUrl} target={"_blank"} className={`button button-simple me-4 ${this.props.buttonPrimaryClass}`}>
-									{this.props.buttonPrimaryTitle}
+const TwoColumnH2 = ({
+	direction,
+	title,
+	image,
+	text,
+	buttonPrimaryUrl,
+	buttonPrimaryClass,
+	buttonPrimaryTitle,
+	buttonSecondaryUrl,
+	buttonSecondaryClass,
+	buttonSecondaryTitle,
+}) => {
+	return (
+		<section className={`two-column-h2 ${direction}`}>
+			<div className={"row align-items-center"}>
+				<div className={`col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+					<Image alt={title} filename={image} />
+				</div>
+				<div className={`d-table-cell align-middle col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-1" : "order-lg-2"}`}>
+					<div className={"text"}>
+						<h2 className={"with-decor mt-4 mt-lg-0"}>{title}</h2>
+						<div className='paragraph' dangerouslySetInnerHTML={{ __html: text }} />
+						<div className={"flex mt-4"}>
+							<Link to={buttonPrimaryUrl} className={`button button-simple me-4 ${buttonPrimaryClass}`}>
+								{buttonPrimaryTitle}
+							</Link>
+							{buttonSecondaryTitle && (
+								<Link to={buttonSecondaryUrl} className={`button button-white ${buttonSecondaryClass}`}>
+									{buttonSecondaryTitle}
 								</Link>
-								{this.props.buttonSecondaryTitle && (
-									<Link to={this.props.buttonSecondaryUrl} target={"_blank"} className={`button button-white ${this.props.buttonSecondaryClass}`}>
-										{this.props.buttonSecondaryTitle}
-									</Link>
-								)}
-							</div>
+							)}
 						</div>
 					</div>
 				</div>
-			</section>
-		);
-	}
-}
+			</div>
+		</section>
+	);
+};
+
+export default TwoColumnH2;
diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js
@@ -42,7 +42,11 @@ const WhatIsCelestia = () => {
 
 		return () => {
 			if (currentRefs) {
-				currentRefs.forEach((ref) => observer.unobserve(ref));
+				currentRefs.forEach((ref) => {
+					if (ref instanceof Element) {
+						observer.unobserve(ref);
+					}
+				});
 			}
 		};
 	}, []);