Modernize the application & Performance tweaks

[khaledosman]

The repo seems to be a bit out of date and isn't using best practices when it comes to performance for React applications, so this article might be unrealistic for 2019 https://medium.com/free-code-camp/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075. This PR aims to change that

• Used the newest versions of React and other dependencies
• Migrate away from deprecated library react-router-redux to connected-react-router
• Use PureComponents and React.memo for functional components for better performance
• Migrate away from deprecated lifeCycleHooks like componentWIllUpdate, componentWillReceiveProps & componentWillMount
• lazyload & codesplit non-default routes with React.lazy & React.Suspense

[sangdth]

I have the same feeling and looking forward to this PR.

[khaledosman]

Any updates?

[klamping]

FYI, using your fork, logging out gives me this error:

[khaledosman]

@klamping I was able to reproduce the issue, it should be fixed now.

[khaledosman]

Is anyone maintaining this app anymore? I would be happy to maintain it myself

[helderscrolls]

@khaledosman One small thing I found, currentUser.image is broken if you define no image, isn't there a way already coded on the API to recover the profile.image smiley face and use it instead of displaying the alt message ?

[khaledosman]

@helderscrolls Thanks, I'm not sure where that broke as I didn't change any API related logic, I'll look into it later when I have the time.

[helderscrolls]

@khaledosman I think it’s a issue that comes from the original Build, the only way I’ve found so far is to hard code the URL on the front-end, on the Header and the Comment preview that way even if currentUser.image is undefined it displays the smiley face

[khaledosman]

@helderscrolls This should be fixed now, I've added a fallback default image everywhere that is using user.image

[dabonnestor]

There is a bug when trying to submit an article. To reproduce the bug try to register as a new user then submit an article without inputing a data on the fields.

[khaledosman]

@dabonnestor looks like validation is not implemented for this form, can you check if this works on master branch?

[dabonnestor]

It has validation on the master branch.

[khaledosman]

this has been fixed.

[dabonnestor]

You should be the active maintainer for this repo 👍

[shanebdavis]

I also forked this project - to convert it all to Hooks. Then I noticed your excellent work here, @khaledosman. Lesson learned! I should check the existing forks before starting my own! I can't believe this has been sitting here for 6 months!

My hooks conversion went smoothly. I also attempted to do the updates you did (redux, deprecated react-router-redux, etc), but I ran into complications, so I kept my fork focused.

Just browsing your source, I don't see that you converted things to hooks, though you modernized everything else. Would you be interested in my attempting to merge my work with yours?

[khaledosman]

@shanebdavis absolutely go for it, you could make a branch out of mine.

I don't see the point if the contributors will ignore it anyway though.

[shanebdavis]

I don't see the point if the contributors will ignore it anyway though.

I see that the main real-world repo is accepting pull-requests. I'll try to bug them over there.

[ezorfa]

@khaledosman There is this error when i click signin / settings or signup 👍 "Uncaught Could not find router reducer in state tree, it must be mounted under "router""

[khaledosman]

@ezorfa it seems the backend API doesn't support CORS anymore so I'm getting this error instead

localhost/:1 Access to XMLHttpRequest at 'https://conduit.productionready.io/api/articles?limit=10&offset=0' from origin 'http://localhost:4100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I added some checks to make the app render when the api returns an error, it seems like error states are not implemented though.

The other error you saw is related to a version mismatch as mentioned here https://github.com/ReactTraining/history/issues/804 , I downgraded to history v4.10 and it seems to work now, give it another try.

[ezorfa]

@khaledosman which backed do you use?

[ezorfa]

@khaledosman I get this error now:

Console:

I am using django backend.

[khaledosman]

@ezorfa I'm not sure, its whatever backend the app was using before, I think they all use the same backend because I got the same issue in the stencil-realworld-app aswell which uses the same endpoint https://github.com/khaledosman/stencil-realworld-app

The issue you saw is the one with the error state I just mentioned, please do a git pull to get my latest commit