From 652fbd2020bb803ee2718d7889936aacc6c72d44 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Tue, 28 Mar 2023 11:23:27 +0200
Subject: [PATCH] revert element key bug

---
 .env                             |  3 +--
 package.json                     |  3 ++-
 src/components/views/Board.jsx   | 16 ++++++++--------
 src/components/views/Catalog.jsx |  4 ++--
 src/components/views/Thread.jsx  |  8 ++++----
 yarn.lock                        | 28 ++++++++++++++++++++++++++--
 6 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/.env b/.env
index 9d100416..b39d8ffd 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,3 @@
 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT=1
 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_LOADING_TIME=1000
-REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_DOUBLE_MEDIA=1
-REACT_APP_PLEBBIT_REACT_HOOKS_NO_CACHE=1
\ No newline at end of file
+REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_DOUBLE_MEDIA=1
\ No newline at end of file
diff --git a/package.json b/package.json
index 32ce88c6..509759fe 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,13 @@
     "@babel/core": "^7.21.3",
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.21.0",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#b6cc8e82aea5dd1d458d659218eb0ce8d9f81202",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^18.15.5",
+    "@types/react": "^18.0.30",
     "babel-plugin-styled-components": "^2.0.7",
     "dompurify": "^3.0.1",
     "eslint": "^8.36.0",
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index d83d4f50..dd1d049e 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -378,13 +378,13 @@ const Board = () => {
               loadMore={tryLoadMore}
               hasMore={hasMore}
             >
-              {feed.map((thread, index) => {
+              {feed.map((thread) => {
               const { replies: { pages: { topAll: { comments } } } } = thread;
               const { renderedComments, omittedCount } = renderComments(comments);
               const commentMediaInfo = getCommentMediaInfo(thread);
               const fallbackImgUrl = "/assets/filedeleted-res.gif";
               return (
-              <Fragment key={`${index}-${thread.cid}`}>
+              <Fragment key={`fr-${thread.cid}`}>
                 <div key={`t-${thread.cid}`} className="thread">
                   <div key={`c-${thread.cid}`} className="op-container">
                     <div key={`po-${thread.cid}`} className="post op">
@@ -482,8 +482,8 @@ const Board = () => {
                           <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
                             {thread.replies?.pages.topAll.comments
                               .sort((a, b) => a.timestamp - b.timestamp)
-                              .map((reply, index) => (
-                                <div key={`${index}-${reply.cid}`} style={{display: 'inline-block'}}>
+                              .map((reply) => (
+                                <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
                                 <Link key={`ql-${reply.cid}`}
                                 to={handleVoidClick} className="quote-link" 
                                 onClick={(event) => handleQuoteClick(reply, event)}>
@@ -523,9 +523,9 @@ const Board = () => {
                       </span>
                     </span>) : null}
                   </span>
-                  {renderedComments.map((reply, index) => {
+                  {renderedComments.map((reply) => {
                     return (
-                      <div key={`${index}-${reply.cid}`} className="reply-container">
+                      <div key={`rc-${reply.cid}`} className="reply-container">
                         <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
                         <div key={`pr-${reply.cid}`} className="post-reply">
                           <div key={`pi-${reply.cid}`} className="post-info">
@@ -726,9 +726,9 @@ const Board = () => {
                       <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
                     </div>
                   </div>
-                  {renderedComments.map((reply, index) => {
+                  {renderedComments.map((reply) => {
                     return (
-                    <div key={`${index}-${reply.cid}`} className="reply-container">
+                    <div key={`mob-rc-${reply.cid}`} className="reply-container">
                       <div key={`mob-pr-${reply.cid}`} className="post-reply">
                         <div key={`mob-pi-${reply.cid}`} className="post-info-mobile">
                           <button key={`pmbm-${reply.cid}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 342e79b7..933f2739 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -338,11 +338,11 @@ const Catalog = () => {
             loadMore={tryLoadMore}
             hasMore={hasMore}
           >
-            {feed.map((thread, index) => {
+            {feed.map((thread) => {
               const commentMediaInfo = getCommentMediaInfo(thread);
               const fallbackImgUrl = "/assets/filedeleted-res.gif";
               return (
-                <Link style={{all: "unset", cursor: "pointer"}} key={`${index}-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
+                <Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
                   <div key={`thread-${thread.cid}`} className="thread">
                       {commentMediaInfo?.url ? (
                         <Fragment key="f-catalog">
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 38d10582..a9fd974b 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -491,8 +491,8 @@ const Thread = () => {
                       <div id="backlink-id" className="backlink">
                         {comment.replies?.pages.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
-                          .map((reply, index) => (
-                            <div key={`${index}-${reply.cid}`} style={{display: 'inline-block'}}>
+                          .map((reply) => (
+                            <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
                             <Link to={handleVoidClick} key={`ql-${reply.cid}`}
                               className="quote-link" 
                               onClick={(event) => handleQuoteClick(reply, event)}>
@@ -563,8 +563,8 @@ const Thread = () => {
                           <div id="backlink-id" className="backlink">
                             {reply.replies?.pages.topAll.comments
                               .sort((a, b) => a.timestamp - b.timestamp)
-                              .map((reply, index) => (
-                                <div key={`${index}-${reply.cid}`} style={{display: 'inline-block'}}>
+                              .map((reply) => (
+                                <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
                                 <Link to={handleVoidClick} key={`ql-${reply.cid}`}
                                   className="quote-link" 
                                   onClick={(event) => handleQuoteClick(reply, event)}>
diff --git a/yarn.lock b/yarn.lock
index eb6ea032..adb0678f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2468,9 +2468,24 @@
   dependencies:
     debug "4.3.3"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b6cc8e82aea5dd1d458d659218eb0ce8d9f81202":
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#ce2bec5b474ce70cc57b4cfe4438516f55fc355b":
   version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#b6cc8e82aea5dd1d458d659218eb0ce8d9f81202"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#ce2bec5b474ce70cc57b4cfe4438516f55fc355b"
+  dependencies:
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d"
+    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
+    assert "2.0.0"
+    ethers "5.6.9"
+    localforage "1.10.0"
+    lodash.isequal "4.5.0"
+    memoizee "0.4.15"
+    quick-lru "5.1.1"
+    uuid "8.3.2"
+    zustand "4.0.0"
+
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e":
+  version "0.0.1"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e"
   dependencies:
     "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d"
     "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
@@ -3126,6 +3141,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.30":
+  version "18.0.30"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.30.tgz#83944e679fc7aeab3f042b76d63c4d755b56b7c4"
+  integrity sha512-AnME2cHDH11Pxt/yYX6r0w448BfTwQOLEhQEjCdwB7QskEI7EKtxhGUsExTQe/MsY3D9D5rMtu62WRocw9A8FA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"