Step 3, chats not loaded

[baeriswyld]

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 ?

[Gazmos83]

Have you opened the server side on a separate terminal and run 'yarn start'? Both the server and client side need to be running in order for them to communicate with each other.

[kapozade]

Hello @baeriswyld,

I think there are three things that might be the reason of your issue.

• Server is not running. Please make sure that you have executed yarn start or npm start command on your terminal for server application. If this is not the case, look at the next possible issue
• Please debug the output of the process.env.REACT_APP_SERVER_URL value. If it's undefined then make sure that you have installed dotenv package and import it. yarn add dotenv or npm install dotenv. If this is not the case as well, look at the next possible issue.
• If you see an error (not a blank page), the reason might be related to mismatching types between client and server application. Client application expects below types for rendering the screen, but in the tutorial server returns lastMessage as string in a chat.

type Message = {
  id: string;
  content: string;
  createdAt: Date;
};

type Chat = {
  id: string;
  name: string;
  picture: string;
  lastMessage: Message;
};

Therefore please make sure that you are returning an object not a string. In order to do this, you can use below code.

type Message = {
  id: string;
  content: string;
  createdAt: Date;
};

type Chat = {
  id: string;
  name: string;
  picture: string;
  lastMessage: Message;
};

export const messages: Message[] = [
  {
    id: '1',
    content: 'You on your way?',
    createdAt: new Date(Date.now() - 60 * 1000 * 1000),
  },
  {
    id: '2',
    content: "Hey, it's me",
    createdAt: new Date(Date.now() - 2 * 60 * 1000 * 1000),
  },
  {
    id: '3',
    content: 'I should buy a boat',
    createdAt: new Date(Date.now() - 24 * 60 * 1000 * 1000),
  },
  {
    id: '4',
    content: 'This is wicked good ice cream.',
    createdAt: new Date(Date.now() - 14 * 24 * 60 * 1000 * 1000),
  },
];
export const chats: Chat[] = [
  {
    id: '1',
    name: 'Ethan Gonzalez',
    picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
    lastMessage: messages.find((m) => m.id === '1') as Message,
  },
  {
    id: '2',
    name: 'Bryan Wallace',
    picture: 'https://randomuser.me/api/portraits/thumb/men/2.jpg',
    lastMessage: messages.find((m) => m.id === '2') as Message,
  },
  {
    id: '3',
    name: 'Avery Stewart',
    picture: 'https://randomuser.me/api/portraits/thumb/women/1.jpg',
    lastMessage: messages.find((m) => m.id === '3') as Message,
  },
  {
    id: '4',
    name: 'Katie Peterson',
    picture: 'https://randomuser.me/api/portraits/thumb/women/2.jpg',
    lastMessage: messages.find((m) => m.id === '4') as Message,
  },
];

[Urigo]

is this still happening with the new version I've pushed yesterday?

[idkjs]

@Urigo a version of this is still happening on master/final version.

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

MessagesList/<
src/components/ChatRoomScreen/MessagesList.tsx:143

  140 |   isMine={message.isMine}
  141 |   key={message.id}>
  142 |   <Contents data-testid="message-content">{message.content}</Contents>
> 143 |   <Timestamp data-testid="message-date">
      | ^  144 |     {format(message.createdAt, 'HH:mm')}
  145 |   </Timestamp>
  146 | </MessageItem>

MessagesList
src/components/ChatRoomScreen/MessagesList.tsx:136

  133 | 
  134 | return (
  135 |   <Container ref={selfRef}>
> 136 |     {fetching && <LoadingMore>{'Loading more messages...'}</LoadingMore>}
      | ^  137 |     {messages.map((message: any) => (
  138 |       <MessageItem
  139 |         data-testid="message-item"