Update Pages data with SWR #434

ladytrekker · 2023-03-28T18:43:44Z

Description

This PR integrates SWR to the following pages

Single Project Page (initial data rendered from NextJS staticProps, update page data every 40 seconds)
Profile (initial data rendered from NextJS staticProps, fetch user data again after editing data on Frontend)
Portfolio (fetch user data on initial render on Frontend, fetch again after editing data on Frontend)

With this integration, the following caching "bugs" related to NextJS page rendering behaviour are FIXED:

update a listing / edit a profile / create a listing
Go to another page
Go back to Profile / Portfolio
=> the updated data is not there anymore (Page is rendered from NextJS cache)

Or

Make a Purchase
Go back to the Project Single Page
=> the purchased listing is still there
=> The activity data is not updated

All this should be fixed now ✅

Please test this PR heavily 🙏 Thanks!

Related Ticket

Closes https://github.com/Atmosfearful/bezos-frontend/issues/357

Changes

Another tiny change in this PR:

When a project can not be found
=> the page is not rendered no more! Instead the request fails with a 404

Before: https://www.carbonmark.com/projects/not-a-project
After: https://carbonmark-git-ladytrekker-swr-klimadao.vercel.app/projects/not-a-project

Before	After

Checklist

I have run npm run build-all without errors
I have formatted JS and TS files with npm run format-all

* List projects over full width * Center control buttons in Top Nav * Give LanguageButton same size on small screens

0xemc

It looks like logging out does not revert back to the unauthenticated Profile page

carbonmark/components/pages/Portfolio/index.tsx

carbonmark/components/pages/Project/index.tsx

0xemc · 2023-03-31T01:59:41Z

carbonmark/components/pages/Users/SellerConnected/index.tsx

+  // when carbonmark user data changed
+  useEffect(() => {
+    // store first data and return
+    if (!initialUser.current && carbonmarkUser) {
+      initialUser.current = carbonmarkUser;
+      return;
+    }

-      const fetchUser = () =>
-        getUser({
-          user: props.userAddress,
-          type: "wallet",
-        });
+    // when activity data differs => reset state and update initial user
+    if (
+      initialUser.current &&
+      carbonmarkUser &&
+      getActivityIsUpdated(initialUser.current, carbonmarkUser)
+    ) {
+      setInterval(0);
+      setIsUpdatingUser(false);
+      initialUser.current = carbonmarkUser;
+      fetchIntervalTimer.current && clearTimeout(fetchIntervalTimer.current);
+    }
+  }, [carbonmarkUser]);

-      // API is updated when new activity exists
-      const activityIsAdded = (value: User) => {
-        const newActivityLength = value.activities.length;
-        const currentActivityLength = user.activities.length;
-        return newActivityLength > currentActivityLength;
-      };
+  // on unmount
+  useEffect(() => {
+    return () => {
+      fetchIntervalTimer.current && clearTimeout(fetchIntervalTimer.current);
+    };
+  }, []);

-      const updatedUser = await pollUntil({
-        fn: fetchUser,
-        validate: activityIsAdded,
-        ms: 1000,
-        maxAttempts: 50,
-      });
+  const onUpdateUser = async () => {
+    // increase fetch interval
+    // the useEffect above will take care of updated carbonmark user data
+    setInterval(1000);
+    setIsUpdatingUser(true);

-      setUser((prev) => ({ ...prev, ...updatedUser }));
-    } catch (e) {
-      console.error("LOAD USER ACTIVITY error", e);
+    // Show error message after 50 seconds
+    fetchIntervalTimer.current = setTimeout(() => {
+      setInterval(0);
+      setIsUpdatingUser(false);
      setErrorMessage(
-        t`Please refresh the page. There was an error updating your data: ${e}.`
+        t`Please refresh the page. There was an error updating your data.`
      );
-    } finally {
-      setIsUpdatingUser(false);
-    }
+    }, 50000);


This could also be removed if we update useFetchUser with the timeout arg

0xemc · 2023-03-31T02:01:53Z

carbonmark/lib/getActivityIsUpdated.ts

+export const getActivityIsUpdated = (oldUser: User, newUser: User) => {
+  const formerActivityLength = oldUser?.activities?.length || 0;
+  const newActivityLength = newUser?.activities?.length || 0;
+  return newActivityLength > formerActivityLength;
+};


This probably isn't needed if you're no longer managing two user states

Thanks for the suggestion!

I was struggling here with SWR because what I want to achieve is this:

Under a certain condition => start fetching until the resource is updated with fresh data

I thought SWR would handle this for me:
Fetch again and again and validate if the data is updated

I can trigger one fetch, yes.
But what if the backend needs longer?
Sometimes even 50 seconds to be updated?

SWR did not tell me how to achieve this. There is this option "compare(a, b)" in the API docs but this did not work.

So what I went for is this:

When a user contract transaction was successful => increase the SWR fetch interval for the user backend endpoint

compare the former user data with the new incoming data (every XY second)

When the new user data contains new activities => backend is done! Decrease SWR fetch interval

If the SWR fetch interval takes too long (backend needs forever) => timeout! Decrease the interval and show an error message

SWR, what am I missing?
Any idea on this?

Ah ok I misunderstood your intention.

If I understand correctly, you'd like an increasing fetch interval with multiple errors until the response contains some condition? (number of activities > 0 for example) That makes sense.

SWR uses an exponential back-off algorithm on errors (see error-retry) so the behaviour you're looking for should come out of the box.

We can leverage this with something like:

export class NoUserActivitiesError extends Error { public user: User; constructor(user: User) { super("User has no activities"); this.name = "NoActivitiesError"; this.user = user; } } // Fetches a user from the Carbonmark API export const useFetchUser = (address?: string, options?: SWRConfiguration) => { const { data, ...rest } = useSWR<User, Error>( address ? `/api/users/${address}?type=wallet` : null, async (url) => { const user: User = await fetcher(url); if (user.activities.length === 0) { throw new NoUserActivitiesError(user); } return user; }, { ...options, errorRetryCount: 5, } ); const carbonmarkUser = !!data?.handle ? data : null; return { carbonmarkUser, ...rest }; };

You can now use the errorRetryCount to determine how many times swr will attempt to refetch within the default timeout time (the time set by the browser by default).

Does this achieve what you're after? It would be preferable to duplicating code and managing multiple states and timeouts etc (for those devs that need to work on this in future)

One thing to consider is also what if the user genuinely has no activities? I think this may be an issue with the API where by it should return nothing until it has resolved activities (rather than return an empty array)

Thanks, I will give this a try.

Just for completion:
Checking for simply > 0 is not enough.
The condition is met when the new user's activity length is higher than the former one.
So we will always need the former data for comparison.

Sorry so you have a pending fetch for increases to the number of activities? Is there a reason why invalidating the swr key (triggering a refetch) on any action would not achieve this sync that you're after? The query should also invalidate on tab switch etc so that should be covered.

carbonmark/hooks/useFetchUser.ts

ladytrekker · 2023-03-31T11:36:54Z

I think if you are on your profile page logged in (https://www.carbonmark.com/users/jabby) and I click the LOG OUT button, I should be redirected to https://www.carbonmark.com/users/login

(note: this is the behaviour on the Portfolio page)

@jabby09 @0xemc

This discussion is unrelated to this PR and just raised again here which is not the correct place

Please continue the discussion in this ticket here:
https://github.com/Atmosfearful/bezos-frontend/issues/458

* change project card * check project price before passing to formatBigToPrice fn * update project id

0xemc · 2023-04-04T02:36:04Z

It looks like logging out does not revert back to the unauthenticated Profile page

This is intended behavior because the profile page is for logged-in users only:

Profile Page not-logged-in => Login Screen and main menu highlights "Profile"

Profile Page logged-in => Carbonmark user data and main menu highlights "Profile"

Log-Out while on Profile => Show User page and main menu highlights "Marketplace"

See this discussion here too

Oh I see, so the issue is that looking at my own profile page looks very similar to looking at the user page for my account? And logging out while on my profile will take me to my user page (users/0xemc)?

I can see this causing some confusion with users @jabby09 perhaps logging out should take the user to /users/login what do you think?

Anyway @ladytrekker if that's what's intended then fair enough I'll close this once jabby replies

Atmosfearful

I have an idea that will be a bit more reuseable, and hopefully less complex as it won't need useEffect or refs.

I believe this can be done by awaiting an async function that contains all the retry logic.

Something like this?

const { mutate, data: oldUser } = useSWR("/api/user/ladytrekker");

const handleMutateUser = async () => {
  // start loading spinners
  setPending(true);

  // retry until...
  const newUser = await retryFetchUser(
    (newUser) => newUser.activities.length > oldUser.activities.length
  );

  setPending(false);
  // I'm passing in data here to simulate that we got a fresh record from API
  return newUser;
};

const onUpdateUser = async () => {
  // optional: we can create a synthetic activity and not show the loading spinners
  const optimisticData = { ...oldUser, activities: newActivities };

  mutate(handleMutateUser, {
    revalidate: false,
    populateCache: true,
    optimisticData, // optional
  });
};

I created a demo here that shows the persistent data, including mutating data on screens that haven't mounted yet: https://sxddxw-3000.csb.app/

full demo code https://codesandbox.io/p/sandbox/sweet-cookies-sxddxw?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A8%2C%22endLineNumber%22%3A94%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A94%7D%5D

Atmosfearful · 2023-03-30T17:20:56Z

carbonmark/hooks/useFetchProject.ts

+import { fetcher } from "lib/fetcher";
+import type { SWRConfiguration } from "swr";
+import useSWR from "swr";
+import { Project } from "../lib/types/carbonmark";


Suggested change

import { Project } from "../lib/types/carbonmark";

import { Project } from "lib/types/carbonmark";

Atmosfearful · 2023-03-30T17:22:20Z

carbonmark/hooks/useFetchUser.ts

+import { fetcher } from "lib/fetcher";
+import type { SWRConfiguration } from "swr";
+import useSWR from "swr";
+import { User } from "../lib/types/carbonmark";


Suggested change

import { User } from "../lib/types/carbonmark";

import { User } from "lib/types/carbonmark";

Atmosfearful · 2023-03-30T17:25:04Z

carbonmark/pages/users/[user].tsx

@@ -14,15 +14,16 @@ interface Params extends ParsedUrlQuery {
  user: string;
 }

-interface PageProps {
+export interface UserPageStaticProps {


is it a circular dependency when this is used to define the Page component, but Page component is imported here? Maybe best to export from the page component...

carbonmark/hooks/useFetchUser.ts

jabby09 · 2023-04-04T14:14:21Z

Oh I see, so the issue is that looking at my own profile page looks very similar to looking at the user page for my account? And logging out while on my profile will take me to my user page (users/0xemc)?

I can see this causing some confusion with users @jabby09 perhaps logging out should take the user to /users/login what do you think?

Anyway @ladytrekker if that's what's intended then fair enough I'll close this once jabby replies

@0xemc @ladytrekker yes I agree it is confusing, I raised this during dev but it was low priority and we had bigger UX issues to solve :)

I think if you are on your profile page logged in (https://www.carbonmark.com/users/jabby) and I click the LOG OUT button, I should be redirected to https://www.carbonmark.com/users/login

(note: this is the behaviour on the Portfolio page)

ShimonD-KlimaDAO · 2023-04-05T22:21:15Z

This flow doesn't seem to work well when editing a listing:

update a listing / edit a profile / create a listing
Go to another page
Go back to Profile / Portfolio
=> the updated data is not there anymore (Page is rendered from NextJS cache)

"edit 3" disappears when refreshing (one time), and also when switching pages and coming back to Profile.
Screencast from 04-05-2023 03:00:24 PM.webm

I haven't tested other flows yet. Per @Atmosfearful , the firebase env variable hasn't been swapped for staging to point to the mainnet one. I just want to mention this in case it's relevant to the problem, since I had to create a new profile.

Outstanding conversations

ladytrekker and others added 30 commits March 1, 2023 12:46

Extract getter for listings

b62f828

Fix compare address in lowercase

cbfe631

Close CreateListing Modal on submit

4ce296b

Move listingsGetter to higher folder

205e49f

Render basic listing of single project

e365cc7

Enable validation again for EditListing

bf1d06b

Fix: polling shoudl stop after xx attempts

3881d04

Revalidate user page faster

ed35631

Increase max attempts of polling updated user

2178689

Add Marketplace GET purchase

db9c221

Get purchase data from API instead of subgraph

27f2c1a

Delete subgraph query

d7edfd9

Minor cleanups

85d34d4

Update Listing: check for current asset balance

d8dc62e

Style basic list of projects

9c7efe7

Move Stats and Activities to shared

c482a2b

Start styling Single project page

cefded2

Render Buy button if connected

1423fa4

Better seller data on Single Project

70bb905

Show some stats for single project

8b0de8b

Fix back link on Single Project

f181ea3

Render Listing with created and updated Dates

e0d7bfa

Render Connect Button on Seller Page

7031041

Better back link text

dee9b23

Sorted listing by updatedAt on Project Single

5c79ef1

Extract getSortByUpdateListings

24a4177

Add updatedAt to Project type

1d1e007

Fix doubled key for fake projects

de86af4

Nav: Known issues fixes (#35)

5120dbf

* List projects over full width * Center control buttons in Top Nav * Give LanguageButton same size on small screens

Remove getInfuraUrlPolygon after rebase

51c05ed

vercel bot deployed to Preview March 29, 2023 10:53 View deployment

vercel bot deployed to Preview March 29, 2023 13:00 View deployment

This was referenced Apr 10, 2023

[performance] General caching issues KlimaDAO/klimadao#1019

Closed

[listing] Handling Next JS Cache issues when buying listings KlimaDAO/klimadao#1015

Closed

0xemc suggested changes Mar 31, 2023

View reviewed changes

0xemc reviewed Mar 31, 2023

View reviewed changes

carbonmark/components/pages/Portfolio/index.tsx Outdated Show resolved Hide resolved

0xemc reviewed Mar 31, 2023

View reviewed changes

0xMakka and others added 11 commits March 31, 2023 14:15

change project card (#444)

0fb9f7c

* change project card * check project price before passing to formatBigToPrice fn * update project id

fix: Primary Button Disabled Colour Alignment (#448)

ce0627d

Re-fetch data for Single Project

0a5ba25

Use SWR for Profile updates

363d057

Use SWR on Portfolio

33eebe9

Extract getActivityIsUpdated

3149ab3

Remove keepPreviousData from Portfolio

f8a79d5

Update strings

15a0473

Fix API paths

9dffd80

Fix loading state for Portfolio

1aaef8a

Change Success text on Portfolio

9cb777f

ladytrekker force-pushed the ladytrekker/swr branch from b91b184 to 9cb777f Compare April 3, 2023 13:40

vercel bot deployed to Preview April 3, 2023 13:42 View deployment

Atmosfearful suggested changes Apr 4, 2023

View reviewed changes

ladytrekker mentioned this pull request Apr 10, 2023

[profile] Log-Out behavior from user's profile KlimaDAO/klimadao#994

Closed

4 tasks

0xemc self-requested a review April 6, 2023 06:09

0xemc previously approved these changes Apr 6, 2023

View reviewed changes

Atmosfearful force-pushed the bezos-main branch from 82dba7b to 4e943e8 Compare April 7, 2023 22:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Pages data with SWR #434

Update Pages data with SWR #434

ladytrekker commented Mar 28, 2023 •

edited

Loading

0xemc left a comment

0xemc Mar 31, 2023

0xemc Mar 31, 2023

ladytrekker Mar 31, 2023 •

edited

Loading

0xemc Apr 4, 2023

ladytrekker Apr 5, 2023

0xemc Apr 6, 2023

ladytrekker commented Mar 31, 2023 •

edited

Loading

0xemc commented Apr 4, 2023

Atmosfearful left a comment •

edited

Loading

Atmosfearful Mar 30, 2023

Atmosfearful Mar 30, 2023

Atmosfearful Mar 30, 2023

jabby09 commented Apr 4, 2023

ShimonD-KlimaDAO commented Apr 5, 2023

	import { Project } from "../lib/types/carbonmark";
	import { Project } from "lib/types/carbonmark";

	import { User } from "../lib/types/carbonmark";
	import { User } from "lib/types/carbonmark";

Update Pages data with SWR #434

Are you sure you want to change the base?

Update Pages data with SWR #434

Conversation

ladytrekker commented Mar 28, 2023 • edited Loading

Description

Related Ticket

Changes

Checklist

0xemc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ladytrekker Mar 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ladytrekker commented Mar 31, 2023 • edited Loading

0xemc commented Apr 4, 2023

Atmosfearful left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jabby09 commented Apr 4, 2023

ShimonD-KlimaDAO commented Apr 5, 2023

ladytrekker commented Mar 28, 2023 •

edited

Loading

ladytrekker Mar 31, 2023 •

edited

Loading

ladytrekker commented Mar 31, 2023 •

edited

Loading

Atmosfearful left a comment •

edited

Loading