From f3873bb48c9606b34e6883811642dc99be9ad06a Mon Sep 17 00:00:00 2001
From: Lalle <29478339+LalleSX@users.noreply.github.com>
Date: Tue, 21 Mar 2023 00:07:33 +0100
Subject: [PATCH] Made it a little better

---
 README.md                  | 11 +++++++++++
 src/{ => Site}/Catalog.css |  5 ++++-
 src/{ => Site}/Catalog.tsx | 20 ++++++++++++--------
 src/Site/Header.tsx        | 15 +++++++++++++++
 src/main.tsx               | 37 ++++++++++++++++++++++++++++---------
 5 files changed, 70 insertions(+), 18 deletions(-)
 create mode 100644 README.md
 rename src/{ => Site}/Catalog.css (89%)
 rename src/{ => Site}/Catalog.tsx (83%)
 create mode 100644 src/Site/Header.tsx

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f345373
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+# 4chads
+
+4chads is a browser addon / user script that seeks to make the experience browsing 4chan better, even though that is a hard mission.
+
+Features to come
+
+- [] JSON Index/Catalog view, supporting new sorting metods etc.
+- [] Image hovering
+- [] Thread monitoring 
+- [] Coustom board titleing
+- [] Filtering
\ No newline at end of file
diff --git a/src/Catalog.css b/src/Site/Catalog.css
similarity index 89%
rename from src/Catalog.css
rename to src/Site/Catalog.css
index 88753ef..70b298e 100644
--- a/src/Catalog.css
+++ b/src/Site/Catalog.css
@@ -7,7 +7,6 @@
     vertical-align: top;
     position: relative;
     margin: 2px;
-    left: calc(67px - .3px * var(width));
   }
   .teaser p {
     font-size: 13px;
@@ -18,4 +17,8 @@
     border-radius: 2px;
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
     vertical-align: top;
+  }
+
+  .Top {
+    top: 0;
   }
\ No newline at end of file
diff --git a/src/Catalog.tsx b/src/Site/Catalog.tsx
similarity index 83%
rename from src/Catalog.tsx
rename to src/Site/Catalog.tsx
index 50ce95d..7acc915 100644
--- a/src/Catalog.tsx
+++ b/src/Site/Catalog.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import './Catalog.css';
+// Api types from the 4chan api docs
 interface Thread {
   no: number;
   replies: number;
@@ -21,13 +22,13 @@ interface Page {
 interface CatalogProps {
   boardID: string;
 }
-
+// Fetches the catalog data from the 4chan api
 const fetchCatalog = async (boardID: string): Promise<Page[]> => {
   const response = await fetch(`https://a.4cdn.org/${boardID}/catalog.json`);
   const data = await response.json();
   return data;
 };
-
+// Creates the json index for the catalog.
 const createThreadElement = (thread: Thread, boardID: string) => {
   const { no, replies, images, com, sub, tim, ext, tn_h, tn_w } = thread;
   const threadURL = `https://boards.4channel.org/${boardID}/thread/${no}`;
@@ -43,21 +44,24 @@ const createThreadElement = (thread: Thread, boardID: string) => {
         <b>I: {images} </b>
       </div>
       <div className="teaser">
-        <b dangerouslySetInnerHTML={{ __html: sub }} />
+        <b dangerouslySetInnerHTML={{ __html: sub ? sub + ':' : ''}} />
+        {sub && sub.length > 0 ? <br /> : null}
         <span dangerouslySetInnerHTML={{ __html: com }} />        
       </div>
     </div>
   );
 };
-
+// Renders the catalog
 const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
   const [catalog, setCatalog] = useState<Page[]>([]);
-
   useEffect(() => {
-    (async () => {
+    
+    const fetchCatalogData = async () => {
       const catalogData = await fetchCatalog(boardID);
       setCatalog(catalogData);
-    })();
+    };
+    
+    fetchCatalogData();
   }, [boardID]);
 
   return (
@@ -69,4 +73,4 @@ const Catalog: React.FC<CatalogProps> = ({ boardID }) => {
   );
 };
 
-export default Catalog;
+export default Catalog;
\ No newline at end of file
diff --git a/src/Site/Header.tsx b/src/Site/Header.tsx
new file mode 100644
index 0000000..d709b40
--- /dev/null
+++ b/src/Site/Header.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface TopBarProps {
+  text: string;
+}
+
+const TopBar: React.FC<TopBarProps> = ({ text }) => {
+  return (
+    <div className='Top' style={{ height: '1px', backgroundColor: 'black' }}>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+export default TopBar;
diff --git a/src/main.tsx b/src/main.tsx
index 6c75c94..40b73b2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Catalog from './Catalog';
 import './index.css';
+import { render } from 'react-dom';
 
-document.onchange = () => {
-  const target = document.querySelector('#threads');
-  let currentUrl = window.location.href;
-  let BoardID = currentUrl.split('/')[3];
-  if (target) {
-    ReactDOM.createRoot(target).render(<Catalog boardID={BoardID} />);
-  }
-};
\ No newline at end of file
+// Importing components
+import Catalog from './Site/Catalog';
+import Header from './Site/Header';
+
+const root = document.createElement('div');
+root.id = '4chuds';
+document.body.appendChild(root);
+
+let currentUrl = window.location.href;
+let BoardID = currentUrl.split('/')[3];
+
+//if (currentUrl == 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
+  render(
+    <div>
+      <Header text='Hello, World!' />
+      <Catalog boardID={BoardID}/>
+    </div>,
+    document.querySelector('#threads')
+  );
+//}
+
+if (currentUrl === 'https://boards.4channel.org' || 'https://boards.4channel.org/') {
+  render(<Catalog boardID={BoardID} />, document.getElementById('id'));
+}
+
+
+//render(<Header text='Hello, World!' />, document.createElement('div'));
\ No newline at end of file