urigo / whatsapp-clone-client-react Goto Github PK

View Code? Open in Web Editor NEW

610.0 18.0 143.0 5.41 MB

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial

Home Page: https://tortilla.academy

HTML 2.15% CSS 0.60% TypeScript 97.25%

whatsapp-clone-client-react's Introduction

Whatsapp Clone Client

A full working React client for a WhatsApp clone written in latest versions of:

This React client is constantly being updated by using CI tests and renovate.

You can watch this repository to learn about new updates or check out the git diffs between new versions on the tutorial's version diff pages (at the top of the screen).

It can be used as a boilerplate, a full blown example app and even as a tutorial.

It also is being accompanied by a WhatsApp clone server located in this repository.

Running locally

Clone the project.

Clone the server -> make sure both projects are under the same folder and that the server folder is named by the default name of the server repo Whatsapp-Clone-Server.

Install dependencies:

yarn

Run the codegen to generate Typescript types from GraphQL (this step requires the server to be cloned under the same repo and its folder to be with it's default name):

yarn codegen

Run tests to make sure everything is ok:

yarn test

Start the client:

yarn start

This repository is using the Tortilla project for creating tutorials from real apps and git. For more information, see https://www.tortilla.academy/ and https://www.npmjs.com/package/tortilla.

External contributors

Begin Tutorial >

whatsapp-clone-client-react's People

Contributors

Stargazers

Watchers

Forkers

jayjongcheolpark emillindfors processlab suresh44t 07101994 menuka94 davyengone michael-golfi abandisch colincoins uchennacy adamkss wechuli stroked shtakai humpangle feelgreatfoodie dhamu143 willcraft ericforgy sekmet benjycook leoalves davidnussio johnprog wendelfreitas dab0mb jbroadice rsokz memezilla mutopal kamilkisiela jcarraway nnthanh101 saruultugs khadorkin sckelemen amirh24 miguelmoutela xcodemaker krishna7852 miguelramosfdz bhatmand-forks deivateam cctoni atplerry01 barclayl cheickmec unoffices milenazuccarelli mstokluska shravyashanbhogue dariye freeguy1 itsmylife morrys vmdao arrocke peterennis lhrkhalil98 lllleeo jordan-gilliam prsh-singh834006 marceltoben anergcorp sarathdr msahin12 decebal rafahoro lweixw oskwazir kamalsharma9392 cuongdevjs p-r-t graystrider iguissouma edidevs nilportugues stanxii daphne1320 victorkurauchi msgpo fuinha pratapdd ther12k mcanikhilprajapati ivawzh gourav-singhal reymon359 dheeram waynelinks awkward-minion whatsappauto georgekb jycouet itacirgabral delta94 furkand intoxique-fuze chandanprakash-bangalore

whatsapp-clone-client-react's Issues

Unsafe type assertion used in various places on tutorial

For example:
const BackButton = styled(Button)svg { color: var(--primary-text); } as typeof Button;

I think this should instead be:
const BackButton: typeof Button = styled(Button)svg { color: var(--primary-text); };

Sorry about the odd visualization, didn't quickly figure out a way to escape the template-string in markdown to allow using pre-formatted text-block...

Coming back to the matter. So why I think the above way is unsafe is that using the as-assertion one basically goes around typescript-compiler, so in no scenario you will get any notice from compiler if your assertion is wrong, the latter will provide that.

Please see https://basarat.gitbooks.io/typescript/docs/types/type-assertion.html for reference.

I know there are scenarios where avoiding as-assertion is hard and time-consuming in the way that it might not make sense, but overall I think the more one can avoid it at (almost) all cost, the better.

yarn codegen command fail to load schema from the server?

I can't start the project, i got this error when i run yarn codgen command:

 √ Parse configuration
  > Generate outputs
    > Generate ./src/graphql/types.tsx
      × Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate


 Found 1 error

  × ./src/graphql/types.tsx
    Failed to load schema from ../WhatsApp-Clone-Server/modules/*/index.ts:


      Unable to find any GraphQL type definitions for the following pointers:

          - ../WhatsApp-Clone-Server/modules/*/index.ts

        Error:
      Unable to find any GraphQL type definitions for the following pointers:

          - ../WhatsApp-Clone-Server/modules/*/index.ts
 at prepareResult (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphql-t
oolkit\core\index.cjs.js:1138:15)
    at loadTypedefs (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphql-to
olkit\core\index.cjs.js:1108:12)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.loadSchema (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\
@graphql-toolkit\core\index.cjs.js:1161:21)
    at async loadSchema (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphq
l-codegen\cli\bin.js:396:24)
    at async E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphql-codegen\cl
i\bin.js:763:55
    at async Task.task (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphql
-codegen\cli\bin.js:618:17)

        GraphQL Code Generator supports:
          - ES Modules and CommonJS exports (export as default or named export "schema")
          - Introspection JSON File
          - URL of GraphQL endpoint
          - Multiple files with type definitions (glob expression)
          - String in config file

        Try to use one of above options and run codegen again.
    Error: Failed to load schema
        at loadSchema (E:\saher dev\what's app full\WhatsApp-Clone-Client-React\WhatsApp-Clone-Client-React\node_modules\@graphql-
codegen\cli\bin.js:406:15)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
Failed to compile.

[Suggestion] Offline-First Application

Hi all,
I wanted to propose to integrate my library into your project https://github.com/morrys/wora/tree/master/packages/apollo-offline

I think that in a chat it is very important to be able to look at messages and send new ones even if the internet connection is absent.

I also have a version for Relay Modern: https://github.com/morrys/react-relay-offline

I am available to carry out and / or help with integration.

I await your opinion about it,
thank you

Lorenzo

Issue with date format

Reproduction can be seen at https://github.com/idkjs/WhatsAppCloneDockerNotes

Error is in ChatList.tsx

<ChatInfo>
    <ChatName data-testid="name">{chat.name}</ChatName>
    {chat.lastMessage && (
    <React.Fragment>
        <MessageContent data-testid="content">
        {chat.lastMessage.content}
        </MessageContent>
        <MessageDate data-testid="date">
        {format(chat.lastMessage.createdAt, 'HH:mm')}
        </MessageDate>
    </React.Fragment>
    )}
</ChatInfo>

Full Browser Error:

RangeError: Invalid time value
format
node_modules/date-fns/esm/format/index.js:371

  368 | var originalDate = toDate(dirtyDate);
  369 | 
  370 | if (!isValid(originalDate)) {
> 371 |   throw new RangeError('Invalid time value');
      | ^  372 | } // Convert the date in system timezone to the same date in UTC+00:00 timezone.
  373 | // This ensures that when UTC functions will be implemented, locales will be compatible with them.
  374 | // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376

ChatsList/<
src/components/ChatsListScreen/ChatsList.tsx:106

  103 |   <MessageContent data-testid="content">
  104 |     {chat.lastMessage.content}
  105 |   </MessageContent>
> 106 |   <MessageDate data-testid="date">
      | ^  107 |     {format(chat.lastMessage.createdAt, 'HH:mm')}
  108 |   </MessageDate>
  109 | </React.Fragment>

ChatsList
src/components/ChatsListScreen/ChatsList.tsx:84

  81 | 
  82 | return (
  83 |   <Container>
> 84 |     <StyledList>
     | ^  85 |       {chats.map((chat: any) => (
  86 |         <StyledListItem
  87 |           key={chat.id}

I am trying to chase it down unless you are aware of it.

Step 6's step 6.9 unit tests do not fulfil component interfaces completely

Mock data used in unit tests doesn't completely fulfil the interfaces of their respective components. For example ChatNabar.test.tsx chat-object is missing "messages"-(array) property, and the rendered component is missing history data-property.

These do not crash the test, but I'm not sure whether it makes sense to omit doing a "full mock", especially since IDEs like Visual Studio Code do see these absences and do render errors (even if they don't cause an error in test-execution).

[Suggestion] Using Next.js for automatic SSR

One thing I didn’t see mentioned anywhere in Eytan’s Medium article was server-side rendering (SSR). I assume that this means that the app is currently pure CSR, or? I apologize if I missed something.

Next.js is a lightweight React framework that handles SSR automatically, so I feel it would pair perfectly with this stack, for those that need great SEO? In fact, outside of SSR, this stack looks perfect!

I'm really excited about this project, especially when you said that you’re planning on consistently updating it. Looking forward to the step-by-step tutorial series! I’ll be watching this closely and I’ll provide feedback/help with what I can =)

Edit I just realized that a project like his probably doesn’t need SSR since it’s not really public facing by its nature haha.

turn off renovate bot?

RIP all my notifications when those PRs rolled thru..

Type 'History<unknown>' is not assignable to type 'History<PoorMansUnknown>'.

after starting the project, the browser loaded the login screen, but immediately afterwards it showed the error below:

Failed to compile

/home/igormenin/Documentos/Desenvolvimento/testevenombots/WhatsApp-Clone-Client-React/src/App.tsx
TypeScript error in /home/igormenin/Documentos/Desenvolvimento/testevenombots/WhatsApp-Clone-Client-React/src/App.tsx(26,58):
Type 'History' is not assignable to type 'History'.
The types of 'location.state' are incompatible between these types.
Type 'unknown' is not assignable to type 'PoorMansUnknown'.
Type 'unknown' is not assignable to type '{}'. TS2322
24 |         component={withAuth(
25 |           ({ match, history }: RouteComponentProps<{ chatId: string }>) => (
26 |             <ChatRoomScreen chatId={match.params.chatId} history={history} />
   |                                                          ^
27 |           )
28 |         )}
29 |       />
This error occurred during the build time and cannot be dismissed.

Create a version using Hasura GraphQL APIs

I have made an attempt to create a version of this WhatsApp Clone React App using Hasura GraphQL Engine APIs. Here's the source of the app

Key points:

Data modelling on Postgres (slightly different from the original server)
Role based access control using Hasura
JWT based authentication

Would like to do more optimisations around data fetching for subscriptions. For example, currently we fetch all message data every time a new message comes in. Instead a subscription to be used as a notification for new messages and a simple refetch query to fetch the ones not available on the client.
This should solve the missing messages problem in case the subscription client is not connected for sometime.

Hope others find this fork useful. Will update this issue as i have more optimisations worked out on the app.

[Suggestion] GatsbyJS integration?

There are not many tutorials on how to use Gatsby for any dynamic web applications.
It would be good to extend the this example?

Step 7 is incompatible with latest react-apollo-hooks (0.5.0), but works with 0.4.5

It seems that if one uses latest react-apollo-hooks (0.5.0) step 7 will crash with an error Uncaught TypeError: Cannot read property 'chats' of undefined at ChatsList (ChatList.tsx:81).

Downgrading to 0.4.5 allows the step to function. I do not know the reason for this, nor have the expertise or time to debug right now.

I think that the tutorial should be locked to version react-apollo-hooks version 0.4.5 until someone has a moment to figure out what happens and a possible fix is either made to the library or the tutorial is changed in a way that allows it to function with the latest version.

Step 9.2 issue: Cannot read property '__typename' of undefined

Hi,

In step 9.2: Use Codegen Hooks, I'm was running into the following error while trying to send a message. Line 85 of src/components/ChatRoomScreen/index.tsx:
const chatIdFromStore = defaultDataIdFromObject(addMessage.chat);
produces the following error:
Cannot read property '__typename' of undefined.

The update function for the addMessage mutation expects the Message result to have some details about the chat. The Message.chat resolver is only introduced in the server in chapter 10 at Step 7.7: Add Message.chat resolver.

I made the following changes for now:

Line 85 in the the ChatRoomScreen index, changed
const chatIdFromStore = defaultDataIdFromObject(addMessage.chat); to
const chatIdFromStore = defaultDataIdFromObject(chat);

Line 103 changed
if (fullChat.messages.messages.some((m: any) => m.id === addMessage.id)) return; to
if (fullChat.messages.some((m: any) => m.id === addMessage.id)) return;

Line 105 changed
fullChat.messages.messages.push(addMessage); to
fullChat.messages.push(addMessage);

Happy to submit a PR to fix this if need be :-)

Example with "subscribeToMore"

Could you add an example with apollographql subscribeToMore?

I guess that here, you can arrive on a chat where you already have a list of messages, and then subscribeToMore messages :)

Thx in advance ;)

Failed to compile (Typescript Definitions Missing)

Failed to compile.

./src/graphql/fragments/index.ts
Line 1:1: Definition for rule '@typescript-eslint/consistent-type-assertions' was not found @typescript-eslint/consistent-type-assertions
Line 1:1: Definition for rule '@typescript-eslint/no-unused-expressions' was not found @typescript-eslint/no-unused-expressions

Search for the keywords to learn more about each error.

Can you Please add Open Source License if its a Open Source as its Mentioned in your Youtube that its a open source Please Note: As per Github without License being mentioned its not a Open Source, please refer Github Terms and Conditions

Can you Please add Open Source License if its a Open Source as its Mentioned in your Youtube that its a open source

Please Note: As per Github without License mentioned is not a Open Source, please refer Github Terms and Conditions

Feature request: Allow formatting of messages like whatsapp.

Currently your application does not support formatting of messages in whatsapp editor.
You can refer here for whatsapp text formatting:
https://faq.whatsapp.com/general/chats/how-to-format-your-messages/?lang=en

If you can try this it would be a great help.

Or I can try this issue in your application.

Component tests don't show up

Hi! I did

git clone https://github.com/Urigo/WhatsApp-Clone-Client-React.git
git checkout master-step9
yarn install

Added unknown to history (#1587)

yarn test

Only App.test.tsx shows up. Although not xit tests for for example ChatNavbar.test.tsx don't show up.

 PASS  src/App.test.tsx
  ✓ renders without crashing (70ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.813s, estimated 3s

Thanks

NPM packages that should be devDependencies installed as dependencies

For example all @types-packages (e.g. @types/jest, @types/node, etc..)

Also typescript, react-scripts... and possibly others. Not quite yet through the full tutorial so I haven't taken a look at the full package.json

yarn test - 'TZ' is not recognized as an internal or external command

Windows 10

C:\ae\ae-whatsapp-clone\WhatsApp-Clone-Client-React>yarn test
yarn run v1.17.3
$ TZ="Asia/Jerusalem" react-scripts test
'TZ' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

C:\ae\ae-whatsapp-clone\WhatsApp-Clone-Client-React>

Graphql types and Babel

Wait, what? How did you manage that? :) I mean the TypeScript support in Babel does not support namespaces and yet your app clearly starts and does not complain about it. Is there some hidden switch I am failing to see that makes this magic happen? :)

[Suggestion] Consider using react-native-web

I believe its a good fit for the project and react-native-web would benefit from the production ready example.

Step 6 is missing types for react-router-dom in the steps

The step in the beginning is missing the types-package for react-router-dom which will result into error: Could not find a declaration file for module 'react-router-dom'. in build.

By diff one can see that in tutorial these types are actually installed, but this step is missing in the tutorial code-snippets.

Jest junit package missing in tutorial steps (part 5, server)

Steps that define packages to install in the tutorial are missing package jest-junit, however it is visible in package.json diff and it is utilized in test-script.

So unless one notices this they are greeted with an error while trying to run the tests: Error: Could not resolve a module for a custom reporter. Module name: jest-junit

Material doesn't support CSS variables

We should evaluate moving to React Ionic

[Suggestion] Offline views.

Members pictures can be cached in the client for offline views.

type-graphql

How about using type-graphql with typeorm for the server side?
https://typegraphql.ml/

Cheers, kai

This is a web app? not mobile app?

why do i see some screenshots (like in step 2) that the chat list is inside a mobile phone simulator? but no where did it mention anything about that?

Create a version with a serverless backend using AWS AppSync

This issue is in regard to this thread.

The main idea is to do two things:

Replace the authentication type to Amazon Cognito using the Amplify CLI
Replace the back end with AWS AppSync

I will revisit this issue with more details & discussions later, but for now I wanted to get the conversation started to see if I can find people who would be interested in helping with this!

warning: unmet/incorrect peer dependency

C:\ae\ae-whatsapp-clone\WhatsApp-Clone-Client-React>yarn
yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > [email protected]: I wrote this module a very long time ago; you should use something else.
warning react-scripts > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: use String.prototype.padStart()
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @graphql-codegen/[email protected]" has unmet peer dependency "@types/graphql@*".
warning " > [email protected]" has incorrect peer dependency "react-router-dom@^4.1.1".
warning "react-scripts > @typescript-eslint/[email protected]" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/[email protected]" has incorrect peer dependency "eslint@^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 66.41s.

C:\ae\ae-whatsapp-clone\WhatsApp-Clone-Client-React>

Unhandled Rejection (Error) with latest dependencies

Hi! I tried to recreate the client with the latest dependencies, meaning

package.json

{
  "name": "whatsapp-clone-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@graphql-codegen/add": "2.0.2",
    "@graphql-codegen/typescript": "1.21.1",
    "@graphql-codegen/typescript-operations": "1.17.15",
    "@graphql-codegen/typescript-react-apollo": "2.2.2",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.1.10",
    "@types/history": "^4.7.8",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "add": "^2.0.6",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "history": "^5.0.0",
    "jest-fetch-mock": "^3.0.3",
    "moment": "^2.29.1",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-router-transition": "^2.1.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
    "yarn": "^1.22.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier \"**/*.{ts,tsx,css,graphql}\" --write",
    "codegen": "graphql-codegen"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-router-transition)/)"
    ],
    "resetMocks": false
  },
  "devDependencies": {
    "@graphql-codegen/cli": "1.21.2",
    "apollo-link-mock": "^1.0.1",
    "ts-jest": "^26.5.3"
  }
}

If I post a message and return to the chats list I get

Unhandled Rejection (Error): can't define array index property past the end of an array with non-writable length
ApolloError

browser error

Unhandled Rejection (Error): can't define array index property past the end of an array with non-writable length
ApolloError
src/errors/index.ts:49

  46 | // Constructs an instance of ApolloError given a GraphQLError
  47 | // or a network error. Note that one of these has to be a valid
  48 | // value or the constructed error will be meaningless.
> 49 | constructor({
     | ^  50 |   graphQLErrors,
  51 |   networkError,
  52 |   errorMessage,

next
src/core/QueryManager.ts:217

  214 |     update: updateWithProxyFn,
  215 |   });
  216 | } catch (e) {
> 217 |   error = new ApolloError({
      | ^  218 |     networkError: e,
  219 |   });
  220 |   return;

iterateObserversSafely/<
src/utilities/observables/iteration.ts:13

  10 |   // to just the observers with the given method.
  11 |   const observersWithMethod: Observer<E>[] = [];
  12 |   observers.forEach(obs => obs[method] && observersWithMethod.push(obs));
> 13 |   observersWithMethod.forEach(obs => (obs as any)[method](argument));
  14 | }
  15 | 

iterateObserversSafely
src/utilities/observables/iteration.ts:13

  10 |   // to just the observers with the given method.
  11 |   const observersWithMethod: Observer<E>[] = [];
  12 |   observers.forEach(obs => obs[method] && observersWithMethod.push(obs));
> 13 |   observersWithMethod.forEach(obs => (obs as any)[method](argument));
  14 | }
  15 | 

next
src/utilities/observables/Concast.ts:171

  168 | next: (result: T) => {
  169 |   if (this.sub !== null) {
  170 |     this.latest = ["next", result];
> 171 |     iterateObserversSafely(this.observers, "next", result);
      | ^  172 |   }
  173 | },
  174 | 

createHttpLink/</</<
src/httpLink.ts:142

  139 | .then(parseAndCheckHttpResponse(operation))
  140 | .then(result => {
  141 |   // we have data and can send it to back up the link chain
> 142 |   observer.next(result);
      | ^  143 |   observer.complete();
  144 |   return result;
  145 | })

I have checked the server via Playground, it works.

By using the debugger I was able to locate the line in ChatRoomScreen/index.tsx:

fullChat.messages.push(data.addMessage); 
fullChat.lastMessage = data.addMessage; // <- is not reached.

I don't know how to go about this. Maybe somebody experienced the same issue and wants to share his or her solution.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use

Download the Apollo DevTools for a better development experience: https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm
react-dom.development.js:12029 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AnimatedSwitch, TransitionMotion

Step 8's step 8.1 type-error

Type 'MutationFn<unknown, OperationVariables>' is not an array type.  TS2461

    69 |   });
    70 |
  > 71 |   const [addMessage] = useMutation(addMessageMutation);
       |         ^
    72 |
    73 |   const onSendMessage = useCallback(
    74 |     (content: string) => {

I think line 71 should actually be const addMessage = useMutation(addMessageMutation);

Step 7's step 7.4 unit tests do not fulfil component and function interfaces completely

Property 'history' is missing in type '{}' but required in type 'ChatListProps'.

Line 49 in src/components/ChatsListScreen/ChatsList.test.tsx.

Expected 1 arguments, but got 0.

Line 8 in src/App.test.tsx.

Typescript issues visible in VS Code. Do not crash test run-time.

[Question] How to generate types for graphql

when running yarn generate I get following error (master branch):

⇒  yarn generate
yarn run v1.13.0
$ gql-gen
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate ./src/graphql/types.ts
      ✖ Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate

  Found 1 error

   ✖ ./src/graphql/types.ts
    Error: Failed to load schema

Something went wrong
error Command failed with exit code 1.

In codgen.yml schema should be read from: schema: ../WhatsApp-Clone-Server/schema/typeDefs.ts. But there is no such thing in the server repo (I did yarn generateon the server side)

What am I doing wrong?

In step 6's step 6.6 App.tsx-file is missing an update

In the step 6.6 history-parameter is added to ChatRoomScreenParams, but App.tsx-file is never visibly updated to reflect this change causing a compilation-time error: Property 'history' is missing in type '{ chatId: string; }' but required in type 'ChatRoomScreenParams'. TS2741

Deprecated packages in tutorial

npm WARN deprecated [email protected]: 🚨  
react-testing-library has moved to @testing-library/react. Please uninstall react-testing-library and install @testing-library/react instead, or use an older version of react-testing-library. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)

npm WARN deprecated [email protected]: 🚨 
jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)```

scroll bar - doest stay

Hi, Im trying the step17 infinite scrolling.. one thing i noticed that the scroll bar doesnt stay as we move back to the previous messages, it falls back to the last message. Any ways to restrict it?

(chrome browser).

Another Clone using Stencil & Ionic 4 🚀

Pure Progressive Web Application Example using Stencil and Ionic 4 with;

PWA Support / 100% Lighthouse Audit Result
HMR
Service Worker
Seperate chunks automatically and lazy-loading
https://github.com/ardatan/WhatsApp-Clone-client/

WebSocket connection to 'ws://localhost:4000/graphql' failed: Connection closed before receiving a handshake response

I have cloned the server and client, following the instructions carefully. The folders are placed inside a parent folder called 'whatsapp-clone'.

When I run 'yarn start' on the server it appears to be running o.k.:

$ yarn codegen
$ gql-gen
  ✔ Parse configuration
  ✔ Generate outputs
$ ts-node index.ts
Server is listening on port 4000

But on http://localhost:3000/sign-up, I receive the error

WebSocket connection to 'ws://localhost:4000/graphql' failed: Connection closed before receiving a handshake response

Can you please suggest a fix? Thanks in advance

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Update dependency @types/history to v4.7.11 (master)
Update dependency react-scripts to v3.4.4 (master)
Update dependency typescript to v3.9.10 (master)
Update dependency @types/react-router-dom to v5.3.3 (master)
Update dependency graphql to v15.8.0 (master)
Update graphqlcodegenerator monorepo (master) (@graphql-codegen/add, @graphql-codegen/cli, @graphql-codegen/typescript, @graphql-codegen/typescript-operations, @graphql-codegen/typescript-react-apollo)
Update dependency history to v5 (master) (history, @types/history)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency @types/node to v14.18.63 (master)
Update dependency styled-components to v5.3.11 (master) (styled-components, @types/styled-components)
Update dependency subscriptions-transport-ws to v0.11.0 (master)
Update dependency @types/node to v14.18.63 (master-step1)
Click on this checkbox to rebase all open PRs at once

Detected dependencies

Note

Detected dependencies section has been truncated

circleci

.circleci/config.yml

circleci/node 14.2.0

npm

package.json

@apollo/react-hooks 3.1.5

@graphql-codegen/add 1.14.0

Check this box to trigger a request for Renovate to run again on this repository

Error : useAddChatMutation

Failed to compile.

./src/components/ChatCreationScreen/index.tsx
Module not found: Can't resolve '../../graphql/types' in xxxxxxxxxxxxxxxxxx/WhatsApp-Clone-Client-React/src/components/ChatCreationScreen'

useAddChatMutation not found.

With the latest master...

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.