From b6127de04d5152e6c6ab575d291283d316af8d7c Mon Sep 17 00:00:00 2001 From: "lorenzo.digiacomo" Date: Fri, 9 Aug 2019 18:28:19 +0200 Subject: [PATCH] the id of the chats and messages is generated by the client, optimistic response removechat --- package.json | 3 ++- src/components/ChatCreationScreen/index.tsx | 17 ++++++++++------- src/components/ChatRoomScreen/ChatNavbar.tsx | 4 ++++ src/components/ChatRoomScreen/index.tsx | 13 +++++++------ yarn.lock | 15 +++++++++++---- 5 files changed, 34 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 838f30600..c54e20754 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@types/react-dom": "16.8.5", "@types/react-router-dom": "4.3.4", "@types/styled-components": "4.1.18", + "@types/uuid": "3.4.5", "apollo-cache-inmemory": "1.6.2", "apollo-client": "2.6.3", "apollo-link": "1.2.12", @@ -43,7 +44,7 @@ "styled-components": "4.3.2", "subscriptions-transport-ws": "0.9.16", "typescript": "3.5.3", - "@wora/apollo-offline": "0.1.1" + "@wora/apollo-offline": "0.1.2" }, "scripts": { "prebuild": "yarn codegen", diff --git a/src/components/ChatCreationScreen/index.tsx b/src/components/ChatCreationScreen/index.tsx index a9b3cc858..1f8dc61fb 100644 --- a/src/components/ChatCreationScreen/index.tsx +++ b/src/components/ChatCreationScreen/index.tsx @@ -8,6 +8,7 @@ import ChatCreationNavbar from './ChatCreationNavbar'; import { History } from 'history'; import { useAddChatMutation } from '../../graphql/types'; import { writeChat } from '../../services/cache.service'; +import { v4 as uuid } from "uuid"; // eslint-disable-next-line const Container = styled.div` @@ -21,8 +22,8 @@ const StyledUsersList = styled(UsersList)` `; gql` - mutation AddChat($recipientId: ID!) { - addChat(recipientId: $recipientId) { + mutation AddChat($id: ID!, $recipientId: ID!) { + addChat(id: $id, recipientId: $recipientId) { ...Chat } } @@ -37,20 +38,21 @@ const ChatCreationScreen: React.FC = ({ history }) => { const [addChat] = useAddChatMutation(); const onUserPick = useCallback( - user => addChat({ + user => { + const id: string = uuid(); + addChat({ optimisticResponse: { __typename: 'Mutation', addChat: { __typename: 'Chat', - id: Math.random() - .toString(36) - .substr(2, 9), + id, name: user.name, picture: user.picture, lastMessage: null, }, }, variables: { + id, recipientId: user.id, }, update: (client, { data: { addChat } }) => { @@ -60,7 +62,8 @@ const ChatCreationScreen: React.FC = ({ history }) => { if (result && result.data !== null) { history.push(`/chats/${result.data!.addChat!.id}`); } - }), + }) + }, [addChat, history] ); diff --git a/src/components/ChatRoomScreen/ChatNavbar.tsx b/src/components/ChatRoomScreen/ChatNavbar.tsx index 579e97312..46d21a06b 100644 --- a/src/components/ChatRoomScreen/ChatNavbar.tsx +++ b/src/components/ChatRoomScreen/ChatNavbar.tsx @@ -68,6 +68,10 @@ const ChatNavbar: React.FC = ({ chat, history }) => { variables: { chatId: chat.id, }, + optimisticResponse: { + __typename: 'Mutation', + removeChat: chat.id, + }, update: (client, { data: { removeChat } }) => { eraseChat(client, removeChat); }, diff --git a/src/components/ChatRoomScreen/index.tsx b/src/components/ChatRoomScreen/index.tsx index 1d80607b3..739cc1e26 100644 --- a/src/components/ChatRoomScreen/index.tsx +++ b/src/components/ChatRoomScreen/index.tsx @@ -17,6 +17,8 @@ import { } from '../../graphql/types'; import * as fragments from '../../graphql/fragments'; import { writeMessage } from '../../services/cache.service'; +import { v4 as uuid } from "uuid"; + const Container = styled.div` background: url(/assets/chat-background.jpg); @@ -37,8 +39,8 @@ const getChatQuery = gql` // eslint-disable-next-line const addMessageMutation = gql` - mutation AddMessage($chatId: ID!, $content: String!) { - addMessage(chatId: $chatId, content: $content) { + mutation AddMessage($id: ID!, $chatId: ID!, $content: String!) { + addMessage(id: $id, chatId: $chatId, content: $content) { ...Message } } @@ -122,17 +124,16 @@ const [addMessage] = useAddMessageMutation(); return null; } const chat = data.chat; + const id:string = uuid(); if (chat === null) return null; addMessage({ - variables: { chatId, content }, + variables: { id, chatId, content }, optimisticResponse: { __typename: 'Mutation', addMessage: { __typename: 'Message', - id: Math.random() - .toString(36) - .substr(2, 9), + id, createdAt: new Date(), isMine: true, chat: { diff --git a/yarn.lock b/yarn.lock index 2a557aad4..bb2a3281e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1759,6 +1759,13 @@ "@types/react-native" "*" csstype "^2.2.0" +"@types/uuid@3.4.5": + version "3.4.5" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.5.tgz#d4dc10785b497a1474eae0ba7f0cb09c0ddfd6eb" + integrity sha512-MNL15wC3EKyw1VLF+RoVO4hJJdk9t/Hlv3rt1OL65Qvuadm4BYo6g9ZJQqoq7X8NBFSsQXgAujWciovh2lpVjA== + dependencies: + "@types/node" "*" + "@types/valid-url@1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@types/valid-url/-/valid-url-1.0.2.tgz#60fa435ce24bfd5ba107b8d2a80796aeaf3a8f45" @@ -1954,10 +1961,10 @@ dependencies: "@wora/cache-persist" "^1.0.2" -"@wora/apollo-offline@0.1.1": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@wora/apollo-offline/-/apollo-offline-0.1.1.tgz#b83335b705317857b23b5ac1cefd6e2925c86222" - integrity sha512-rwkodZME7MLUXhDSbfDsyQAYSssKUhC07a7tZ05FB88Xq0XVVJ3untuFM2DwgxTsf7eDKwQaAM1XNOw+919eDw== +"@wora/apollo-offline@0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@wora/apollo-offline/-/apollo-offline-0.1.2.tgz#d80a23d3e8985e4db4b69e682a95ddd69d63fb7b" + integrity sha512-3Ydc2uPNodtiZA7Rzhu1fPKQu3UQgAz05irjnF6eT/tp0CxZBytm/kwfyP7tSeAz+u/Dw1+LiBnTBSOzle2pOg== dependencies: "@wora/apollo-cache" "^0.0.3" "@wora/cache-persist" "^1.1.0"