Enhancement: Refactor Signup Page into smaller chunks

[leekahung]

Describe the Current Behavior/Feature:

The existing signup page at src/pages/Signup.jsx works well for what we need, but think could be refactored the different components outside of the page and have those imported in instead.

---

Proposed Behavior/Feature:

See above.

---

Rationale:

It'll be easier to check/review/optimize/maintain the smaller chunks/components if we break them down.

---

Proposed Implementation (if applicable):

Simply to break off the components built inside src/pages/Signup.jsx into their own separate files under src/components/Signup or something similar.

[bingeboy]

@leekahung I'll grab this one but might have a couple questions.

Sounds like the page is already been styled. I'm not seeing it on my local. What is the URL?

[bingeboy]

Ok I found it going to /signup I'm assuming the styling is still a WIP but i guess refactoring the components wont matter and that will be an additional issue.

[leekahung]

The main goal of this was simply to refactor this into smaller chunks. Re styling this would be okay, but I think we can do that in a separate issue.

As for how to access that page, you can get to it via the sign up link from your profile page.

[leekahung]

I'll assign this task to you @bingeboy. Looking forward to your contributions!

[bingeboy]

I was thinking of doing something like this:

....
 ./components/Signup
  index.jsx
  helpers.jsx <-- or whatever name is preferred  
...
./Pages/Signup.jsx <--- this will just have the wrapper similar to the other pages
...

if there is another component folder that I should model this issue after please let me know.

[leekahung]

Yeah, that should work. We could create a new sub-directory under components to store the components for the signup page. With regards to helper functions, I think we could keep them inside src/utils or src/model-helpers.

[bingeboy]

works for me thx 👍

[bingeboy]

I'm getting bug when I run my podserver on localhost:3000 the log is show throwing this error when I use the signup form:

[WrappedExpiringReadWriteLocker] {Primary} error: Lock expired after 6000ms on http://localhost:3000/test/profile/card

on the clientside in FF I'm seeing this in the console:

TypeError: e.response is undefined
    fetchContactsList useContactsList.js:79
    fetchFn query.ts:400
    run retryer.ts:147
    run retryer.ts:196
    promise callback*createRetryer/run/< retryer.ts:192
    promise callback*run retryer.ts:154
    run retryer.ts:196
    promise callback*createRetryer/run/< retryer.ts:192
    promise callback*run retryer.ts:154
    run retryer.ts:196
    promise callback*createRetryer/run/< retryer.ts:192
    promise callback*run retryer.ts:154
    createRetryer retryer.ts:204
    fetch query.ts:458
    executeFetch queryObserver.ts:350
    onSubscribe queryObserver.ts:107
    subscribe subscribable.ts:15
    useBaseQuery useBaseQuery.ts:81
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require2 chunk-TFWDKVI3.js:18
    js index.js:6
    __require2 chunk-TFWDKVI3.js:18
    React 2
    __require2 chunk-TFWDKVI3.js:18
    js React
    __require2 chunk-TFWDKVI3.js:18
    js React
    __require2 chunk-TFWDKVI3.js:18
    <anonymous> react-dom_client.js:38
query.ts:446:22
    onError query.ts:446
    reject retryer.ts:112
    run retryer.ts:174
    (Async: promise callback)
    run retryer.ts:154
    run retryer.ts:196
    (Async: promise callback)
    run retryer.ts:192
    (Async: promise callback)
    run retryer.ts:154
    run retryer.ts:196
    (Async: promise callback)
    run retryer.ts:192
    (Async: promise callback)
    run retryer.ts:154
    run retryer.ts:196
    (Async: promise callback)
    run retryer.ts:192
    (Async: promise callback)
    run retryer.ts:154
    createRetryer retryer.ts:204
    fetch query.ts:458
    executeFetch queryObserver.ts:350
    onSubscribe queryObserver.ts:107
    subscribe subscribable.ts:15
    useBaseQuery useBaseQuery.ts:81
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require2 chunk-TFWDKVI3.js:18
    js index.js:6
    __require2 chunk-TFWDKVI3.js:18
    React 2
    __require2 chunk-TFWDKVI3.js:18
    js React
    __require2 chunk-TFWDKVI3.js:18
    js React
    __require2 chunk-TFWDKVI3.js:18
    <anonymous> react-dom_client.js:38

it's really hanging my browser up and I don't know if this is a known issue or if I'm doing something wrong on my dev env. I switched back to the Development branch to verify it wasn't something in my refactor.

Steps to create the error: Browser FF Node v16.2

1. start dev pod and dev server on localhost
2. from homepage http://localhost:5173 click LOGIN button sign into the pod
3. Once the user landing page loads click the link Your Signup Link
4. Create a sign in
5. when the page loads with You have successfully registered for a pod the error should be seen in the console.
   They seem to be XHR requests that are throwing a error 409

[leekahung]

I'm not sure about this bug. It's my first time seeing it

[bingeboy]

@leekahung ignore the error in the pod I noted above I think that was just bad timing or something I'm not able to recreate

[leekahung]

@leekahung ignore the error in the pod I noted above I think that was just bad timing or something I'm not able to recreate

No problem.