namefag filter

client/.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 package-lock.json
+yarn.lock
 
 # dependencies
 /node_modules

client/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Building the React application
-FROM node:18-alpine AS build
+FROM node:20-alpine AS build
 WORKDIR /app
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 RUN \

client/src/components/Home.tsx

@@ -19,35 +19,45 @@ const useUniqEvents = () => {
     return unsubscribe;
   }, []);
 
-  return uniqBy(events, "id");
+  const uniqEvents = uniqBy(events, "id");
+
+  const noteEvents = uniqEvents.filter(event => event.kind === 1);
+  const metadataEvents = uniqEvents.filter(event => event.kind === 0);
+
+  return { noteEvents, metadataEvents };
 };
 
 const Home = () => {
   const filterDifficulty = localStorage.getItem("filterDifficulty") || DEFAULT_DIFFICULTY;
   const [sortByTime, setSortByTime] = useState(true);
-  const uniqEvents = useUniqEvents();
+  const [setAnon, setSetAnon] = useState(true);
+  const { noteEvents, metadataEvents } = useUniqEvents();
 
-  const postEvents = uniqEvents
+  const postEvents = noteEvents
     .filter((event) =>
       verifyPow(event) >= Number(filterDifficulty) &&
       event.kind !== 0 &&
       (event.kind !== 1 || !event.tags.some((tag) => tag[0] === "e"))
     )
 
-  const sortedEvents = [...postEvents].sort((a, b) =>
+  const sortedEvents = [...postEvents]
+  .sort((a, b) =>
     sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a)
+  )
+  .filter(
+    !setAnon ? (e) => !metadataEvents.some((metadataEvent) => metadataEvent.pubkey === e.pubkey) : () => true
   );
 
   const toggleSort = useCallback(() => {
     setSortByTime(prev => !prev);
   }, []);
 
-  const getMetadataEvent = (event: Event) => {
+  const toggleAnon = useCallback(() => {
-    return uniqEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null;
+    setSetAnon(prev => !prev);
-  };
+  }, []);
 
   const countReplies = (event: Event) => {
-    return uniqEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
+    return noteEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
   };
 
   // Render the component
@@ -57,10 +67,10 @@ const Home = () => {
         <NewNoteCard />
       </div>
       <div className="flex w-full px-8 z-2">
-        <label htmlFor="toggleB" className="flex items-center cursor-pointer">
+        <label htmlFor="toggleA" className="flex items-center cursor-pointer">
           <div className="relative">
             <input
-              id="toggleB"
+              id="toggleA"
               type="checkbox"
               className="sr-only"
               checked={sortByTime}
@@ -73,13 +83,29 @@ const Home = () => {
             {sortByTime ? 'Time' : 'PoW'}
           </div>
         </label>
+        <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
+          <div className="relative">
+            <input
+              id="toggleB"
+              type="checkbox"
+              className="sr-only"
+              checked={setAnon}
+              onChange={toggleAnon}
+            />
+            <div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
+            <div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${setAnon ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
+          </div>
+          <div className={`ml-2 text-neutral-500 text-sm ${setAnon ? 'text-neutral-500' : ''}`}>
+            {setAnon ? 'Namefags' : 'Anon'}
+          </div>
+        </label>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
         {sortedEvents.map((event) => (
           event.kind === 1 ?
             <PostCard
               event={event}
-              metadata={getMetadataEvent(event)}
+              metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
               replyCount={countReplies(event)}
             />
             :