Urigo / WhatsApp-Clone-Client-React

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial
https://tortilla.academy
613 stars 143 forks source link

Issue with date format #1563

Open idkjs opened 4 years ago

idkjs commented 4 years ago

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.