From c61a46a95327d4145641418723a923805ec07055 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Thu, 5 Sep 2024 13:40:30 +1000
Subject: [PATCH] add hashtags bar to feeds

---
 client/src/components/modals/HashtagBar.tsx  | 16 +++++++++++
 client/src/components/modals/MediaRender.tsx | 28 ++++++++++----------
 client/src/components/routes/HashtagPage.tsx |  2 ++
 client/src/components/routes/Home.tsx        |  2 ++
 client/src/components/routes/Thread.tsx      |  2 +-
 5 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/modals/HashtagBar.tsx

diff --git a/client/src/components/modals/HashtagBar.tsx b/client/src/components/modals/HashtagBar.tsx
new file mode 100644
index 0000000..4bba51b
--- /dev/null
+++ b/client/src/components/modals/HashtagBar.tsx
@@ -0,0 +1,16 @@
+const DefaultHashtags = ['asknostr', 'kinostr', 'technology'];
+
+export default function HashtagBar() {
+
+    return (
+        <div className="flex justify-between items-center">
+            <ul className='py-1 flex space-x-4 text-xs text-neutral-400 m-auto'>
+                {DefaultHashtags.map((hashtag, index) => (
+                    <li key={index}>
+                        <a href={`/hashtag/${hashtag}`} className='hover:underline'>#{hashtag}</a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
diff --git a/client/src/components/modals/MediaRender.tsx b/client/src/components/modals/MediaRender.tsx
index 66e7d54..670f821 100644
--- a/client/src/components/modals/MediaRender.tsx
+++ b/client/src/components/modals/MediaRender.tsx
@@ -22,20 +22,20 @@ const checkMedia = async (url: string) => {
     });
     const nsfwResult = await nsfwResponse.json();
 
-    // PicPurify gore check
-    const picpurifyResponse = await fetch('https://www.picpurify.com/analyse/1.1', {
-      method: 'POST',
-      body: new URLSearchParams({
-        'API_KEY': picpurifyApiKey,
-        'task': 'gore_moderation',
-        'url_image': url
-      })
-    });
-    const picpurifyResult = await picpurifyResponse.json();
+    // // PicPurify gore check
+    // const picpurifyResponse = await fetch('https://www.picpurify.com/analyse/1.1', {
+    //   method: 'POST',
+    //   body: new URLSearchParams({
+    //     'API_KEY': picpurifyApiKey,
+    //     'task': 'gore_moderation',
+    //     'url_image': url
+    //   })
+    // });
+    // const picpurifyResult = await picpurifyResponse.json();
 
     return {
       nsfw: nsfwResult,
-      gore: picpurifyResult
+      // gore: picpurifyResult
     };
   } catch (error) {
     console.error("Error checking media:", error);
@@ -63,7 +63,7 @@ const RenderMedia = ({ files }: { files: string[] }) => {
             ...prev,
             [file]: {
               nsfwLabel: result.nsfw?.data?.predictedLabel,
-              goreContent: result.gore?.gore_moderation?.gore_content
+              // goreContent: result.gore?.gore_moderation?.gore_content
             }
           }));
         } else {
@@ -85,7 +85,7 @@ const RenderMedia = ({ files }: { files: string[] }) => {
         const mediaCheckResult = mediaCheckResults[file];
         
         // Check for both NSFW and gore content
-        if (mediaCheckResult && (mediaCheckResult.nsfwLabel !== 'neutral' || mediaCheckResult.goreContent)) {
+        if (mediaCheckResult && (mediaCheckResult.nsfwLabel !== 'neutral')) {
           return (
             <div>
               <p className="text-center text-red-500 text-xs">Attached media has been flagged as not safe for work or contains gore.</p>
@@ -93,7 +93,7 @@ const RenderMedia = ({ files }: { files: string[] }) => {
           );
         }
 
-        if (file && (file.endsWith(".mp4") || file.endsWith(".webm")) && mediaCheckResult && mediaCheckResult.nsfwLabel === 'neutral') {
+        if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
           return (
             <video
               key={index}
diff --git a/client/src/components/routes/HashtagPage.tsx b/client/src/components/routes/HashtagPage.tsx
index 2cd12b8..50e8121 100644
--- a/client/src/components/routes/HashtagPage.tsx
+++ b/client/src/components/routes/HashtagPage.tsx
@@ -2,6 +2,7 @@ import PostCard from "../modals/PostCard";
 import NewNoteCard from "../forms/PostFormCard";
 import { useParams } from "react-router-dom";
 import useProcessedEvents from "../../hooks/processedEvents";
+import HashtagBar from "../modals/HashtagBar";
 
 const DEFAULT_DIFFICULTY = 0;
 
@@ -15,6 +16,7 @@ const HashtagPage = () => {
     <main className="text-white mb-20">
       <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
         <NewNoteCard hashtag={id as string} />
+        <HashtagBar />
       </div>
       <div className="grid grid-cols-1 max-w-xl mx-auto gap-1 px-4">
         {processedEvents.map((event) =>
diff --git a/client/src/components/routes/Home.tsx b/client/src/components/routes/Home.tsx
index b9dbef1..5dea3b9 100644
--- a/client/src/components/routes/Home.tsx
+++ b/client/src/components/routes/Home.tsx
@@ -3,6 +3,7 @@ import { DEFAULT_DIFFICULTY } from "../../config";
 import PostCard from "../modals/PostCard";
 import { useState, useEffect, useMemo } from "react";
 import useProcessedEvents from "../../hooks/processedEvents";
+import HashtagBar from "../modals/HashtagBar";
 
 const Home = () => {
   const filterDifficulty = useMemo(() => {
@@ -25,6 +26,7 @@ const Home = () => {
     <main className="text-white mb-20">
       <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
         <NewNoteCard />
+        <HashtagBar />
       </div>
       <div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
         {processedEvents.map((event) => (
diff --git a/client/src/components/routes/Thread.tsx b/client/src/components/routes/Thread.tsx
index 3c35002..df6725c 100644
--- a/client/src/components/routes/Thread.tsx
+++ b/client/src/components/routes/Thread.tsx
@@ -56,7 +56,7 @@ const Thread = () => {
     return (
         <>
             <main className="bg-black text-white min-h-screen">
-                <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
+                <div className="w-full sm:px-0 sm:max-w-xl mx-auto my-2">
                     {earlierEvents
                         .filter(event => event.kind === 1)
                         .sort((a, b) => a.created_at - b.created_at).map((event, index) => (