7 | We are sorry but the page you are looking for does not exist. 8 |
9 |173 | Don't have an account? Sign Up 174 |
175 | ); 176 | 177 | export default withRouter(SignUp); 178 | 179 | export { SignUpForm, SignUpLink }; 180 | -------------------------------------------------------------------------------- /server/src/index.js: -------------------------------------------------------------------------------- 1 | import 'dotenv/config'; 2 | import cors from 'cors'; 3 | import morgan from 'morgan'; 4 | import http from 'http'; 5 | import jwt from 'jsonwebtoken'; 6 | import DataLoader from 'dataloader'; 7 | import express from 'express'; 8 | import { 9 | ApolloServer, 10 | AuthenticationError, 11 | } from 'apollo-server-express'; 12 | 13 | import { existsSync, mkdirSync } from 'fs'; 14 | import path from 'path'; 15 | import moment from 'moment'; 16 | 17 | import schema from './schema'; 18 | import resolvers from './resolvers'; 19 | import models, { connectDb } from './models'; 20 | import loaders from './loaders'; 21 | import { createUsersWithMessages } from './utils/seed'; 22 | import { deleteFile } from './utils/upload'; 23 | 24 | const app = express(); 25 | 26 | app.use(cors()); 27 | app.use(morgan('dev')); 28 | 29 | existsSync(path.join(__dirname, '../uploads')) || 30 | mkdirSync(path.join(__dirname, '../uploads')); 31 | app.use( 32 | '/uploads', 33 | express.static(path.join(__dirname, '../uploads')), 34 | ); 35 | 36 | /* 37 | app.use(async (req, res, next) => { 38 | // console.log( 39 | // 'My Time: ', 40 | // moment().format('dddd, MMMM Do YYYY, k:mm:ss'), 41 | // ); 42 | 43 | const seed = await models.Seed.findOne({ 44 | seed: 'seed', 45 | }); 46 | 47 | console.log('Database created: ', moment(seed.createdAt).fromNow()); 48 | 49 | const databaseOldInMinutes = moment().diff( 50 | moment(seed.createdAt), 51 | 'minutes', 52 | ); 53 | 54 | if (databaseOldInMinutes > process.env.RESEED_DATABASE_MINUTES) { 55 | reseedDatabase(); 56 | console.log('Older than 5min, reseeding...'); 57 | } 58 | 59 | next(); 60 | }); 61 | */ 62 | 63 | // vadi usera iz tokena, a ne iz baze 64 | // i mece ga u context 65 | const getMe = async req => { 66 | const token = req.headers['x-token']; 67 | 68 | if (token) { 69 | try { 70 | return await jwt.verify(token, process.env.SECRET); 71 | } catch (e) { 72 | throw new AuthenticationError( 73 | 'Your session expired. Sign in again.', 74 | ); 75 | } 76 | } 77 | }; 78 | 79 | const server = new ApolloServer({ 80 | introspection: true, 81 | typeDefs: schema, 82 | resolvers, 83 | subscriptions: { 84 | keepAlive: 30000, 85 | // onConnect: async (connectionParams, webSocket, context) => { 86 | // const token = connectionParams.authToken; 87 | // const me = await jwt.verify(token, process.env.SECRET); 88 | // return { me }; 89 | // }, 90 | }, 91 | formatError: error => { 92 | // remove the internal sequelize error message 93 | // leave only the important validation error 94 | const message = error.message 95 | .replace('SequelizeValidationError: ', '') // string replace 96 | .replace('Validation error: ', ''); 97 | 98 | return { 99 | ...error, 100 | message, 101 | }; 102 | }, 103 | context: async ({ req, connection, payload }) => { 104 | // subskribcije 105 | if (connection) { 106 | // const me = connection.context.me; 107 | const token = payload.authToken; 108 | //console.log(payload); 109 | const me = token 110 | ? await jwt.verify(token, process.env.SECRET) 111 | : null; 112 | console.log('ws me ', me?.username, me?.id); 113 | return { 114 | me, 115 | models, 116 | loaders: { 117 | // batching, samo unique keys usera, nema ponavljanja 118 | // batching: puno malih sql upita u jedan veci i brzi mnogo 119 | // DataLoader facebookova biblioteka 120 | // cache u okviru jednog zahteva, ako van server scope onda vise kesira... 121 | // ide u context 122 | // gledas koliko upita baza izvrsava negde u mongo konzoli 123 | user: new DataLoader(keys => 124 | loaders.user.batchUsers(keys, models), 125 | ), 126 | file: new DataLoader(keys => 127 | loaders.file.batchFiles(keys, models), 128 | ), 129 | }, 130 | }; 131 | } 132 | 133 | // http, mutacije i queries 134 | if (req) { 135 | const me = await getMe(req); 136 | console.log('http me ', me?.username, me?.id); 137 | 138 | return { 139 | models, 140 | me, 141 | secret: process.env.SECRET, 142 | loaders: { 143 | user: new DataLoader(keys => 144 | loaders.user.batchUsers(keys, models), 145 | ), 146 | file: new DataLoader(keys => 147 | loaders.file.batchFiles(keys, models), 148 | ), 149 | }, 150 | }; 151 | } 152 | }, 153 | }); 154 | 155 | server.applyMiddleware({ app, path: '/graphql' }); 156 | 157 | const httpServer = http.createServer(app); 158 | server.installSubscriptionHandlers(httpServer); // subscribtions 159 | 160 | const isTest = !!process.env.TEST_DATABASE_URL; 161 | const isProduction = process.env.NODE_ENV === 'production'; 162 | const port = process.env.PORT || 8000; 163 | 164 | // vraca promise sa konekcijom koju ne koristi 165 | connectDb().then(async connection => { 166 | if (isTest || isProduction) { 167 | await reseedDatabase(); 168 | } 169 | 170 | httpServer.listen({ port }, () => { 171 | console.log(`Apollo Server on http://localhost:${port}/graphql`); 172 | }); 173 | }); 174 | 175 | const reseedDatabase = async () => { 176 | const files = await models.File.find({ 177 | path: { $nin: ['test.mp3', 'avatar.jpg', 'cover.jpg'] }, 178 | }); 179 | // console.log(files); 180 | files.map(file => { 181 | deleteFile(file.path); 182 | }); 183 | 184 | // reset database 185 | await Promise.all([ 186 | models.User.deleteMany({}), 187 | models.Message.deleteMany({}), 188 | models.File.deleteMany({}), 189 | models.Notification.deleteMany({}), 190 | models.Seed.deleteMany({}), 191 | ]); 192 | 193 | await createUsersWithMessages(new Date()); 194 | }; 195 | -------------------------------------------------------------------------------- /client/src/components/Messages/Messages.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useCallback, Fragment } from 'react'; 2 | import { useQuery, useMutation } from '@apollo/react-hooks'; 3 | import moment from 'moment'; 4 | 5 | import { makeStyles } from '@material-ui/core/styles'; 6 | import Grid from '@material-ui/core/Grid'; 7 | import Button from '@material-ui/core/Button'; 8 | 9 | import MessagePlayer from '../MessagePlayer/MessagePlayer'; 10 | import Loading from '../Loading/Loading'; 11 | 12 | import { 13 | GET_PAGINATED_MESSAGES_WITH_USERS, 14 | GET_AUTOPLAY, 15 | GET_MESSAGES_VARIABLES, 16 | } from '../../graphql/queries'; 17 | import { SET_MESSAGES_VARIABLES } from '../../graphql/mutations'; 18 | import { MESSAGE_CREATED } from '../../graphql/subscriptions'; 19 | 20 | const useStylesMessages = makeStyles(theme => ({ 21 | noMessages: { 22 | padding: theme.spacing(2), 23 | textAlign: 'center', 24 | backgroundColor: theme.palette.background.paper, 25 | }, 26 | })); 27 | 28 | const Messages = ({ limit, username, session }) => { 29 | const { 30 | data, 31 | loading, 32 | error, 33 | refetch, 34 | fetchMore, 35 | subscribeToMore, 36 | } = useQuery(GET_PAGINATED_MESSAGES_WITH_USERS, { 37 | variables: { limit, username }, 38 | }); 39 | const classes = useStylesMessages(); 40 | const [setMessagesVariables] = useMutation(SET_MESSAGES_VARIABLES); 41 | 42 | useEffect(() => { 43 | refetch(); 44 | const username = username || null; 45 | setMessagesVariables({ 46 | variables: { username: username, limit, cursor: null }, 47 | }); 48 | }, [username, limit]); 49 | 50 | if (loading) { 51 | return