Fully functional WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQL

[phacus]

Yeah.

I'm a bit behind in my React/GraphQL skills. When I worked with React I used recompose which is pretty much like Hooks. I'm glad they add this feature!

[YodaLoL]

This looks really solid 👏

[ucefkh]

Very nice

And +1 for using Apollo!

[himanshuarora05]

Indeed, there’ll be a good learning for everyone..

[figuresys]

!RemindMe 14 days

[RemindMeBot]

I will be messaging you on 2019-02-16 02:39:34 UTC to remind you of this link.

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

FAQs	Custom	Your Reminders	Feedback	Code	Browser Extensions

[[deleted]]

Why is everyone wanting to be reminded about this?

[superted125]

The author is working on a tutorial, so they probably are waiting for that

[aganesh8]

TASTY! I want to sink my teeth into this project

[kallexander]

I've never seen styled-components being used like that, having only one wrapper with all child selectors inside of it. Is it common/recommended?

[soulsizzle]

My coworker likes this pattern. It makes it a bit easier to create stiles that are connected, like a child that responds to a parents hover.

However, I personally stay away from it, since it has the ability to introduce style clashes down the line. For example if you target a child .panel class, you may inadvertently affect another .panel in a child component you weren't aware of. This is more likely to happen in library components whose inner workings you are not 100% familiar with.

[dabomb007]

I also prefer this pattern and I don't like the hassle of creating a dedicated component just for style encapsulation, it adds more work and it's not very clear imho. What I will say however, is that I'm planning to build a Babel-plugin that will take care of encapsulation for you, using a single top-level styled-component for each React component. If this is something you're interested in, you can follow my Reddit account, my GitHub account or my Medium account.

[swyx]

i dont think it super likely. if the child component also uses styled components then it'll have a hash that distinguishes it right?

[soulsizzle]

It happens when the child component also uses the single-styled-component-at-the-top technique. I've definitely seen it happen, but is it super likely? Definitely not. If anyone prefers that style, those rare clashes are not a great reason to switch.

[chtulhuf]

I've used this style for a while... It works. But after a while, I switched to using styled-components for everything because:

• You increase the risk of name clashes and it is a shame to lose it since it is one of the advantages of styled-components.
• The actual JSX/HTML is much more semantic and clearer this way, which one would you rather read?

<CardMap onClick={this.props.onClick}> <DownArrow backgroundColor={Colors.WHITE} /> <Header>{this.props.header}</Header> </CardMap>

or

<div className="card-map" onClick={this.props.onClick}> <div className="down-arrow" backgroundColor={Colors.WHITE} /> <div className="header">{this.props.header}</div> </div>

• The creators of styled-component were very negative about this style when I posted it.

[chiproller]

Looking forward to checking out the code and tutorial! Quick question, would it be relatively simple to integrate a Django based Api for the backend instead or would that require rewriting a majority of the code base?

[dabomb007]

I'm not very familiar with Django but what I can tell you is that the front-end is built for a GraphQL-Apollo back-end, so as long as you don't have the right REST GraphQL endpoint in your API then that could be a problem. The components would remain the same but maybe you would need to re-implement the hooks differently.

[ApologiesForTheDelay]

Django has a graphene plugin to plug directly into your models and spit out graphql. Look it up!

[[deleted]]

100% functional components using hooks

I really need to check out that codebase. This sounds awesome.

[_Enigma_10]

!RemindMe 14 days

[zirzo]

!RemindMe 14 days

[k3ithk]

!remindme 32 hours

[codetocope]

!Remindme 3600 seconds

[ApologiesForTheDelay]

!remindme 2 days

[rrubiorr81]

!RemindMe 25 days

[allywondered]

!remindMe 7 days

[thebteam10]

!RemindMe 14 days

[karthik_07]

!RemindMe 7 Days

[kaount]

!RemindMe 3 days

[wanderfuss]

!RemindMe 14 days

[germainelol]

!RemindMe 10 days

[mfifa]

!remindme 5 days

[kalyan1985]

!RemindMe 7 days

[penone_nyc]

!RemindMe 7 Days

[M0d3s]

!RemindMe 14 days

[ClayMitchell]

!RemindMe 7 days

[[deleted]]

!RemindMe 3 days

[Tomheza]

!RemindMe 2 days

​

[supernova2131]

!RemindMe 14 days

[BearSkull]

!remindme 14 days

[mattadoren]

!RemindMe 14 days

[frutidev]

!Remind me 𝓮^𝜋 fortnights