Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(frontend): 🐛 mount component before accessing local storage #71

Merged
merged 3 commits into from
Nov 12, 2024
Merged

fix(frontend): 🐛 mount component before accessing local storage #71

merged 3 commits into from
Nov 12, 2024

Conversation

tituschewxj
Copy link

When using SSR frameworks (e.g. Next.js), localStorage may cause issues because it’s only available in the browser, not on the server side.

This leads to the error:

⨯ ReferenceError: localStorage is not defined
    at eval (./src/app/collaboration/[id]/page.tsx:67:28)
    at CollaborationPage (./src/app/collaboration/[id]/page.tsx:66:98)

Hence the fix is to only access localStorage on the client side (in the browser) after the component has mounted.

@tituschewxj
fix(frontend): 🐛 mounts component before accessing local storage
e5e41ce 
Only access localStorage on the client side (in the browser) after the component has mounted.
@tituschewxj tituschewxj self-assigned this Nov 7, 2024
@tituschewxj tituschewxj added bug Something isn't working frontend labels Nov 7, 2024
@tituschewxj tituschewxj changed the title fix(frontend): 🐛 mounts component before accessing local storage fix(frontend): 🐛 mount component before accessing local storage Nov 7, 2024
@tituschewxj
fix(videoPanel): 🐛 default for undefined partnerId
fdce97a 
Include a check to validate if partnerID is not undefined
bensohh
bensohh approved these changes Nov 11, 2024
View reviewed changes
Copy link

@bensohh bensohh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

apps/frontend/src/components/VideoPanel/VideoPanel.tsx
@@ -30,14 +27,23 @@ const VideoPanel = () => {
const [muteOn, setMuteOn] = useState<boolean>(false);
const [isCalling, setIsCalling] = useState<boolean>(false);

useEffect(() => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Catch! thanks

@bensohh bensohh merged commit 31a6bd1 into staging Nov 12, 2024
3 checks passed
chiaryan added a commit that referenced this pull request Nov 12, 2024
@chiaryan
Squashed commit of the following:
266971d 
commit e0c62de
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 15:23:44 2024 +0800

    asd

commit d3eb518
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 15:21:42 2024 +0800

    asd

commit 7555976
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 15:07:33 2024 +0800

    asd

commit 3657a9c
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 15:05:03 2024 +0800

    asd

commit 64e2651
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 15:00:01 2024 +0800

    asd

commit 4c405f4
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:57:22 2024 +0800

    asd

commit c4ccd11
Merge: e400a71 31a6bd1
Author: chiaryan <53717471+chiaryan@users.noreply.github.com>
Date:   Tue Nov 12 14:54:30 2024 +0800

    Merge branch 'staging' into browser-tests

commit e400a71
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:53:23 2024 +0800

    asd

commit e92e186
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:47:29 2024 +0800

    asd

commit 3a975ff
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:37:56 2024 +0800

    asd

commit 9663688
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:19:17 2024 +0800

    asd add browsers

commit b0b9fb5
Merge: bf9f160 f86888b
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Tue Nov 12 14:18:56 2024 +0800

    Merge branch 'browser-compatibility-tests' into browser-tests

commit 31a6bd1
Merge: 7d931ee 3fd5752
Author: Benjamin Soh Zikang <97374822+bensohh@users.noreply.github.com>
Date:   Tue Nov 12 10:20:13 2024 +0800

    Merge pull request #71 from CS3219-AY2425S1/titus/fix-local-storage-bug

    fix(frontend): 🐛 mount component before accessing local storage

commit 3fd5752
Merge: fdce97a 7d931ee
Author: Benjamin Soh Zikang <97374822+bensohh@users.noreply.github.com>
Date:   Mon Nov 11 12:40:38 2024 +0800

    Merge branch 'staging' into titus/fix-local-storage-bug

commit 7d931ee
Merge: 439b410 d75215c
Author: Benjamin Soh Zikang <97374822+bensohh@users.noreply.github.com>
Date:   Mon Nov 11 12:20:10 2024 +0800

    Merge pull request #70 from CS3219-AY2425S1/titus/add-message-queue

    feat: add message queue

commit bf9f160
Merge: 862051a 311be82
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Mon Nov 11 04:56:37 2024 +0800

    Merge branch 'browser-compatibility-tests' into browser-tests

commit 862051a
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 21:16:04 2024 +0800

    asd

commit f58f035
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 21:13:59 2024 +0800

    asd

commit c784496
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 21:00:52 2024 +0800

    asd

commit 2f97a34
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:45:26 2024 +0800

    asd

commit cccfa54
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:44:24 2024 +0800

    install pnpm

commit 3570555
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:32:56 2024 +0800

    asd

commit 45ebeb4
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:32:04 2024 +0800

    asd

commit f1e7e40
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:08:35 2024 +0800

    asd

commit f5b521a
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 20:08:03 2024 +0800

    asd

commit cc46721
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 13:47:37 2024 +0800

    asd

commit 9f1efaf
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:55:18 2024 +0800

    asd
    s

commit 6796083
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:32:00 2024 +0800

    asd

commit 5b79d8b
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:28:49 2024 +0800

    asd

commit 240c839
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:27:52 2024 +0800

    asd

commit 8958cb6
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:23:29 2024 +0800

    asd

commit ab4cc47
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sun Nov 10 11:22:05 2024 +0800

    try selenium test

commit 9656dec
Merge: 439b410 324463e
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Sat Nov 9 16:14:56 2024 +0800

    Merge branch 'commit-signalling-.dockerignore' into browser-tests

commit fdce97a
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Fri Nov 8 14:17:53 2024 +0800

    fix(videoPanel): :bug: default for undefined partnerId

    Include a check to validate if partnerID is not undefined

commit e5e41ce
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 14:07:00 2024 +0800

    fix(frontend): :bug: mounts component before accessing local storage

    Only access localStorage on the client side (in the browser) after the component has mounted.

commit d75215c
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 10:40:15 2024 +0800

    style(execution-service): :fire: remove commented code

    Revmoes the previous commented implementation of sending the submission to history service via REST API call.

commit fac4430
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 01:20:36 2024 +0800

    docs: update readme

commit 2b2bbd5
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 01:12:41 2024 +0800

    docs: update readme

commit 95a82dc
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 01:10:12 2024 +0800

    ci: update docker compose test

commit bf0c096
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 01:07:32 2024 +0800

    docs: update readme

commit b8e3004
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 00:54:53 2024 +0800

    docs: update readme

commit 8bd3d10
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 00:52:29 2024 +0800

    feat: update readme

commit fbd3a4d
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 00:45:09 2024 +0800

    feat: update log msg

commit 64a1bad
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Thu Nov 7 00:33:50 2024 +0800

    fix: update docker-compose

commit e48bc7e
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Wed Nov 6 23:17:41 2024 +0800

    feat: update docker compose

commit 8a0e046
Author: tituschewxj <tituschewxj@gmail.com>
Date:   Wed Nov 6 23:17:35 2024 +0800

    feat: implement rabbitmq msg queue

commit 324463e
Author: Ryan Chia <ryan_chia8@hotmail.com>
Date:   Wed Nov 6 01:33:41 2024 +0800

    branch name
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bensohh bensohh bensohh approved these changes

@chiaryan chiaryan Awaiting requested review from chiaryan

@solomonng2001 solomonng2001 Awaiting requested review from solomonng2001

Assignees

@tituschewxj tituschewxj

Labels
bug Something isn't working frontend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@tituschewxj @bensohh