53 |
55 | {conversationName}
54 |
56 | {
57 | messages.map((m, i) => {
58 | return (
59 |
78 | )
79 | }
80 | }
81 |
82 | function checkSenderForMessageStyle(username, message) {
83 | if (username === message.authorId) {
84 | return {
85 | backgroundColor: '#1b86ff',
86 | marginLeft: 50
87 | }
88 | } else {
89 | return { marginRight: 50 }
90 | }
91 | }
92 |
93 | function checkSenderForTextStyle(username, message) {
94 | if (username === message.authorId) {
95 | return {
96 | color: 'white'
97 | }
98 | }
99 | }
100 |
101 | const styles = {
102 | conversationNameContainer: {
103 | backgroundColor: '#fafafa',
104 | padding: 20,
105 | borderBottom: '1px solid #ddd'
106 | },
107 | conversationName: {
108 | margin: 0,
109 | fontSize: 16,
110 | fontWeight: 500
111 | },
112 | scroller: {
113 | float:"left", clear: "both"
114 | },
115 | messagesContainer: {
116 | height: 'calc(100vh - 219px)',
117 | overflow: 'scroll',
118 | },
119 | message: {
120 | backgroundColor: "#ededed",
121 | borderRadius: 10,
122 | margin: 10,
123 | padding: 20
124 | },
125 | messageText: {
126 | margin: 0
127 | },
128 | input: {
129 | height: 45,
130 | outline: 'none',
131 | border: '2px solid #ededed',
132 | margin: 5,
133 | borderRadius: 30,
134 | padding: '0px 20px',
135 | fontSize: 18,
136 | width: 'calc(100% - 54px)'
137 | },
138 | inputContainer: {
139 | width: '100%',
140 | position: 'absolute',
141 | bottom: 50,
142 | left: 0,
143 | }
144 | }
145 |
146 | const ConversationWithData = compose(
147 | graphql(getConvo, {
148 | options: props => {
149 | const { conversationId } = props.match.params
150 | return {
151 | variables: {
152 | id: conversationId
153 | },
154 | fetchPolicy: 'cache-and-network'
155 | }
156 | },
157 | props: props => {
158 | const { conversationId } = props.ownProps.match.params
159 | let messages = props.data.getConvo ?
160 | props.data.getConvo.messages.items
161 | : []
162 | return {
163 | messages,
164 | data: props.data,
165 | subscribeToNewMessages: params => {
166 | props.data.subscribeToMore({
167 | document: OnCreateMessage,
168 | variables: { messageConversationId: conversationId },
169 | updateQuery: (prev, { subscriptionData: { data : { onCreateMessage } } }) => {
170 |
171 | let messageArray = prev.getConvo.messages.items.filter(message => message.id !== onCreateMessage.id)
172 | messageArray = [
173 | ...messageArray,
174 | onCreateMessage,
175 | ]
176 |
177 | return {
178 | ...prev,
179 | getConvo: {
180 | ...prev.getConvo,
181 | messages: {
182 | ...prev.getConvo.messages,
183 | items: messageArray
184 | }
185 | }
186 | }
187 | }
188 | })
189 | },
190 | }
191 | }
192 | }),
193 | graphql(CreateMessage, {
194 | options: (props) => {
195 | const { conversationId } = props.match.params
196 | return {
197 | update: (dataProxy, { data: { createMessage } }) => {
198 |
199 | const query = getConvo
200 | const data = dataProxy.readQuery({ query, variables: { id: conversationId } })
201 |
202 | data.getConvo.messages.items = data.getConvo.messages.items.filter(m => m.id !== createMessage.id)
203 |
204 | data.getConvo.messages.items.push(createMessage)
205 |
206 | dataProxy.writeQuery({ query, data, variables: { id: conversationId } })
207 | }
208 | }
209 | },
210 | props: (props) => ({
211 | createMessage: message => {
212 | props.mutate({
213 | variables: message,
214 | optimisticResponse: {
215 | createMessage: { ...message, __typename: 'Message' }
216 | }
217 | })
218 | }
219 | }),
220 | }),
221 | // graphqlMutation(createMessage, getConvo, 'Message')
222 | )(Conversation)
223 |
224 | export default observer(ConversationWithData)
--------------------------------------------------------------------------------
/src/components/Conversations.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css } from 'glamor'
3 | import { observer } from 'mobx-react'
4 | import { graphql, compose } from 'react-apollo'
5 | import { FaComments, FaChevronRight } from 'react-icons/fa'
6 | import { Link } from 'react-router-dom'
7 |
8 | import UserStore from '../mobx/UserStore'
9 | import { primary, lightBg } from '../theme'
10 | import { getUserAndConversations } from '../graphql'
11 |
12 | const ConversationsObserver = observer(
13 | class Conversations extends React.Component {
14 | render() {
15 | const { username } = UserStore
16 | let { conversations } = this.props
17 |
18 | conversations = conversations.map((c) => {
19 | const convo = c.conversation.name.split('&')
20 | const name = convo.find(i => i !== username)
21 | return { ...c, name }
22 | })
23 | return (
24 |
60 |
62 | )
63 | })
64 | }
65 | {m.content}
61 | this.div = val} {...css(styles.scroller)} />
66 |
67 |
68 |
76 |
77 |
25 |
40 | )
41 | }
42 | }
43 | )
44 |
45 | const ConversationsWithData = compose(
46 | graphql(getUserAndConversations, {
47 | options: () => {
48 | return {
49 | variables: {
50 | id: UserStore.username
51 | },
52 | fetchPolicy: 'cache-and-network'
53 | }
54 | },
55 | props: props => {
56 | return {
57 | conversations: props.data.getUser ? props.data.getUser.conversations.items : []
58 | }
59 | }
60 | })
61 | )(ConversationsObserver)
62 |
63 | const styles = {
64 | link: {
65 | textDecoration: 'none',
66 | color: 'black'
67 | },
68 | container: {
69 | padding: 10
70 | },
71 | conversation: {
72 | marginTop: 10,
73 | backgroundColor: lightBg,
74 | padding: '12px 15px',
75 | borderRadius: 20,
76 | display: 'flex'
77 | },
78 | conversationTitle: {
79 | margin: 0,
80 | marginLeft: 12
81 | },
82 | chevronContainer: {
83 | flex: 1, display: 'flex', justifyContent: 'flex-end'
84 | },
85 | title: {
86 | fontSize: 20,
87 | fontWeight: 500,
88 | margin: 0,
89 | borderBottom: `2px solid ${primary}`,
90 | paddingBottom: 4
91 | }
92 | }
93 |
94 | export default observer(ConversationsWithData)
95 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { css } from 'glamor'
4 | import { Link, withRouter } from 'react-router-dom'
5 |
6 | import { primary } from '../theme'
7 |
8 | class Footer extends React.Component {
9 | render() {
10 | return (
11 | Conversations
26 | { 27 | conversations.map((item, i) => ( 28 | 29 |
30 |
36 |
37 | ))
38 | }
39 | {item.name}
32 |
33 |
35 |
12 |
16 |
31 | )
32 | }
33 | }
34 |
35 | const styles = {
36 | footer: {
37 | height: 50,
38 | backgroundColor: primary,
39 | position: 'absolute',
40 | bottom: 0,
41 | left: 0,
42 | width: '100%',
43 | display: 'flex'
44 | },
45 | button: {
46 | width: '50%',
47 | display: 'flex',
48 | justifyContent: 'center',
49 | alignItems: 'center',
50 | textDecoration: 'none',
51 | color: 'black'
52 | },
53 | buttonText: {
54 | fontWeight: 500
55 | }
56 | }
57 |
58 | export default withRouter(Footer)
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css } from 'glamor'
3 | import { Link } from 'react-router-dom'
4 |
5 | import { primary } from '../theme'
6 |
7 | const chatLogo = require('../assets/chattlogo.png')
8 |
9 | class Header extends React.Component {
10 | render() {
11 | return (
12 | Convos
17 | 18 | 22 |Users
23 | 24 | 28 |Profile
29 | 30 |
13 |
14 | 
19 |
20 |
21 | )
22 | }
23 | }
24 |
25 | const styles = {
26 | container: {
27 | height: 55,
28 | backgroundColor: primary,
29 | display: 'flex',
30 | alignItems: 'center',
31 | position: 'absolute',
32 | top: 0,
33 | left: 0,
34 | width: '100%'
35 | },
36 | logo: {
37 | height: 34,
38 | paddingLeft: 10
39 | }
40 | }
41 |
42 | export default Header
--------------------------------------------------------------------------------
/src/components/Loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css } from 'glamor'
3 |
4 | import { primary } from '../theme'
5 |
6 | const chatLogo = require('../assets/chattlogo.png')
7 |
8 | const Loading = () => (
9 |
10 |
18 | )
19 |
20 | const styles = {
21 | container: {
22 | height: '100vh',
23 | backgroundColor: primary
24 | },
25 | logoWrapper: {
26 | display: 'flex',
27 | flex: 1,
28 | height: '100%',
29 | justifyContent: 'center',
30 | alignItems: 'center'
31 | },
32 | logo: {
33 | height: 60,
34 | width: 255
35 | }
36 | }
37 |
38 | export default Loading
--------------------------------------------------------------------------------
/src/components/Overlay.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css } from 'glamor'
3 | import { API, graphqlOperation } from 'aws-amplify'
4 |
5 | import { primary } from '../theme'
6 | import { createConvo, createConvoLink } from '../graphql'
7 |
8 | class Overlay extends React.Component {
9 | state = { creatingConversation: false }
10 | createConversation = async () => {
11 | this.setState({ creatingConversation: true })
12 | try {
13 | const { username, user: { username: otherUserName }} = this.props
14 | const members = [username, otherUserName].sort()
15 | const conversationName = members.join(' and ')
16 | const convo = { name: conversationName, members }
17 | const conversation = await API.graphql(graphqlOperation(createConvo, convo))
18 | const { data: { createConvo: { id: convoLinkConversationId }}} = conversation
19 | this.props.history.push(`/conversation/${convoLinkConversationId}/${conversationName}`)
20 | const relation1 = { convoLinkUserId: username, convoLinkConversationId }
21 | const relation2 = { convoLinkUserId: otherUserName, convoLinkConversationId }
22 | await API.graphql(graphqlOperation(createConvoLink, relation1))
23 | await API.graphql(graphqlOperation(createConvoLink, relation2))
24 | this.props.history.push(`/conversation/${convoLinkConversationId}/${conversationName}`)
25 | } catch (err) {
26 | console.log('error creating conversation...', err)
27 | }
28 | }
29 | render() {
30 | const { user: { username } } = this.props
31 | return (
32 |
11 |
16 |
17 |
33 |
45 | )
46 | }
47 | }
48 |
49 | export default Overlay
50 |
51 | const styles = {
52 | button: {
53 | backgroundColor: primary,
54 | padding: 15,
55 | margin: 10,
56 | marginTop: 0,
57 | cursor: 'pointer'
58 | },
59 | cancel: {
60 | backgroundColor: '#ededed'
61 | },
62 | divider: {
63 | width: 200,
64 | margin: '0 auto',
65 | height: 2,
66 | backgroundColor: 'rgba(0, 0, 0, .15)',
67 | marginBottom: 17,
68 | borderRadius: 10
69 | },
70 | buttonText: {
71 | margin: 0,
72 | textAlign: 'center',
73 | fontWeight: 700
74 | },
75 | greetingTitle: {
76 | fontSize: 24,
77 | textAlign: 'center',
78 | margin: 0,
79 | fontWeight: 500
80 | },
81 | greeting: {
82 | fontSize: 16,
83 | textAlign: 'center',
84 | marginTop: 5,
85 | color: 'rgba(0, 0, 0, .55)'
86 | },
87 | container: {
88 | position: 'absolute',
89 | borderRadius: 25,
90 | zIndex: 1000,
91 | left: 20,
92 | bottom: 180,
93 | top: 180,
94 | right: 20,
95 | backgroundColor: 'white',
96 | boxShadow: '0px 1px 3px rgba(0, 0, 0, .2)'
97 | },
98 | content: {
99 | display: 'flex',
100 | flexDirection: 'column',
101 | height: 'calc(100vh - 360px)',
102 | flex: 1,
103 | justifyContent: 'center',
104 | }
105 | }
--------------------------------------------------------------------------------
/src/components/Profile.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { css } from 'glamor'
4 | import { Auth } from 'aws-amplify'
5 | import { observer } from 'mobx-react'
6 |
7 | import UserStore from '../mobx/UserStore'
8 | import { primary } from '../theme'
9 |
10 | const ProfileWithData = observer(class Profile extends React.Component {
11 | signOut = async () => {
12 | try {
13 | await Auth.signOut()
14 | } catch (err) {
15 | console.log('error signing out')
16 | }
17 | }
18 | render() {
19 | const { username, email } = UserStore
20 | return (
21 |
34 |
44 | New Conversation
35 |Create new conversation with {username}?
36 | 37 |
38 |
40 | Yes
39 | this.props.toggleOverlay(false)}>
41 |
43 | Cancel
42 |
22 |
29 | )
30 | }
31 | })
32 |
33 | const styles = {
34 | button: {
35 | margin: '100px 0px 0px',
36 | height: 50,
37 | display: 'flex',
38 | justifyContent: 'center',
39 | alignItems: 'center',
40 | backgroundColor: '#ededed',
41 | cursor: 'pointer'
42 | },
43 | buttonText: {
44 | fontWeight: 500
45 | },
46 | container: {
47 | padding: 10
48 | },
49 | title: {
50 | fontSize: 20,
51 | fontWeight: 500,
52 | margin: 0,
53 | borderBottom: `2px solid ${primary}`,
54 | paddingBottom: 4
55 | }
56 | }
57 |
58 | export default ProfileWithData
59 |
--------------------------------------------------------------------------------
/src/components/Users.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { graphql, compose } from 'react-apollo'
3 | import { css } from 'glamor'
4 | import { FaUser, FaPlus } from 'react-icons/fa'
5 | import { observer } from 'mobx-react'
6 |
7 | import { primary } from '../theme'
8 | import { listUsers, onCreateUser as OnCreateUser } from '../graphql'
9 | import Overlay from './Overlay'
10 | import UserStore from '../mobx/UserStore'
11 |
12 | class Users extends React.Component {
13 | state = { showOverlay: false, userForConvo: {} }
14 | toggleOverlay = (visible, userForConvo) => {
15 | this.setState({ showOverlay: visible, userForConvo })
16 | }
17 | componentDidMount() {
18 | this.props.subscribeToNewMessages()
19 | }
20 | render() {
21 | const { username } = UserStore
22 | const users = this.props.users.filter(u => u.username !== username)
23 | return (
24 | Profile
23 |Username: {username}
24 |Email: {email}
25 |
26 |
28 | Sign Out
27 |
25 | {
26 | this.state.showOverlay && (
27 |
51 | )
52 | }
53 | }
54 |
55 | const styles = {
56 | plusIconContainer: {
57 | display: 'flex',
58 | flex: 1,
59 | justifyContent: 'flex-end'
60 | },
61 | username: {
62 | margin: 0,
63 | marginLeft: 10,
64 | },
65 | user: {
66 | display: 'flex',
67 | padding: 15,
68 | backgroundColor: '#ededed',
69 | borderRadius: 20,
70 | marginTop: 10,
71 | cursor: 'pointer'
72 | },
73 | container: {
74 | padding: 10
75 | },
76 | title: {
77 | fontSize: 20,
78 | fontWeight: 500,
79 | margin: 0,
80 | borderBottom: `2px solid ${primary}`,
81 | paddingBottom: 4
82 | }
83 | }
84 |
85 | const UsersWithData = compose(
86 | graphql(listUsers, {
87 | options: {
88 | fetchPolicy: 'cache-and-network'
89 | },
90 | props: props => {
91 | return {
92 | users: props.data.listUsers ? props.data.listUsers.items : [],
93 | subscribeToNewMessages: () => {
94 | props.data.subscribeToMore({
95 | document: OnCreateUser,
96 | updateQuery: (prev, { subscriptionData: { data : { onCreateUser } } }) => {
97 |
98 | let userArray = prev.listUsers.items.filter(u => u.id !== onCreateUser.id)
99 | userArray = [
100 | ...userArray,
101 | onCreateUser,
102 | ]
103 | console.log('userArray:' , userArray)
104 |
105 | return {
106 | ...prev,
107 | listUsers: {
108 | ...prev.listUsers,
109 | items: userArray
110 | }
111 | }
112 | }
113 | })
114 | },
115 | }
116 | }
117 | })
118 | )(Users)
119 |
120 | export default observer(UsersWithData)
121 |
--------------------------------------------------------------------------------
/src/graphql.js:
--------------------------------------------------------------------------------
1 | import graphql from 'graphql-tag'
2 | import gql from 'graphql-tag';
3 |
4 | // mutations
5 | const createUser = `
6 | mutation($username: String!) {
7 | createUser(input: {
8 | username: $username
9 | }) {
10 | id username createdAt
11 | }
12 | }
13 | `
14 |
15 | const createMessage = gql`mutation CreateMessage(
16 | $createdAt: String, $id: ID, $authorId: String, $content: String!, $messageConversationId: ID!
17 | ) {
18 | createMessage(input: {
19 | createdAt: $createdAt, id: $id, content: $content, messageConversationId: $messageConversationId, authorId: $authorId
20 | }) {
21 | id
22 | content
23 | authorId
24 | messageConversationId
25 | createdAt
26 | }
27 | }
28 | `;
29 |
30 |
31 | const createConvo = `mutation CreateConvo($name: String!, $members: [String!]!) {
32 | createConvo(input: {
33 | name: $name, members: $members
34 | }) {
35 | id
36 | name
37 | members
38 | }
39 | }
40 | `;
41 |
42 | const createConvoLink = `mutation CreateConvoLink(
43 | $convoLinkConversationId: ID!, $convoLinkUserId: ID
44 | ) {
45 | createConvoLink(input: {
46 | convoLinkConversationId: $convoLinkConversationId, convoLinkUserId: $convoLinkUserId
47 | }) {
48 | id
49 | convoLinkUserId
50 | convoLinkConversationId
51 | conversation {
52 | id
53 | name
54 | }
55 | }
56 | }
57 | `;
58 |
59 | const getUser = graphql`
60 | query getUser($id: ID!) {
61 | getUser(id: $id) {
62 | id
63 | username
64 | }
65 | }
66 | `
67 |
68 | const getUserAndConversations = gql`
69 | query getUserAndConversations($id:ID!) {
70 | getUser(id:$id) {
71 | id
72 | username
73 | conversations(limit: 100) {
74 | items {
75 | id
76 | conversation {
77 | id
78 | name
79 | }
80 | }
81 | }
82 | }
83 | }
84 | `
85 |
86 | const getConvo = gql`
87 | query getConvo($id: ID!) {
88 | getConvo(id:$id) {
89 | id
90 | name
91 | members
92 | messages(limit: 100) {
93 | items {
94 | id
95 | content
96 | authorId
97 | messageConversationId
98 | createdAt
99 | }
100 | }
101 | createdAt
102 | updatedAt
103 | }
104 | }
105 | `
106 |
107 | const listUsers = graphql`
108 | query listUsers {
109 | listUsers {
110 | items {
111 | id
112 | username
113 | createdAt
114 | }
115 | }
116 | }
117 | `
118 |
119 | const onCreateMessage = gql`
120 | subscription onCreateMessage($messageConversationId: ID!) {
121 | onCreateMessage(messageConversationId: $messageConversationId) {
122 | id
123 | content
124 | authorId
125 | messageConversationId
126 | createdAt
127 | }
128 | }
129 | `
130 |
131 | const onCreateUser = gql`subscription OnCreateUser {
132 | onCreateUser {
133 | id
134 | username
135 | createdAt
136 | }
137 | }
138 | `;
139 |
140 | export {
141 | createUser,
142 | createMessage,
143 | createConvo,
144 | createConvoLink,
145 | getConvo,
146 | getUser,
147 | getUserAndConversations,
148 | listUsers,
149 | onCreateMessage,
150 | onCreateUser
151 | }
152 |
--------------------------------------------------------------------------------
/src/graphql/mutations.js:
--------------------------------------------------------------------------------
1 | // eslint-disable
2 | // this is an auto generated file. This will be overwritten
3 |
4 | export const createUser = `mutation CreateUser($input: CreateUserInput!) {
5 | createUser(input: $input) {
6 | id
7 | username
8 | conversations {
9 | items {
10 | id
11 | convoLinkUserId
12 | convoLinkConversationId
13 | createdAt
14 | updatedAt
15 | }
16 | nextToken
17 | }
18 | messages {
19 | items {
20 | id
21 | authorId
22 | content
23 | messageConversationId
24 | createdAt
25 | updatedAt
26 | }
27 | nextToken
28 | }
29 | createdAt
30 | updatedAt
31 | }
32 | }
33 | `;
34 | export const updateUser = `mutation UpdateUser($input: UpdateUserInput!) {
35 | updateUser(input: $input) {
36 | id
37 | username
38 | conversations {
39 | items {
40 | id
41 | convoLinkUserId
42 | convoLinkConversationId
43 | createdAt
44 | updatedAt
45 | }
46 | nextToken
47 | }
48 | messages {
49 | items {
50 | id
51 | authorId
52 | content
53 | messageConversationId
54 | createdAt
55 | updatedAt
56 | }
57 | nextToken
58 | }
59 | createdAt
60 | updatedAt
61 | }
62 | }
63 | `;
64 | export const deleteUser = `mutation DeleteUser($input: DeleteUserInput!) {
65 | deleteUser(input: $input) {
66 | id
67 | username
68 | conversations {
69 | items {
70 | id
71 | convoLinkUserId
72 | convoLinkConversationId
73 | createdAt
74 | updatedAt
75 | }
76 | nextToken
77 | }
78 | messages {
79 | items {
80 | id
81 | authorId
82 | content
83 | messageConversationId
84 | createdAt
85 | updatedAt
86 | }
87 | nextToken
88 | }
89 | createdAt
90 | updatedAt
91 | }
92 | }
93 | `;
94 | export const createConvo = `mutation CreateConvo($input: CreateConversationInput!) {
95 | createConvo(input: $input) {
96 | id
97 | messages {
98 | items {
99 | id
100 | authorId
101 | content
102 | messageConversationId
103 | createdAt
104 | updatedAt
105 | }
106 | nextToken
107 | }
108 | associated {
109 | items {
110 | id
111 | convoLinkUserId
112 | convoLinkConversationId
113 | createdAt
114 | updatedAt
115 | }
116 | nextToken
117 | }
118 | name
119 | members
120 | createdAt
121 | updatedAt
122 | }
123 | }
124 | `;
125 | export const createMessage = `mutation CreateMessage($input: CreateMessageInput!) {
126 | createMessage(input: $input) {
127 | id
128 | author {
129 | id
130 | username
131 | conversations {
132 | nextToken
133 | }
134 | messages {
135 | nextToken
136 | }
137 | createdAt
138 | updatedAt
139 | }
140 | authorId
141 | content
142 | conversation {
143 | id
144 | messages {
145 | nextToken
146 | }
147 | associated {
148 | nextToken
149 | }
150 | name
151 | members
152 | createdAt
153 | updatedAt
154 | }
155 | messageConversationId
156 | createdAt
157 | updatedAt
158 | }
159 | }
160 | `;
161 | export const updateMessage = `mutation UpdateMessage($input: UpdateMessageInput!) {
162 | updateMessage(input: $input) {
163 | id
164 | author {
165 | id
166 | username
167 | conversations {
168 | nextToken
169 | }
170 | messages {
171 | nextToken
172 | }
173 | createdAt
174 | updatedAt
175 | }
176 | authorId
177 | content
178 | conversation {
179 | id
180 | messages {
181 | nextToken
182 | }
183 | associated {
184 | nextToken
185 | }
186 | name
187 | members
188 | createdAt
189 | updatedAt
190 | }
191 | messageConversationId
192 | createdAt
193 | updatedAt
194 | }
195 | }
196 | `;
197 | export const deleteMessage = `mutation DeleteMessage($input: DeleteMessageInput!) {
198 | deleteMessage(input: $input) {
199 | id
200 | author {
201 | id
202 | username
203 | conversations {
204 | nextToken
205 | }
206 | messages {
207 | nextToken
208 | }
209 | createdAt
210 | updatedAt
211 | }
212 | authorId
213 | content
214 | conversation {
215 | id
216 | messages {
217 | nextToken
218 | }
219 | associated {
220 | nextToken
221 | }
222 | name
223 | members
224 | createdAt
225 | updatedAt
226 | }
227 | messageConversationId
228 | createdAt
229 | updatedAt
230 | }
231 | }
232 | `;
233 | export const createConvoLink = `mutation CreateConvoLink($input: CreateConvoLinkInput!) {
234 | createConvoLink(input: $input) {
235 | id
236 | user {
237 | id
238 | username
239 | conversations {
240 | nextToken
241 | }
242 | messages {
243 | nextToken
244 | }
245 | createdAt
246 | updatedAt
247 | }
248 | convoLinkUserId
249 | conversation {
250 | id
251 | messages {
252 | nextToken
253 | }
254 | associated {
255 | nextToken
256 | }
257 | name
258 | members
259 | createdAt
260 | updatedAt
261 | }
262 | convoLinkConversationId
263 | createdAt
264 | updatedAt
265 | }
266 | }
267 | `;
268 | export const updateConvoLink = `mutation UpdateConvoLink($input: UpdateConvoLinkInput!) {
269 | updateConvoLink(input: $input) {
270 | id
271 | user {
272 | id
273 | username
274 | conversations {
275 | nextToken
276 | }
277 | messages {
278 | nextToken
279 | }
280 | createdAt
281 | updatedAt
282 | }
283 | convoLinkUserId
284 | conversation {
285 | id
286 | messages {
287 | nextToken
288 | }
289 | associated {
290 | nextToken
291 | }
292 | name
293 | members
294 | createdAt
295 | updatedAt
296 | }
297 | convoLinkConversationId
298 | createdAt
299 | updatedAt
300 | }
301 | }
302 | `;
303 |
--------------------------------------------------------------------------------
/src/graphql/queries.js:
--------------------------------------------------------------------------------
1 | // eslint-disable
2 | // this is an auto generated file. This will be overwritten
3 |
4 | export const getUser = `query GetUser($id: ID!) {
5 | getUser(id: $id) {
6 | id
7 | username
8 | conversations {
9 | items {
10 | id
11 | convoLinkUserId
12 | convoLinkConversationId
13 | createdAt
14 | updatedAt
15 | }
16 | nextToken
17 | }
18 | messages {
19 | items {
20 | id
21 | authorId
22 | content
23 | messageConversationId
24 | createdAt
25 | updatedAt
26 | }
27 | nextToken
28 | }
29 | createdAt
30 | updatedAt
31 | }
32 | }
33 | `;
34 | export const listUsers = `query ListUsers(
35 | $filter: ModelUserFilterInput
36 | $limit: Int
37 | $nextToken: String
38 | ) {
39 | listUsers(filter: $filter, limit: $limit, nextToken: $nextToken) {
40 | items {
41 | id
42 | username
43 | conversations {
44 | nextToken
45 | }
46 | messages {
47 | nextToken
48 | }
49 | createdAt
50 | updatedAt
51 | }
52 | nextToken
53 | }
54 | }
55 | `;
56 | export const getConvo = `query GetConvo($id: ID!) {
57 | getConvo(id: $id) {
58 | id
59 | messages {
60 | items {
61 | id
62 | authorId
63 | content
64 | messageConversationId
65 | createdAt
66 | updatedAt
67 | }
68 | nextToken
69 | }
70 | associated {
71 | items {
72 | id
73 | convoLinkUserId
74 | convoLinkConversationId
75 | createdAt
76 | updatedAt
77 | }
78 | nextToken
79 | }
80 | name
81 | members
82 | createdAt
83 | updatedAt
84 | }
85 | }
86 | `;
87 |
--------------------------------------------------------------------------------
/src/graphql/subscriptions.js:
--------------------------------------------------------------------------------
1 | // eslint-disable
2 | // this is an auto generated file. This will be overwritten
3 |
4 | export const onCreateConvoLink = `subscription OnCreateConvoLink($convoLinkUserId: ID!) {
5 | onCreateConvoLink(convoLinkUserId: $convoLinkUserId) {
6 | id
7 | user {
8 | id
9 | username
10 | conversations {
11 | nextToken
12 | }
13 | messages {
14 | nextToken
15 | }
16 | createdAt
17 | updatedAt
18 | }
19 | convoLinkUserId
20 | conversation {
21 | id
22 | messages {
23 | nextToken
24 | }
25 | associated {
26 | nextToken
27 | }
28 | name
29 | members
30 | createdAt
31 | updatedAt
32 | }
33 | convoLinkConversationId
34 | createdAt
35 | updatedAt
36 | }
37 | }
38 | `;
39 | export const onCreateMessage = `subscription OnCreateMessage($messageConversationId: ID!) {
40 | onCreateMessage(messageConversationId: $messageConversationId) {
41 | id
42 | author {
43 | id
44 | username
45 | conversations {
46 | nextToken
47 | }
48 | messages {
49 | nextToken
50 | }
51 | createdAt
52 | updatedAt
53 | }
54 | authorId
55 | content
56 | conversation {
57 | id
58 | messages {
59 | nextToken
60 | }
61 | associated {
62 | nextToken
63 | }
64 | name
65 | members
66 | createdAt
67 | updatedAt
68 | }
69 | messageConversationId
70 | createdAt
71 | updatedAt
72 | }
73 | }
74 | `;
75 | export const onCreateUser = `subscription OnCreateUser {
76 | onCreateUser {
77 | id
78 | username
79 | conversations {
80 | items {
81 | id
82 | convoLinkUserId
83 | convoLinkConversationId
84 | createdAt
85 | updatedAt
86 | }
87 | nextToken
88 | }
89 | messages {
90 | items {
91 | id
92 | authorId
93 | content
94 | messageConversationId
95 | createdAt
96 | updatedAt
97 | }
98 | nextToken
99 | }
100 | createdAt
101 | updatedAt
102 | }
103 | }
104 | `;
105 | export const onUpdateUser = `subscription OnUpdateUser {
106 | onUpdateUser {
107 | id
108 | username
109 | conversations {
110 | items {
111 | id
112 | convoLinkUserId
113 | convoLinkConversationId
114 | createdAt
115 | updatedAt
116 | }
117 | nextToken
118 | }
119 | messages {
120 | items {
121 | id
122 | authorId
123 | content
124 | messageConversationId
125 | createdAt
126 | updatedAt
127 | }
128 | nextToken
129 | }
130 | createdAt
131 | updatedAt
132 | }
133 | }
134 | `;
135 | export const onDeleteUser = `subscription OnDeleteUser {
136 | onDeleteUser {
137 | id
138 | username
139 | conversations {
140 | items {
141 | id
142 | convoLinkUserId
143 | convoLinkConversationId
144 | createdAt
145 | updatedAt
146 | }
147 | nextToken
148 | }
149 | messages {
150 | items {
151 | id
152 | authorId
153 | content
154 | messageConversationId
155 | createdAt
156 | updatedAt
157 | }
158 | nextToken
159 | }
160 | createdAt
161 | updatedAt
162 | }
163 | }
164 | `;
165 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
16 | .Input__input___2Sh1s {
17 | width: calc(100% - 100px) !important;
18 | }
19 |
20 | .Section__sectionFooterPrimaryContent___36Gb1 {
21 | width: calc(100% - 100px) !important;
22 | margin-right: 100px !important;
23 | }
24 |
25 | .SelectInput__selectInput___1I_W8 {
26 | width: 75% !important;
27 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import AWSAppSyncClient from 'aws-appsync'
4 | import { Rehydrated } from 'aws-appsync-react'
5 | import { ApolloProvider } from 'react-apollo'
6 | import { Auth } from 'aws-amplify'
7 | import Amplify from 'aws-amplify'
8 |
9 | import config from './aws-exports'
10 | import './index.css'
11 | import App from './App'
12 | import Loading from './components/Loading'
13 |
14 | Amplify.configure(config)
15 |
16 | const client = new AWSAppSyncClient({
17 | url: config.aws_appsync_graphqlEndpoint,
18 | region: config.aws_appsync_region,
19 | auth: {
20 | type: config.aws_appsync_authenticationType,
21 | jwtToken: async () => (await Auth.currentSession()).idToken.jwtToken
22 | }
23 | });
24 |
25 | const AppWithProvider = () => (
26 | Users
36 | { 37 | users.map((u, i) => ( 38 | this.toggleOverlay(true, u)}
41 | >
42 |
48 | ))
49 | }
50 | {u.username}
44 |
45 |
47 |