From 48fb37a90ddebec809956aaa28b1dc9566f8b6ae Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Apr 2022 18:06:30 -0500
Subject: [PATCH] Layout: convert to tsx, use react-stickynode again

---
 .../ui/layout/{layout.js => layout.tsx}       | 41 ++++++-------------
 package.json                                  |  1 +
 yarn.lock                                     |  7 ++++
 3 files changed, 21 insertions(+), 28 deletions(-)
 rename app/soapbox/components/ui/layout/{layout.js => layout.tsx} (51%)

diff --git a/app/soapbox/components/ui/layout/layout.js b/app/soapbox/components/ui/layout/layout.tsx
similarity index 51%
rename from app/soapbox/components/ui/layout/layout.js
rename to app/soapbox/components/ui/layout/layout.tsx
index 976ef25cb..4ee50564a 100644
--- a/app/soapbox/components/ui/layout/layout.js
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
+import Sticky from 'react-stickynode';
 
-const Layout = ({ children }) => (
+const Layout: React.FC = ({ children }) => (
   <div className='sm:py-4 relative pb-36'>
     <div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8 md:grid md:grid-cols-12 md:gap-8'>
       {children}
@@ -11,52 +11,37 @@ const Layout = ({ children }) => (
 );
 
 
-const Sidebar = ({ children }) => (
+const Sidebar: React.FC = ({ children }) => (
   <div className='hidden lg:block lg:col-span-3'>
-    <div className='sticky top-20'>
+    <Sticky top={80} innerClass='pb-4'>
       {children}
-    </div>
+    </Sticky>
   </div>
 );
 
-const Main = ({ children, className }) => (
+const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
   <main
     className={classNames({
       'md:col-span-12 lg:col-span-9 xl:col-span-6 sm:space-y-4': true,
-      [className]: typeof className !== 'undefined',
-    })}
+    }, className)}
   >
     {children}
   </main>
 );
 
-const Aside = ({ children }) => (
+const Aside: React.FC = ({ children }) => (
   <aside className='hidden xl:block xl:col-span-3'>
-    <div className='sticky top-20 space-y-6'>
+    <Sticky top={80} innerClass='space-y-6 pb-4'>
       {children}
-    </div>
+    </Sticky>
   </aside>
 );
 
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-Sidebar.propTypes = {
-  children: PropTypes.node,
-};
-
-Main.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-Aside.propTypes = {
-  children: PropTypes.node,
-};
-
+// @ts-ignore
 Layout.Sidebar = Sidebar;
+// @ts-ignore
 Layout.Main = Main;
+// @ts-ignore
 Layout.Aside = Aside;
 
 export default Layout;
diff --git a/package.json b/package.json
index 517ff0761..e01161954 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-motion": "^0.0.32",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-stickynode": "^4.0.0",
     "@types/react-toggle": "^4.0.3",
     "@types/redux-mock-store": "^1.0.3",
     "@types/semver": "^7.3.9",
diff --git a/yarn.lock b/yarn.lock
index ca2fc244d..1881d59f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2219,6 +2219,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-stickynode@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-stickynode/-/react-stickynode-4.0.0.tgz#54ba7ceab9bd563bccdcae72c7486a626e870ecb"
+  integrity sha512-PKkmOzF6WCNuyIKrvhidGeUPLfe8htPwfEljKnQBF4bA5v74ADvXtwkjavOH8i6aCSw9J14AyDDl1Ul0VNQJUg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-toggle@^4.0.3":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da"