karliky / turrero

turrero.vercel.app
The Unlicense
10 stars 0 forks source link

react-hydration-error when rendering most views turras #6

Open ajramos opened 4 months ago

ajramos commented 4 months ago

It looks like there is a mismatch between the server-side rendering of the most viewed threads on the index page, when rendering the title associated to the time label column, see the code below.

{top25.map((tweet) => {
                if (tweet){
                  const timeAgo = Tweets.find(_tweet => _tweet[0].id === tweet.id);
                  const hasAudio = TweetsPodcasts.find(_tweet => _tweet.id === tweet.id);
                  return <div className={styles.link} key={tweet.id + "id-top"}>
                    <div>
                      <div className={styles.time} title={`Publicado el ${new Date(timeAgo[0].time).toLocaleDateString("es-ES")} / ${new Date(timeAgo[0].time).toLocaleTimeString("es-ES")}`}>{timeSince(new Date(timeAgo[0].time).getTime())}</div>
                    </div>
                    <div className={styles.flex}>
                      {hasAudio && 
                      <a href={"/turra/" + tweet.id + (hasAudio ? "#podcast" : "")}>
                        <img className={`${styles['icon-audio']}`} src="/volume-2.svg" alt="Esta turra está disponible en formato podcast" title="Esta turra está disponible en formato podcast" />
                      </a>}
                      {!hasAudio && <img className={`${styles['icon-audio']} ${styles['novisibility']}`} src="/volume-2.svg" /> } 
                      <a href={"/turra/" + tweet.id} className={styles.flex}>{tweet.summary}</a>
                    </div>
                  </div>
                }
              }
              )}