1618 add view count to how to and research by AlfonsoGhislieri · Pull Request #2086 · ONEARMY/community-platform

AlfonsoGhislieri · 2023-02-02T17:13:50Z

PR Checklist

- Commit messages are descriptive, it will be used in our Release Notes

PR Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Developer experience (improves developer workflows for contributing to the project)

Description

Implements a simple way for views to be tracked, using sessionstorage to limit views being inflated by refreshing page.

Git Issues

Closes #
Add view count to How-to and Research #1618

Screenshots/Videos

If useful, provide screenshot or capture to highlight main changes

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of a monthly dev call (first Monday of the month, open to all!).

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

cypress · 2023-02-02T18:43:51Z

Passing run #2902 ↗︎

0	52	0	0	0

Details:

chore: removed react fc from research desc
Project: onearmy-community-platform	Commit: `765a49c142`
Status: Passed	Duration: 02:59 💡
Started: Feb 5, 2023 2:18 PM	Ended: Feb 5, 2023 2:21 PM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

AlfonsoGhislieri · 2023-02-02T18:47:53Z

@davehakkens the link for the icon download wasn't working so added the star icon in the meantime, I can add the correct icon whenever you have time and can upload it.

The PR also fixed some bugs I noticed with the download counter which now should be all sorted, state wasn't being updated properly.

I also ended up sticking with usingset since I couldn't quite get update to work and I also realized that using update function we would run into issues with old howtos and research posts that didn't have the total_views field. Not super DRY with both howto and research stores having essentially the same increment function could extract this logic and share it across both stores. But it should all be working :-)

github-actions · 2023-02-02T18:59:11Z

Visit the preview URL for this PR (updated for commit 765a49c):

https://onearmy-next--pr2086-1618-add-view-count-zsl9v0ls.web.app

_{(expires Mon, 20 Mar 2023 13:54:28 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d65e4f8fee2f6ab2da0c1c3b85b8797d66afa59}

davehakkens · 2023-02-02T21:33:45Z

thanks @AlfonsoGhislieri
Looks good :) Here you can download the icon
views.svg.zip

Could you wrap it in our AuthWrapper so it's only available for beta-testers.
(here an example of how it's implemented)

asheerrizvi · 2023-02-03T04:52:09Z

packages/components/src/ViewsCounter/ViewsCounter.tsx

+
+export const ViewsCounter = (props: IProps) => {
+  return (
+    <>


We don't need a fragment here. It is already returning a single element which is Button.

asheerrizvi · 2023-02-03T04:56:17Z

packages/components/src/ViewsCounter/ViewsCounter.tsx

+        sx={{
+          backgroundColor: 'transparent',
+          fontSize: 2,
+          ml: 2,
+          background: 'softyellow',
+          borderColor: 'softyellow',
+          opacity: 1,
+          pointerEvents: 'none',
+          cursor: 'none',
+        }}


Let's not add more styling than necessary, I would suggest using the base Button styling. Since the background color is slightly different we can probably add it as a variant but things like font-sze, opacity, pointer-events and cursor should be left to the Button component to decide.

asheerrizvi · 2023-02-03T05:27:15Z

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

+  useEffect(() => {
+    setFileDownloadCount(howto.total_downloads)
+    setViewCount(howto.total_views)
+    incrementViewCount()
+  }, [howto._id])


Let's not use an effect to initialize/re-initialize state. This is considered an undesirable pattern see more:

https://beta.reactjs.org/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes

asheerrizvi · 2023-02-03T05:31:04Z

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

-interface IState {
-  fileDownloadCount: number | undefined
-}
+const HowtoDescription: React.FC<IProps> = ({


React.FC is generally discouraged, see the Why is React.FC discouraged section here:

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components

asheerrizvi · 2023-02-03T05:33:01Z

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

+  const iconFlexDirection =
+    emStringToPx(theme.breakpoints[0]) > window.innerWidth ? 'column' : 'row'


I think this can be moved to outside the component without any issue, move it back if you find any issue though.

asheerrizvi · 2023-02-03T05:37:59Z

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

-                mb="2"
+            </Box>
+          )}
+          <Box sx={{ flexGrow: 1 }}>


Instead of using flex-grow: 1 here, let's remove justify-content: space-between from the parent of these buttons/link and add a gap as well. We can then remove left margin from our buttons as well.

asheerrizvi · 2023-02-03T05:39:24Z

src/pages/Research/Content/ResearchDescription.tsx

+  useEffect(() => {
+    setViewCount(research.total_views)
+    incrementViewCount()
+  }, [research._id])


Please check the useEffect comment within the HowToDescription component.

asheerrizvi · 2023-02-03T05:41:29Z

src/pages/Research/Content/ResearchDescription.tsx

              />
            </Box>
          )}
+          <Box style={{ flexGrow: 1 }}>


Please check the flex-grow comment within HowToDescription component.

AlfonsoGhislieri · 2023-02-04T18:11:45Z

@asheerrizvi thanks for the feedback! Made all the changes and also converted the viewsCounter component away from being a modified button to being it's own component. Let me know if anything else needs changing :-)

asheerrizvi · 2023-02-07T09:24:03Z

src/pages/Research/Content/ResearchDescription.tsx

+  useEffect(() => {
+    incrementViewCount()
+  }, [research._id])


I think if you can do a lazy initialization for useState and not be in need of this effect:

https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates

The issue is as far as I know you can't pass an asynchronous function to do a lazy initialization for useState it'll set state to a promise rather than the return value of the function. I had already tried to do this initially and had to revert to useEffect for that reason.

Ok, I am approving this. Can we create a new issue for removing this effect and work on it separately?

asheerrizvi · 2023-02-07T09:24:50Z

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

+  useEffect(() => {
+    incrementViewCount()
+  }, [howto._id])


See comment on ResearchDescription component please:

https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates

onearmy-bot · 2023-02-18T13:49:31Z

🎉 This PR is included in version 1.38.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

davehakkens · 2023-02-18T14:09:52Z

Thanks @AlfonsoGhislieri Its on live now.
Looking forward to keep an eye on those numbers :)

AlfonsoGhislieri · 2023-02-18T14:13:14Z

Thanks @AlfonsoGhislieri Its on live now.
Looking forward to keep an eye on those numbers :)

Great! Let me know if there’s any issues or anything you’d like changed :)

davehakkens · 2023-02-18T15:04:22Z

Will do. One question @AlfonsoGhislieri to make sure I got it correct: Whats the formula you used to calculate a view?

AlfonsoGhislieri · 2023-02-19T10:28:58Z

A view gets added each time a resource or howto page is opened or refreshed. However, to limit bloating of views each time you view a page the id is stored in Session storage and this is checked every time you load a page. This all gets reset after the session ends (when the tab or browser gets closed). So if you’ll view the page again after that a new view will be added.

Hope that makes sense!

davehakkens · 2023-02-20T13:05:36Z

makes sense!
And are all views counted now.
Or are they only counted from beta-testers?

AlfonsoGhislieri · 2023-02-20T13:29:50Z

Right now it counts all views! This could be changed if you want?

davehakkens · 2023-02-20T13:32:45Z

perfect! Should count all, but only show to beta-testers

davehakkens · 2023-02-22T12:09:45Z

Are you sure about this @AlfonsoGhislieri
I've been keeping an eye and views are very low.
In fact slower then download counts which seem impossible to me?
(got to view before you can download?)

AlfonsoGhislieri · 2023-02-22T13:01:37Z

Damn well this is quite confusing, it definitely works like intended when I run it locally. I just tested it multiple times to make sure, the views get incremented correctly when you open the page even just as a normal user (either loading the url or by clicking on the howto/research directly on the main page).

But you are right this clearly looks something is not working like it should in the production environment, I have no clue as to why this is the case though since everything appears to be working normally when I test it.

Is there any chance you could make my account a beta-tester so I can have a look on the production side if I can figure something out?

davehakkens · 2023-02-22T13:05:06Z

Yeh not sure either. And then there is caching always messing things up as well. 🙈
What is your username on the platform?
Could optionally also give you read access to firebase so you can see how much views are actually stored

AlfonsoGhislieri · 2023-02-22T13:07:35Z

Cryptiks on the platform

Ah so the views are actually being correctly incremented in the backend but just not rendering correctly? Even more confused hmm...

Happy to have a look at the firebase as well, might help understand what's up

davehakkens · 2023-02-22T13:12:51Z

ok. invited as beta tester.
Also invited your email to firebase.
You can find the data here:

firestore>v3_howtos> All ID's are a howto> views are at the bottom.
(easiest way to filter is search for username and find their howto's)

AlfonsoGhislieri · 2023-02-22T13:17:58Z

I just had a look at the howto on my end and the number of downloads and views was quite different, are yours still the same as in your earlier picture?

davehakkens · 2023-02-22T13:24:48Z

6 views now..

AlfonsoGhislieri requested a review from a team as a code owner February 2, 2023 17:13

github-actions bot added Mod: HowTo 📰 Research 🧪 labels Feb 2, 2023

AlfonsoGhislieri force-pushed the 1618-Add-view-count-to-How-to-and-Research branch from e7f8428 to 2681a8f Compare February 2, 2023 17:45

github-actions bot removed the Documentation label Feb 2, 2023

AlfonsoGhislieri force-pushed the 1618-Add-view-count-to-How-to-and-Research branch 2 times, most recently from acf8521 to 4f74c9d Compare February 2, 2023 17:52

AlfonsoGhislieri added 4 commits February 2, 2023 17:53

feat: view incrementation implemented using viewcounter

220737f

chore: cleaned up props

0807984

fix: views incremented without _modified field being changed

8a9d5c8

feat: session storage added to limit views from increasing

646ba53

AlfonsoGhislieri force-pushed the 1618-Add-view-count-to-How-to-and-Research branch from 4f74c9d to 646ba53 Compare February 2, 2023 17:53

chore: fixed linting and left margin

6a745af

davehakkens added the Review allow-preview ✅ Has received manual check for malicious code and can be safely built for preview label Feb 2, 2023

asheerrizvi reviewed Feb 3, 2023

View reviewed changes

AlfonsoGhislieri added 2 commits February 4, 2023 15:32

chore: removed useeffect state initialization

49fb5b5

feat: aadded views svg and modified viewscounter

bf57b47

feat: viewscounter only viewable for beta-testers

b6d7895

chore: removed react fc from research desc

765a49c

asheerrizvi reviewed Feb 7, 2023

View reviewed changes

asheerrizvi approved these changes Feb 16, 2023

View reviewed changes

davehakkens merged commit 9f91545 into ONEARMY:master Feb 16, 2023

onearmy-bot added the released label Feb 18, 2023

		const iconFlexDirection =
		emStringToPx(theme.breakpoints[0]) > window.innerWidth ? 'column' : 'row'

Uh oh!

Conversation

AlfonsoGhislieri commented Feb 2, 2023

Description

Git Issues

Screenshots/Videos

What happens next?

Uh oh!

cypress bot commented Feb 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Passing run #2902 ↗︎

Uh oh!

AlfonsoGhislieri commented Feb 2, 2023

Uh oh!

github-actions bot commented Feb 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davehakkens commented Feb 2, 2023

Uh oh!

asheerrizvi Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

asheerrizvi Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

asheerrizvi Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlfonsoGhislieri commented Feb 4, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

onearmy-bot commented Feb 18, 2023

Uh oh!

davehakkens commented Feb 18, 2023

Uh oh!

AlfonsoGhislieri commented Feb 18, 2023

Uh oh!

davehakkens commented Feb 18, 2023

Uh oh!

AlfonsoGhislieri commented Feb 19, 2023

Uh oh!

davehakkens commented Feb 20, 2023

Uh oh!

AlfonsoGhislieri commented Feb 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davehakkens commented Feb 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davehakkens commented Feb 22, 2023

Uh oh!

AlfonsoGhislieri commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

davehakkens commented Feb 22, 2023

Uh oh!

AlfonsoGhislieri commented Feb 22, 2023

Uh oh!

davehakkens commented Feb 22, 2023

Uh oh!

cypress bot commented Feb 2, 2023 •

edited

Loading

github-actions bot commented Feb 2, 2023 •

edited

Loading

asheerrizvi Feb 3, 2023 •

edited

Loading

asheerrizvi Feb 3, 2023 •

edited

Loading

asheerrizvi Feb 3, 2023 •

edited

Loading

AlfonsoGhislieri commented Feb 20, 2023 •

edited

Loading

davehakkens commented Feb 20, 2023 •

edited

Loading

AlfonsoGhislieri commented Feb 22, 2023 •

edited

Loading