For the client-side test, I got "16:00" for the content in the date property. This might be due to timezone differences between me and the tutorial writer. Might be a good idea to clarify this.

Also, in vscode, all the setup's in setupTest.ts were ignored by vscode in the test file itself. This was resolved after installing the jest plugin. Could be added to the guide for troubled users.

Hi,

 window.location = {
      href: '/',
    };

produces below error;

Type '{ href: string; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.ts(2740)

Whenever I initiate any sort of request to the server, be it using the provided curl command, or by visiting http://localhost:4000/graphql in the browser, the request always stalls and provides nothing, not even an error.

I've gone through the project with a fine-tooth comb, and cannot find any deviations in my code from the tutorial.

Here's /index.ts:

import { ApolloServer, gql } from 'apollo-server-express';
import cors from 'cors';
import express from 'express';
import { chats } from './db';
import schema from './schema';

const app = express();

app.use(cors());
app.use(express.json);

app.get('/_ping', (req, res) => {
    res.send('pong');
    res.json(chats);
});

const server = new ApolloServer({
    schema,
    //playground: true,
    //introspection: true,
});

server.applyMiddleware({ app, cors: true, path: '/graphql' });


const port = process.env.PORT || 4000;
//process.env.PLAYGROUND_URL = "http://localhost:4000";

app.listen(port, () => {
    console.log(`Server is listening on port ${port}`);
    //console.log(process.env.NODE_ENV);
})

Here is also /schema/resolvers.ts

import { DateTimeResolver, URLResolver } from 'graphql-scalars';
import { chats, messages } from '../db'

const resolvers = {
    Date: DateTimeResolver,
    URL: URLResolver,

    Chat: {
        lastMessage(chat: any) {
            return messages.find(m => m.id === chat.lastMessage);
        },
    },

    Query: {
        chats() {
            return chats;
        },
    },
};

export default resolvers;

I won't bother copying over /schema/index.ts, nor /schema/typeDefs.graphql, nor /db.ts, since they are identical to the tutorial.

those waits don't have any effect , the inputs are already selected with get that would throw if the element was not found

import { createMemoryHistory } from 'history';
import React from 'react';
import { cleanup, render, waitFor, fireEvent } from '@testing-library/react';
import MessageInput from './MessageInput';

describe('MessageInput;', () => {
  afterEach(cleanup);

  it('triggers callback on send button click', async () => {
    const onSendMessage = jest.fn(() => {});

    {
      const { container, getByTestId } = render(
        <MessageInput onSendMessage={onSendMessage} />
      );
      const messageInput = getByTestId('message-input');
      const sendButton = getByTestId('send-button');

      fireEvent.change(messageInput, { target: { value: 'foo' } });

      fireEvent.click(sendButton);

      await waitFor(() => expect(onSendMessage.mock.calls.length).toBe(1));
    }
  });

  it('triggers callback on Enter press', async () => {
    const onSendMessage = jest.fn(() => {});

    {
      const { container, getByTestId } = render(
        <MessageInput onSendMessage={onSendMessage} />
      );
      const messageInput = getByTestId('message-input');

      fireEvent.change(messageInput, { target: { value: 'foo' } });

      fireEvent.keyPress(messageInput, {
        key: 'Enter',
        code: 13,
        charCode: 13,
      });

      await waitFor(() => expect(onSendMessage.mock.calls.length).toBe(1));
    }
  });
});

I think it should be a nice thing to explain to the user what are Environmental Variables and how to create and use a .env file in the application and change the current way the Unsplash API key it's used

headers: {
  Authorization:
    'Client-ID 4d048cfb4383b407eff92e4a2a5ec36c0a866be85e64caafa588c110efad350d',
},

EDIT
This course is so extensive and full of teachings that I forgot that the .env file is actually explained in Step 3 > Client 3.1
So maybe just create one for the server and add the Unsplash API key to it?

I tried submitting an edit via the tortilla interface. I keep getting uri too long error. FYI.

There is an error here.

I followed every step but when i type yarn start in both client and server folder it gives me error how I can fix this issue.

TypeError: _useQuery.data is undefined
ChatRoomScreen
src/components/ChatRoomScreen/index.tsx:56

  53 | const ChatRoomScreen: React.FC<ChatRoomScreenParams> = ({
  54 |     history,
  55 |     chatId,
> 56 |   }) => {
  57 |     const client = useApolloClient();
  58 |     const {
  59 |       data: { chat },

change the script from "format": "prettier '**/*.ts' --write" to "format": "prettier \"**/*.ts\" --write"

notice the escaped quotes.

a small bug (i think)

app.tsx should have history = createBrowserHistory and pass that object onto chatScreen no?

The import of the useMessageAddedSubscription is duplicated on Client Step 12.3: Write chat on chatAdded

It should be imported just once or it will throw an error

Just remove one of them

import { DataProxy } from 'apollo-cache';
import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
import * as fragments from '../graphql/fragments';
import * as queries from '../graphql/queries';
import {
  MessageFragment,
  ChatsQuery,
  ChatFragment,
  useMessageAddedSubscription,
  useChatAddedSubscription,
} from '../graphql/types';

The Client step 15.10 is not displaying the files changed.

I checked the code but I did not find anything wrong with it.

curl localhost:4000/_ping
curl: (7) Failed to connect to localhost port 4000: Connection refused

modify schema/resolvers.ts

Lines 36-37 create a pretty annoying bug.

const lastMessageId = chat.messages[chat.messages.length - 1];
const messageId = String(Number(lastMessageId) + 1);

So what happens here is that when using the tutorial app depending on scenario you're re-using IDs on "database". I can see this has already been fixed on https://github.com/Urigo/WhatsApp-Clone-Server , but the tutorial still has this bug

...or maybe this bug always was only on tutorial, couldn't find the exact commit which would show this bug getting fixed.

There seems to be a problem with running this code. It happens in the index.tsx script located in the ChatRoomScreen folder on line 59 where you try to extract the chat object from the data object returned by the useQuery hook. The error that appears is "cannot read property chat of undefined". Seems to me that at the moment of extracting the chat object apollo is still loading the results, therefore data is still empty. Could you please take a look into it or tell me if I'm doing or if I understood something wrong.

Thanks

The server step referenced here is giving a NOT FOUND! message.

I did not submit a PR to remove it because I thought that maybe the problem is that the reference to the files is missing or a similar issue.

The Markdown Bash code block in this section is not displaying properly

I think it is a problem related to the way the Markdown is rendered by Tortilla because GitHub renders the same code properly.

Welcome to psql 7.4.16, the PostgreSQL interactive terminal.

Type:  \\copyright for distribution terms
       \\h for help with SQL commands
       \\? for help on internal slash commands
       \\g or terminate with semicolon to execute query
       \\q to quit

template1

I'm getting an error when using fetch in the test:

Property 'mockResponseOnce' does not exist on type '{ (input: RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<Response>; }'.ts(2339)

This is resolved by using fetchMock instead - should this be updated in the tutorial?

Hi,

The server-side code is OK but the reference to the client-side ChatsList component feels a bit weird.

// The chat will appear at the top of the ChatsList component

It implies that the service is making assumptions on the client-side usage and implementation, whereas it should really be the client relying on documented service API.

While it might make sense for the service to present its data in a (documented) particular order, it should not have to do so in order to achieve a specific result client-side, expecting it to display the data in the same order.

I'd rather expect server-side documentation that the chats are provided in a specific order, and client-side comments explaining that no reordering is necessary because the service API is designed that way, or explicit reordering client-side.

In this section, the key for each StyledListItem changes from key={chat.id} to key={chat!.id}. This exclamation mark vanishes in future steps. Why would we want an exclamation mark? Is this an error?

Running yarn format on Windows produces the error "No matching files." due to the single quotes. It works when removing the quotes in the command.

{
  "name": "whatsapp-clone-client",
  "version": "0.1.0",
  "private": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/Urigo/WhatsApp-Clone-Client-React.git"
  },
  "dependencies": {
    "@types/jest": "24.0.15",
    "@types/node": "12.0.10",
    "@types/react": "16.8.22",
    "@types/react-dom": "16.8.4",
    "prettier": "1.18.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.5.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "TZ=\"Asia/Jerusalem\" react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier **/*.{ts,tsx,css,graphql} --write"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

We should create a browser history and pass it to ChatsList component...

import React from 'react';
import ReactDOM from 'react-dom';
import {
  cleanup,
  render,
  fireEvent,
  wait,
  waitForDomChange,
} from '@testing-library/react';
import ChatsList from './ChatsList';
import { createBrowserHistory } from 'history';

describe('ChatsList', () => {
  afterEach(() => {
    cleanup();
    delete window.location;

    window.location = {
        href: '/',
    };
  });

  it('renders fetched chats data', async () => {
    fetchMock.mockResponseOnce(
      JSON.stringify({
        data: {
          chats: [
            {
              id: 1,
              name: 'Foo Bar',
              picture: 'https://localhost:4000/picture.jpg',
              lastMessage: {
                id: 1,
                content: 'Hello',
                createdAt: new Date('1 Jan 2019 GMT'),
              },
            },
          ],
        },
      })
    );
	const history = createBrowserHistory();
    {
      const { container, getByTestId } = render(<ChatsList history={history} />);

      await waitForDomChange({ container });

      expect(getByTestId('name')).toHaveTextContent('Foo Bar');
      expect(getByTestId('picture')).toHaveAttribute(
        'src',
        'https://localhost:4000/picture.jpg'
      );
      expect(getByTestId('content')).toHaveTextContent('Hello');
      expect(getByTestId('date')).toHaveTextContent('02:00');
    }
  });

  it('should navigate to the target chat room on chat item click', async () => {
    fetchMock.mockResponseOnce(
      JSON.stringify({
        data: {
          chats: [
            {
              id: 1,
              name: 'Foo Bar',
              picture: 'https://localhost:4000/picture.jpg',
              lastMessage: {
                id: 1,
                content: 'Hello',
                createdAt: new Date('1 Jan 2019 GMT'),
              },
            },
          ],
        },
      })
    );

    const history = createBrowserHistory();

    {
      const { container, getByTestId } = render(
        <ChatsList history={history} />
      );

      await waitForDomChange({ container });

      fireEvent.click(getByTestId('chat'));

      await wait(() => expect(history.location.pathname).toEqual('/chats/1'));
    }
  });
});

Hello there.
I'm trying to follow the tutorial. Although I'm not a beginner, I've changed career some years ago so I'm not coding as much as I used to, at least not professionally. So I'm reading to learn about GraphQL and maybe something else I don't know.

My English isn't very good, so please, don't get offended if something I say sounds a little off or rude, sometimes the expressions doesn't translate well from one language to another.

I'm trying to be open-minded about the tutorial because I think tortilla.academy is a very good idea.
So I will try to give some impressions while I follow it instead of just ignoring potential problems.

I think this section is not adequate written.

You show the src/App.tsx file but start talking about things which is not really related to the file or the section.
Why are you talking about defining a constant if there is no constant defined on the file to be found?
Why are you talking about arrow functions if there is no arrow functions on the file?

Even as I'm not a beginner, for a moment I got confused thinking I've missed something on the tutorial or thinking I was opening the wrong file.

Javascript/Typescrit is said as prerequisite to WhatsApp Clone tutorial in Step 0, so I don't think it's a good idea to suddenly try to teach basic Javascript concepts randomly specially if there is no direct reference to it in the file/section being discussed in question.

Maybe it was copy/paste in the wrong section for some reason?

Non-related issue, when I raised this issue, the issue title didn't automatically fill, it should passed the step/section name/number automatically in the url shouldn't?

I got error as follows :

error TS2345: Argument of type 'ApolloServer' is not assignable to parameter of type 'ApolloServerBase'.
Types have separate declarations of a private property 'logger'.
12 const { query } = createTestClient(server);
when I changed code to as follows the test got run :
const server = new ApolloServer({ schema }) as any;

Lack of tests/global-setup.ts given in the tutorial, have to navigate to github to get the code

participantId has type any.

The edits look like this example:

const participantId:string = chat.participants.find((p:User) => p !== currentUser.id);

This version of complete file compiles:

import { withFilter } from 'apollo-server-express';
import { DateTimeResolver, URLResolver } from 'graphql-scalars';
import { User, Message, Chat, chats, messages, users } from '../db';
import { Resolvers } from '../types/graphql';
import { secret, expiration } from '../env';
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { validateLength, validatePassword } from '../validators';

const resolvers: Resolvers = {
  Date: DateTimeResolver,
  URL: URLResolver,

  Message: {
    chat(message) {
      return (
        chats.find((c) => c.messages.some((m) => m === message.id)) || null
      );
    },

    sender(message) {
      return users.find((u) => u.id === message.sender) || null;
    },

    recipient(message) {
      return users.find((u) => u.id === message.recipient) || null;
    },

    isMine(message, args, { currentUser }) {
      return message.sender === currentUser.id;
    },
  },

  Chat: {
    name(chat, args, { currentUser }) {
      if (!currentUser) return null;

      const participantId:string = chat.participants.find((p:User) => p !== currentUser.id);

      if (!participantId) return null;

      const participant = users.find((u) => u.id === participantId);

      return participant ? participant.name : null;
    },

    picture(chat, args, { currentUser }) {
      if (!currentUser) return null;

      const participantId:string = chat.participants.find((p:User) => p !== currentUser.id);

      if (!participantId) return null;

      const participant = users.find((u) => u.id === participantId);

      return participant ? participant.picture : null;
    },

    messages(chat) {
      return messages.filter((m) => chat.messages.includes(m.id));
    },

    lastMessage(chat) {
      const lastMessage = chat.messages[chat.messages.length - 1];

      return messages.find((m) => m.id === lastMessage) || null;
    },

    participants(chat) {
      return chat.participants
        .map((p:User) => users.find((u:User) => u.id === p.id))
        .filter(Boolean) as User[];
    },
  },

  Query: {
    me(root, args, { currentUser }) {
      return currentUser || null;
    },
    chats(root, args, { currentUser }) {
      if (!currentUser) return [];

      return chats.filter((c) => c.participants.includes(currentUser.id));
    },

    chat(root, { chatId }, { currentUser }) {
      if (!currentUser) return null;

      const chat = chats.find((c) => c.id === chatId);

      if (!chat) return null;

      return chat.participants.includes(currentUser.id) ? chat : null;
    },

    users(root, args, { currentUser }) {
      if (!currentUser) return [];

      return users.filter((u) => u.id !== currentUser.id);
    },
  },

  Mutation: {
    signIn(root, { username, password }, { res }) {
      const user = users.find((u) => u.username === username);

      if (!user) {
        throw new Error('user not found');
      }

      const passwordsMatch = bcrypt.compareSync(password, user.password);

      if (!passwordsMatch) {
        throw new Error('password is incorrect');
      }

      const authToken = jwt.sign(username, secret);

      res.cookie('authToken', authToken, { maxAge: expiration });

      return user;
    },
    signUp(root, { name, username, password, passwordConfirm }) {
      validateLength('req.name', name, 3, 50);
      validateLength('req.username', username, 3, 18);
      validatePassword('req.password', password);
 
      if (password !== passwordConfirm) {
        throw Error("req.password and req.passwordConfirm don't match");
      }
 
      if (users.some(u => u.username === username)) {
        throw Error('username already exists');
      }
 
      const passwordHash = bcrypt.hashSync(password, bcrypt.genSaltSync(8));
 
      const user: User = {
        id: String(users.length + 1),
        password: passwordHash,
        picture: '',
        username,
        name,
      };
 
      users.push(user);
 
      return user;
    },
    addMessage(root, { chatId, content }, { currentUser, pubsub }) {
      if (!currentUser) return null;

      const chatIndex = chats.findIndex((c) => c.id === chatId);

      if (chatIndex === -1) return null;

      const chat = chats[chatIndex];
      if (!chat.participants.includes(currentUser.id)) return null;

      const messagesIds = messages.map((currentMessage) =>
        Number(currentMessage.id)
      );
      const messageId = String(Math.max(...messagesIds) + 1);
      const message: Message = {
        id: messageId,
        createdAt: new Date(),
        sender: currentUser.id,
        recipient: chat.participants.find(
          (p) => p !== currentUser.id
        ) as string,
        content,
      };

      messages.push(message);
      chat.messages.push(messageId);
      // The chat will appear at the top of the ChatsList component
      chats.splice(chatIndex, 1);
      chats.unshift(chat);

      pubsub.publish('messageAdded', {
        messageAdded: message,
      });

      return message;
    },

    addChat(root, { recipientId }, { currentUser, pubsub }) {
      if (!currentUser) return null;
      if (!users.some((u) => u.id === recipientId)) return null;

      let chat = chats.find(
        (c) =>
          c.participants.includes(currentUser.id) &&
          c.participants.includes(recipientId)
      );

      if (chat) return chat;

      const chatsIds = chats.map((c) => Number(c.id));

      chat = {
        id: String(Math.max(...chatsIds) + 1),
        participants: [currentUser.id, recipientId],
        messages: [],
      };

      chats.push(chat);

      pubsub.publish('chatAdded', {
        chatAdded: chat,
      });

      return chat;
    },

    removeChat(root, { chatId }, { currentUser, pubsub }) {
      if (!currentUser) return null;

      const chatIndex = chats.findIndex((c) => c.id === chatId);

      if (chatIndex === -1) return null;

      const chat = chats[chatIndex];

      if (!chat.participants.some((p) => p === currentUser.id)) return null;

      chat.messages.forEach((chatMessage) => {
        const chatMessageIndex = messages.findIndex(
          (m) => m.id === chatMessage
        );

        if (chatMessageIndex !== -1) {
          messages.splice(chatMessageIndex, 1);
        }
      });

      chats.splice(chatIndex, 1);

      pubsub.publish('chatRemoved', {
        chatRemoved: chat.id,
        targetChat: chat,
      });

      return chatId;
    },
  },

  Subscription: {
    messageAdded: {
      subscribe: withFilter(
        (root, args, { pubsub }) => pubsub.asyncIterator('messageAdded'),
        ({ messageAdded }, args, { currentUser }) => {
          if (!currentUser) return false;

          return [messageAdded.sender, messageAdded.recipient].includes(
            currentUser.id
          );
        }
      ),
    },

    chatAdded: {
      subscribe: withFilter(
        (root, args, { pubsub }) => pubsub.asyncIterator('chatAdded'),
        ({ chatAdded }: { chatAdded: Chat }, args, { currentUser }) => {
          if (!currentUser) return false;

          return chatAdded.participants.some((p) => p === currentUser.id);
        }
      ),
    },

    chatRemoved: {
      subscribe: withFilter(
        (root, args, { pubsub }) => pubsub.asyncIterator('chatRemoved'),
        ({ targetChat }: { targetChat: Chat }, args, { currentUser }) => {
          if (!currentUser) return false;

          return targetChat.participants.some((p) => p === currentUser.id);
        }
      ),
    },
  },
};

export default resolvers;

When the commit code is referenced in the Client Step 13.2 there is a

404: Not Found

I believe that testing has changed in the latest version of create-react-app. setupTests.ts is no longer run before all tests with the guide's setup.

We have a team now working on validating tutorials and if someone is the middle of the steps and entire tutorial recieves update it is hard currently to figure it out what has changed in other steps.

What is the recommendation in this case (update happens while you are in the middle of the tutorial)?

Is it possible to see what was changed in the previous steps?
I know it is possible to get the most recent step source code so there is not an issue, but I'm curious if there is way to actually see all changes that happened in an update for previous steps?

On Step 15. Server Step 12.1: Retrieve profile picture from REST API the submit button to propose code changes is not working properly and rediects to a Your request URL is too long. page.

First off, thanks so much for creating this tutorial. It is truly amazing.

I was following along but then decided to clone from step 16 to have a look at the finished project. After the clone, I ran the "yarn prestart" and "yarn prebuild" but I'm getting this error still.
Module not found: Can't resolve '../../graphql/types' in '/Users/ryanlozon/code/WhatsApp-Clone-Tutorial/client/WhatsApp-Clone-Client-React/src/components/ChatCreationScreen'

It looks like the when I navigate to the graphql folder on the client there is indeed no types folder, however there is a "types.tsx."

I'm rather new to typescript and codegen so I apologize if it is a straight forward question, I just couldn't find any other answers online.

Thank you for your time.

with ts-node-dev, you get a watch mode that restarts the server when a file is changed

What is the purpose of this step? thank you

Hi,

I've just added ChatsList.test.tsx in the same way as in the tutorial. However, receiving below UnhandledPromiseRejectionWarning. Am I missing something?

Thanks

(node:5312) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:5312) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 FAIL  src/components/ChatsListScreen/ChatsList.test.tsx (17.288s)
  ● ChatsList › renders fetched chats data

    expect(element).toHaveTextContent()

    Expected element to have text content:
      02:00
    Received:
      03:00

In step 15 it is recommended to use the Chrome extension Advanced Rest Client to retrieve the Unsplash API response. The problem is that this tool is deprecated and warned both, on the Chrome Store page and on its GitHub repository.

I suggest correcting it by referring to the Desktop version or another tool like Postman.

I was getting an empty screen after Part13/Authentication so I downloaded the example server from Server Step 10.3: Get current user from auth token and the example client from Client Step 13.6: Split AuthScreen into SignInForm and SignUpForm to test.

I got the same result so looks like you are missing something there. FYI.

I am getting the following error while running the client application.

This expression is not callable.
Each member of the union type '(<T = any, TVariables = OperationVariables>(options: Fragment, optimistic?: boolean | undefined) => T | null) | (<FragmentType, TVariables = any>(options: Fragment, optimistic?: boolean | undefined) => FragmentType | null)' has signatures, but none of those signatures are compatible with each other. TS2349

50 |   }
51 |   try {

52 | fullChat = client.readFragment({
| ^
53 | id: chatIdFromStore,
54 | fragment: fragments.fullChat,
55 | fragmentName: 'FullChat',

Hi,

First of all, fantastic tutorial !!!

I have followed all your steps until the end of Step 3 https://github.com/Urigo/WhatsApp-Clone-Tutorial/blob/master/.tortilla/manuals/views/step3.md

The server is up:
curl localhost:4000/chats response is:
[{"id":"1","name":"Ethan Gonzalez","picture":"https://randomuser.me/api/portraits/thumb/men/1.jpg","lastMessage":"1"},{"id":"2","name":"Bryan Wallace","picture":"https://randomuser.me/api/portraits/thumb/men/2.jpg","lastMessage":"2"},{"id":"3","name":"Avery Stewart","picture":"https://randomuser.me/api/portraits/thumb/women/1.jpg","lastMessage":"3"},{"id":"4","name":"Katie Peterson","picture":"https://randomuser.me/api/portraits/thumb/women/2.jpg","lastMessage":"4"}]%

However, when going back to React app and adding .env to the root with REACT_APP_SERVER_URL=http://localhost:4000

and editing ChatsList.tsx the following:

const ChatsList = () => {
  const [chats, setChats] = useState<any[]>([]);

  useMemo(async () => {
    const body = await fetch(`${process.env.REACT_APP_SERVER_URL}/chats`);
    console.log(body)
    const chats = await body.json();
    setChats(chats);
  }, []);

  return (
    <Container>
      <StyledList>
        {chats.map(chat => (
          <StyledListItem key={chat!.id} button>
            <ChatInfo>
              <ChatName>{chat.name}</ChatName>
              {chat.lastMessage && (
                <React.Fragment>
                  <MessageContent>{chat.lastMessage.content}</MessageContent>
                  <MessageDate>
                    {moment(chat.lastMessage.createdAt).format('HH:mm')}
                  </MessageDate>
                </React.Fragment>
              )}
            </ChatInfo>
          </StyledListItem>
        ))}
      </StyledList>
    </Container>
  );
}; 

The chats doent show up in the application anymore.
Any idea what i do wrong ?

Hi,
How can I add @client directive from client side schema?
Thanks

chat.lastMessage.createdAt is a date object, it can't be displayed as a string. chat.lastMessage.createdAt.toDateString() is okay temporarily.

After having gone through all of the steps in section 8, I'm running into a problem where the app crashes when clicking on a chat returning with the error: Cannot read property 'chat' of undefined. It appears to be stemming from ChatRoomScreen line 66, which doesn't make it any more clear.

I finally gave up debugging it and cloned the git repo at the exact steps I had finished at and it appears I'm also receiving the error there as well. Are you able to reproduce on your end?

I'm using master-step8 for the client and master-step6 which appear to align with the project at the end of step 8

Hi there, thanks for this awesome tutorial, I think material-ui changed MuiThemeProvider to ThemeProvider

https://github.com/mui-org/material-ui/blob/master/examples/create-react-app-with-typescript/src/index.tsx

In the docs, it says "Remember to run yarn prettier before you commit your changes!" That gave me a command-line error because no files were given nor specified. Perhaps, you should change the suggested command to yarn format?

The nice new Guild's banner is overlapping with the side menu.

I cloned the final repository for both server and client and run the necessary yarn installs and tests and everything passes. Now when I run yarn start, this error message comes up...

  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 |       />

Hey!

In the tutorial, in chapter 11, Client step 11.1, there seems to be a missing instruction to add isMine inside of the Message fragment in src/graphql/fragments/message.fragment.ts.

The change was made in this commit.

{
  "name": "whatsapp-clone-server",
  "description": "A newly created Tortilla project",
  "repository": {
    "type": "git",
    "url": "https://github.com/Urigo/WhatsApp-Clone-Server.git"
  },
  "private": true,
  "scripts": {
    "start": "ts-node index.ts",
    "format": "prettier \"**/*.ts\" --write"
  },
  "devDependencies": {
    "@types/express": "4.17.6",
    "@types/node": "14.0.4",
    "prettier": "2.0.5",
    "ts-node": "8.10.1",
    "typescript": "3.9.3"
  },
  "dependencies": {
    "express": "4.17.1"
  }
}

license. is missing

fixing date test. Date from 2:00 to correct 21:00

import React from 'react';
import ReactDOM from 'react-dom';
import { cleanup, render, waitForDomChange } from '@testing-library/react';
import ChatsList from './ChatsList';

describe('ChatsList', () => {
  afterEach(cleanup);

  it('renders fetched chats data', async () => {
    fetchMock.mockResponseOnce(
      JSON.stringify({
        data: {
          chats: [
            {
              id: 1,
              name: 'Foo Bar',
              picture: 'https://localhost:4000/picture.jpg',
              lastMessage: {
                id: 1,
                content: 'Hello',
                createdAt: new Date('1 Jan 2019 GMT'),
              },
            },
          ],
        },
      })
    );

    {
      const { container, getByTestId } = render(<ChatsList />);

      await waitForDomChange({ container });

      expect(getByTestId('name')).toHaveTextContent('Foo Bar');
      expect(getByTestId('picture')).toHaveAttribute(
        'src',
        'https://localhost:4000/picture.jpg'
      );
      expect(getByTestId('content')).toHaveTextContent('Hello');
      expect(getByTestId('date')).toHaveTextContent('21:00');
    }
  });
});

I tried using yarn add <package-name> to install the latest version of each package. However, what it did was just add a ^ in front of each package version. Is the description of yarn add <package-name> inaccurate?

'''

Module '"../../../../../../Development/whatsapp/waclone/node_modules/@types/testing-library__react"' has no exported member 'waitFor'

'''

What's the best course of action, here?