From f9c07267b2f36b2534bb8eccc9529dc0bee9e7e5 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Mon, 6 Nov 2023 21:40:10 +1100
Subject: [PATCH] fix thread

---
 client/src/components/Thread/Thread.tsx | 67 +++++++++++++------------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Thread/Thread.tsx b/client/src/components/Thread/Thread.tsx
index ab0719c..21f83a7 100644
--- a/client/src/components/Thread/Thread.tsx
+++ b/client/src/components/Thread/Thread.tsx
@@ -23,7 +23,8 @@ const Thread = () => {
     const [postType, setPostType] = useState("");
     const [hasRun, setHasRun] = useState(false);
     const [preOPEvents, setPreOPEvents] = useState(['']);
-    const [sortByPoW, setSortByPoW] = useState(false);
+    const [sortByTime, setSortByTime] = useState(true);
+    const [filterDifficulty, setFilterDifficulty] = useState(localStorage.getItem("filterDifficulty") || "20");
 
     // Define your callback function for subGlobalFeed
     const onEvent = (event: Event, relay: string) => {
@@ -79,16 +80,20 @@ const Thread = () => {
         )
         .sort((a, b) => (b.created_at as any) - (a.created_at as any));
 
-        const toggleSort = () => {
-            setSortByPoW(prev => !prev);
-          };
+    const toggleSort = () => {
+        setSortByTime(prev => !prev);
+    };
 
-          const eventsSortedByTime = [...uniqEvents].slice(1).sort((a, b) => a.created_at - b.created_at);
+    const eventsSortedByTime = [...uniqEvents].slice(1).filter(event => event.kind === 1).sort((a, b) => a.created_at - b.created_at);
 
-          // Events sorted by PoW (assuming `getPow` returns a numerical representation of the PoW)
-          const eventsSortedByPow = [...uniqEvents].slice(1).sort((a, b) => getPow(b.id) - getPow(a.id));
-        
-          const displayedEvents = sortByPoW ? eventsSortedByPow : eventsSortedByTime;
+    // Events sorted by PoW (assuming `getPow` returns a numerical representation of the PoW)
+    const eventsSortedByPow = [...uniqEvents].slice(1)
+    .filter((event) =>
+        getPow(event.id) > Number(filterDifficulty) &&
+        event.kind === 1
+    ).sort((a, b) => getPow(b.id) - getPow(a.id));
+
+    const displayedEvents = sortByTime ? eventsSortedByTime : eventsSortedByPow;
 
     if (!uniqEvents[0]) {
         return (
@@ -145,31 +150,31 @@ const Thread = () => {
                     <ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
                 </div>
                 <div className="flex items-center justify-center w-full py-4">
-                        <label htmlFor="toggleB" className="flex items-center cursor-pointer">
-                            <div className="relative">
-                                <input
-                                    id="toggleB"
-                                    type="checkbox"
-                                    className="sr-only"
-                                    checked={sortByPoW}
-                                    onChange={toggleSort}
-                                />
-                                <div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
-                                <div
-                                    className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${sortByPoW ? 'transform translate-x-full bg-blue-400' : ''
-                                        }`}
-                                ></div>
-                            </div>
-                            <div className={`ml-3 text-neutral-500 font-medium ${sortByPoW ? 'text-neutral-500' : ''}`}>
-                                {sortByPoW ? 'Sort by PoW' : 'Sort by age'}
-                            </div>
-                        </label>
-                    </div>
+                    <label htmlFor="toggleB" className="flex items-center cursor-pointer">
+                        <div className="relative">
+                            <input
+                                id="toggleB"
+                                type="checkbox"
+                                className="sr-only"
+                                checked={sortByTime}
+                                onChange={toggleSort}
+                            />
+                            <div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
+                            <div
+                                className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''
+                                    }`}
+                            ></div>
+                        </div>
+                        <div className={`ml-3 text-neutral-500 font-medium ${sortByTime ? 'text-neutral-500' : ''}`}>
+                            {sortByTime ? 'Sort by oldest' : 'Sort by PoW'}
+                        </div>
+                    </label>
+                </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
                     <div className="col-span-full h-0.5 bg-neutral-900"></div>  {/* This is the white line separator */}
                     {displayedEvents.map((event, index) => (
-                            <ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
-                        ))}
+                        <ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
+                    ))}
                 </div>
             </main>
         </>