13 |
14 |
16 | );
17 | };
18 |
19 | const mapStateToProps = state => ({
20 | chatRooms: state.chatRooms.chatRooms
21 | })
22 |
23 | const mapDispatchToProps = dispatch => ({
24 | fetchChatRooms: () => dispatch(fetchChatRooms())
25 | })
26 |
27 | export default connect(mapStateToProps,mapDispatchToProps)(Chat);
28 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatInput/ChatInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux';
3 | import {toastr} from 'react-redux-toastr'
4 | import "./ChatInput.scss";
5 | import {sendMessage} from "../../../../firebase/firebase.utils";
6 |
7 | class ChatInput extends React.Component{
8 | state = {
9 | message: '',
10 | inProgress: false
11 | };
12 |
13 | onSendMessage = (event) => {
14 | if ((event.keyCode === 13 || event.type === 'click') && this.state.message.trim() && !this.state.inProgress) {
15 | this.setState({
16 | ...this.state,
17 | inProgress: true
18 | });
19 | const chatroomId = this.props.selectedChatroom.id;
20 | const messageData = {
21 | message: this.state.message,
22 | createdAt: new Date(),
23 | sender: {
24 | email: this.props.currentUser.email,
25 | firstName: this.props.currentUser.firstName,
26 | lastName: this.props.currentUser.lastName,
27 | id: this.props.currentUser.id,
28 | photoUrl: this.props.currentUser.photoUrl
29 | }
30 | };
31 |
32 | sendMessage(chatroomId, messageData)
33 | .then(result => {
34 | }).catch(err => {
35 | toastr.error(
36 | 'Error!',
37 | err.message
38 | )
39 | }).finally(() => {
40 | this.setState( {
41 | message: '',
42 | inProgress: false
43 | });
44 | })
45 | }
46 |
47 | };
48 |
49 | handleChange = (e) => {
50 | this.setState({
51 | ...this.state,
52 | message: e.target.value
53 | }
54 | );
55 | };
56 |
57 | render() {
58 | return (
59 |
60 |
72 | );
73 | }
74 | };
75 |
76 | export default connect(
77 | (state) => ({
78 | selectedChatroom: state.chatRooms.selectedChatroom,
79 | currentUser: state.user.currentUser
80 | })
81 | )(ChatInput);
82 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatInput/ChatInput.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../styles/variables";
2 |
3 | .new-message-wrapper {
4 | margin-top: auto ;
5 | .input-group {
6 | align-self: flex-end;
7 |
8 | .form-control {
9 | border-radius: 0;
10 | border: 0;
11 | background-color: $light-grey;
12 |
13 | &:focus {
14 | outline: 0;
15 | box-shadow: none;
16 | }
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatMessage/ChatMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import "./ChatMessage.scss"
3 | import {connect} from "react-redux";
4 | import {formatDate} from "../../../../utils/utils";
5 |
6 | const ChatMessage = ({messagesByUsers}) => {
7 | return (
8 | messagesByUsers && messagesByUsers.map(m => (
9 |
61 |
67 |
71 |
68 |
69 |
70 |
10 |
32 | ))
33 | );
34 | };
35 |
36 | export default connect(
37 | (state) => ({
38 | messagesByUsers: state.chatRooms.messagesByUsers
39 | })
40 | )(ChatMessage);
41 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatMessage/ChatMessage.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../styles/variables";
2 |
3 | .chat-message {
4 | padding: 1.5em;
5 |
6 | .image-wrapper {
7 | margin-right: 1em;
8 | height: 50px;
9 | width: 50px;
10 |
11 | img {
12 | height: 50px;
13 | width: 50px;
14 | }
15 | }
16 | .name {
17 | text-decoration: underline;
18 | font-weight: 600;
19 | }
20 | .timestamp {
21 | margin-bottom: 1.5em;
22 | color: darken($light-grey, 15%);
23 | }
24 | .message {
25 | font-size: 1.2em;
26 | display: flex;
27 | flex-flow: column-reverse;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatroomList/ChatroomList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from "react-redux"
3 | import {setChatRoom} from "../../../../redux/chatroom/chatroom.actions"
4 | import Spinner from "../../../../components/Spinner/Spinner";
5 | import './ChatroomList.scss'
6 |
7 | const ChatroomList = ({chatrooms, setChatRoom}) => {
8 | return (
9 | <>
10 | {
11 | chatrooms ?
12 |
11 | 
12 |
13 |
14 |
31 |
15 | {m.sender.firstName} {m.sender.lastName}
16 |
17 |
18 | {
19 | m.messages.map(
20 | me => (
21 | (
22 |
30 | 23 | {me.message} {formatDate(me.createdAt.toDate())} 24 |
25 | ) 26 | ) 27 | ) 28 | } 29 |
13 | {
14 | chatrooms.map(c => (
15 |
:
27 |
18 | setChatRoom(c)}
22 | >{c.name}
23 |
24 | ))
25 | }
26 |
7 |
9 | );
10 | };
11 |
12 | export default ChatroomTitleBar;
13 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatroomTitleBar/ChatroomTitleBar.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../styles/variables";
2 |
3 | .room-title {
4 | padding: 1em 1em 1em 2em;
5 | border-bottom: 2px solid $grey;
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/Chat/components/ChatroomWindow/ChatroomWindow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux'
3 | import ChatroomTitleBar from "../ChatroomTitleBar/ChatroomTitleBar";
4 | import {fetchMessagesAsync} from "../../../../redux/chatroom/chatroom.actions";
5 | import ChatMessage from "../ChatMessage/ChatMessage";
6 | import ChatInput from "../ChatInput/ChatInput";
7 | import "./ChatroomWindow.scss"
8 |
9 | const NoChatRoom = (
10 | {title}
8 |
11 |
15 | );
16 |
17 |
18 | class ChatroomWindow extends React.Component {
19 | scrollContainer = React.createRef();
20 |
21 |
22 | componentDidUpdate(prevProps) {
23 | if (this.props.selectedChatroom && this.props.selectedChatroom !== prevProps.selectedChatroom) {
24 | this.props.fetchMessagesAsync();
25 | }
26 |
27 | if (this.scrollContainer.current && this.props.messages) {
28 | setTimeout(() => {
29 | this.scrollContainer.current.scrollTop = this.scrollContainer.current.scrollHeight;
30 | }, 0)
31 | }
32 | }
33 |
34 | render() {
35 | return (
36 |
12 | Select a Room
13 |
14 |
40 |
:
46 | NoChatRoom
47 | }
48 |
42 |
44 |
77 |
);
130 | }
131 | }
132 |
133 | const mapStateToProps = (state) => {
134 | return {
135 | user: state.user.currentUser
136 | }
137 | };
138 |
139 | export default connect(mapStateToProps)(withRouter(EditProfile));
140 |
--------------------------------------------------------------------------------
/src/pages/EditProfile/EditProfile.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | .no-photo {
4 | height: 150px;
5 | width: 150px;
6 | background: $grey;
7 | margin: 1em 0;
8 | color: white;
9 | border-radius: 50%;
10 | }
11 |
12 | .profile-pic {
13 | max-width: 150px;
14 | max-height: 150px;
15 | margin: 1em 0;
16 | }
17 |
18 | input, textarea {
19 | border: 2px solid $light-grey;
20 | border-radius: 5px;
21 | padding: .25em .5em;
22 | margin-bottom: 1em;
23 | width: 100%;
24 | font-weight: 200;
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link} from "react-router-dom"
3 | import {toastr} from 'react-redux-toastr'
4 | import { auth } from '../../firebase/firebase.utils';
5 | import "./Login.scss"
6 |
7 | const Login = () => {
8 | const [email, setEmail] = React.useState('');
9 | const [password, setPassword] = React.useState('');
10 | const [error, setError] = React.useState("");
11 |
12 | const handleChangeEmail = e => {
13 | setEmail(e.target.value);
14 | };
15 | const handleChangePassword = e => {
16 | setPassword(e.target.value);
17 | };
18 |
19 | const handleSubmit = async e => {
20 | e.preventDefault();
21 | if(email === "" || password === ""){
22 | return setError('Please fill in all the blanks');
23 | }
24 | try {
25 | await auth.signInWithEmailAndPassword(email, password);
26 | setPassword('');
27 | setEmail('');
28 | } catch (error) {
29 | const message = error ? error.message : 'Can\'t login';
30 | toastr.error('Error!', message);
31 | }
32 | };
33 |
34 | return (
35 |
78 |
82 |
79 | 
80 |
81 |
83 |
87 |
88 | {
89 | this.state.isImageUploading &&
90 |
84 |
85 |
86 |
91 |
102 | }
103 |
104 |
93 |
101 | {this.imageUploadedPercentage}%
99 |
100 |
105 |
109 |
106 |
107 |
108 |
110 |
114 |
111 |
112 |
113 |
115 |
119 |
116 |
117 |
118 |
120 |
124 |
121 |
122 |
123 |
125 |
129 |
126 |
127 |
128 |
36 |
54 | );
55 | };
56 |
57 | export default Login;
58 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | h2 {
4 | color: $secondary;
5 | margin-bottom: 1em;
6 | }
7 |
8 | .form-wrapper {
9 | min-width: 40%;
10 | margin-bottom: 10%;
11 | border: 2px solid $light-grey;
12 | padding: 1em 2em;
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/Profile/Profile.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {connect} from "react-redux"
3 | import "./Profile.scss"
4 | import {Link} from "react-router-dom";
5 | import Spinner from "../../components/Spinner/Spinner";
6 |
7 | const NoFoto = (
37 |
53 | Login
38 | 48 | Need an Account? 49 | {error.length ? ( 50 |{error}
51 | ) : null}
52 |
8 | No Photo
9 |
);
10 |
11 | class Profile extends Component {
12 |
13 |
14 | render() {
15 | const {photoUrl, firstName, lastName, quote, id,bio} = this.props.user;
16 | return (
17 | <>
18 | {
19 | this.props.user ?
20 |
21 |
:
55 |
22 | {
23 | photoUrl ?
24 | (
30 |
25 |
27 |
) : NoFoto
28 | }
29 |
31 |
35 |
32 | {firstName} {lastName}
33 |
34 |
36 |
44 |
37 |
43 | 38 |42 |39 | {quote} 40 |
41 |
45 |
49 |
46 | {bio}
47 |
48 |
50 |
54 |
51 | Edit Profile
52 |
53 |
74 |
140 | );
141 | }
142 | }
143 |
144 | export default Signup;
145 |
--------------------------------------------------------------------------------
/src/pages/Signup/Signup.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/React-Chat-App-With-Redux-And-Firebase/3f137ea2d8f81760105b6ee9ca0be90a67314cdd/src/pages/Signup/Signup.scss
--------------------------------------------------------------------------------
/src/redux/chatroom/chatroom.actions.js:
--------------------------------------------------------------------------------
1 | import {firestore} from "../../firebase/firebase.utils";
2 |
3 | export const SET_CHAT_ROOM = 'SET_CHAT_ROOM';
4 | export const FETCH_COLLECTIONS_START = 'FETCH_COLLECTIONS_START';
5 | export const FETCHING_COLLECTIONS_SUCCESS = 'FETCHING_COLLECTIONS_SUCCESS';
6 | export const FETCHING_COLLECTIONS_FAILURE = 'FETCHING_COLLECTIONS_FAILURE';
7 | export const FETCHING_MESSAGES_SUCCESS = 'FETCHING_MESSAGES_SUCCESS';
8 |
9 | export const setChatRoom = (channel) => ({
10 | type: SET_CHAT_ROOM,
11 | payload:channel
12 | })
13 |
14 | export const fetchCollectionsStart = () => ({
15 | type: FETCH_COLLECTIONS_START
16 | });
17 |
18 | export const fetchCollectionsSuccess = collectionsMap => ({
19 | type: FETCHING_COLLECTIONS_SUCCESS,
20 | payload: collectionsMap
21 | });
22 |
23 | export const fetchCollectionsFailure = errorMessage => ({
24 | type: FETCHING_COLLECTIONS_FAILURE,
25 | payload: errorMessage
26 | });
27 |
28 | export const fetchMessagesSuccess = collectionsMap => ({
29 | type: FETCHING_MESSAGES_SUCCESS,
30 | payload: collectionsMap
31 | });
32 |
33 |
34 | export const fetchChatRooms = () => {
35 | return dispatch => {
36 | const chatRef = firestore.collection("chatrooms");
37 | dispatch(fetchCollectionsStart());
38 |
39 | chatRef.get().then(snapShot => {
40 | const collectionsMap = snapShot.docs.map(doc => {
41 | const data = doc.data();
42 | data.id = doc.id;
43 | return data;
44 | });
45 | dispatch(fetchCollectionsSuccess(collectionsMap))
46 | })
47 | .catch(error => dispatch(fetchCollectionsFailure(error.Message)));
48 |
49 |
50 | }
51 | };
52 |
53 | export const fetchMessagesAsync = () => {
54 | return (dispatch, getState) => {
55 | firestore.collection(`chatrooms/${getState().chatRooms.selectedChatroom.id}/messages`).orderBy("createdAt", "desc").onSnapshot(function(snapshot) {
56 | const collectionsMap = snapshot.docs.map(doc => {
57 | const data = doc.data();
58 | data.id = doc.id;
59 | return data
60 | }
61 | );
62 | dispatch(fetchMessagesSuccess(collectionsMap))
63 | })
64 | }
65 | };
66 |
--------------------------------------------------------------------------------
/src/redux/chatroom/chatroom.reducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | SET_CHAT_ROOM,
3 | FETCH_COLLECTIONS_START,
4 | FETCHING_COLLECTIONS_FAILURE,
5 | FETCHING_COLLECTIONS_SUCCESS,
6 | FETCHING_MESSAGES_SUCCESS
7 | } from './chatroom.actions';
8 |
9 | const initialState = {
10 | chatRooms: null,
11 | selectedChatroom: null,
12 | selectedChatroomMessages: null,
13 | messages: null,
14 | messagesByUsers: null
15 | };
16 |
17 | export default (state = initialState, action) => {
18 | switch (action.type) {
19 | case FETCH_COLLECTIONS_START:
20 | return {
21 | ...state,
22 | };
23 | case FETCHING_COLLECTIONS_SUCCESS:
24 | return {
25 | ...state,
26 | chatRooms: action.payload
27 | };
28 | case FETCHING_COLLECTIONS_FAILURE:
29 | return {
30 | ...state,
31 | errorMessage: action.payload
32 | };
33 | case SET_CHAT_ROOM:
34 | return {
35 | ...state,
36 | selectedChatroom: action.payload
37 | };
38 | case FETCHING_MESSAGES_SUCCESS:
39 | return {
40 | ...state,
41 | messages: action.payload,
42 | messagesByUsers: groupMessagesByUser(action.payload)
43 | };
44 | default:
45 | return state
46 | }
47 | }
48 |
49 |
50 | function groupMessagesByUser(messages) {
51 | let result = [];
52 | let messageGroup = {sender: null, messages: []};
53 | for (let i = 0; i < messages.length; i++) {
54 | const prevMessage = messages[i -1];
55 | const currentMessage = messages[i];
56 | if (!prevMessage) {
57 | messageGroup.sender = currentMessage.sender;
58 | messageGroup.messages.push({
59 | createdAt: currentMessage.createdAt,
60 | message: currentMessage.message
61 | });
62 | if (i === messages.length -1 ) {
63 | result.push(messageGroup);
64 | }
65 | } else if (currentMessage.sender.id === prevMessage.sender.id ) {
66 | messageGroup.messages.push({
67 | createdAt: currentMessage.createdAt,
68 | message: currentMessage.message
69 | });
70 | if (i === messages.length -1 ) {
71 | result.push(messageGroup);
72 | }
73 | } else {
74 | result.push(messageGroup);
75 | messageGroup = {sender: null, messages: []};
76 | messageGroup.sender = currentMessage.sender;
77 | messageGroup.messages.push({
78 | createdAt: currentMessage.createdAt,
79 | message: currentMessage.message
80 | });
81 | }
82 | }
83 | return result;
84 | }
85 |
--------------------------------------------------------------------------------
/src/redux/rootReducer.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from "redux"
2 |
3 | import {reducer as toastrReducer} from 'react-redux-toastr'
4 | import userReducer from "./user/user.reducer";
5 | import chatroomReducer from './chatroom/chatroom.reducer'
6 |
7 | const rootReducer = combineReducers({
8 | user: userReducer,
9 | chatRooms: chatroomReducer,
10 | toastr: toastrReducer
11 | });
12 |
13 | export default rootReducer;
14 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import {createStore, applyMiddleware} from "redux"
2 | import { composeWithDevTools } from 'redux-devtools-extension';
3 | import thunk from "redux-thunk"
4 | import rootReducer from "./rootReducer";
5 |
6 | const store = createStore(rootReducer,composeWithDevTools(
7 | applyMiddleware(thunk)));
8 |
9 | export default store;
10 |
--------------------------------------------------------------------------------
/src/redux/user/user.actions.js:
--------------------------------------------------------------------------------
1 | export const USER_LOADED = "USER_LOADED";
2 | export const CLEAR_USER = "CLEAR_USER";
3 |
4 | export const setCurrentUser = user => ({
5 | type: USER_LOADED,
6 | payload: user
7 | });
8 |
9 | export const clearUser = () => ({
10 | type: CLEAR_USER,
11 | });
12 |
--------------------------------------------------------------------------------
/src/redux/user/user.reducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | USER_LOADED,
3 | CLEAR_USER
4 | } from './user.actions'
5 |
6 | const INITIAL_STATE = {
7 | currentUser: null,
8 | isAuthenticated: null,
9 | loading: true
10 | };
11 |
12 | const userReducer = (state = INITIAL_STATE, action) => {
13 | const { type, payload } = action;
14 | switch (type) {
15 | case USER_LOADED:
16 | return {
17 | ...state,
18 | currentUser: payload,
19 | loading: false
20 | };
21 | case CLEAR_USER:
22 | return {
23 | ...state,
24 | currentUser: null,
25 | loading: false,
26 | };
27 | default:
28 | return state;
29 | }
30 | };
31 | export default userReducer;
32 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import 'variables';
3 | @import '../../node_modules/bootstrap/scss/bootstrap';
4 | @import 'react-redux-toastr/src/styles/index';
5 |
6 | body {
7 | color: $secondary;
8 | }
9 |
10 | .container-wrapper {
11 | height: calc(100vh - 80px) !important;
12 | }
13 |
14 | .navbar {
15 | height: 80px;
16 | }
17 |
18 | button {
19 | width: 100%;
20 | &.btn {
21 | border-radius: 0;
22 | &:focus {
23 | box-shadow: none;
24 | }
25 | }
26 | }
27 |
28 | @mixin scrollbar($width: 6px, $bg: transparent, $margin: 0, $thumbBorderRadius: 6px, $thumbBg: rgba(0, 0, 0, .3)) {
29 | ::-webkit-scrollbar {
30 | width: $width;
31 | height: $width;
32 | background: $bg;
33 | margin: $margin;
34 | cursor: pointer;
35 | }
36 | ::-webkit-scrollbar-thumb {
37 | border-radius: $thumbBorderRadius;
38 | background: $thumbBg;
39 | }
40 | }
41 |
42 | @include scrollbar;
43 |
--------------------------------------------------------------------------------
/src/styles/variables.scss:
--------------------------------------------------------------------------------
1 | $primary: #328CC1;
2 | $secondary: #0B3C5D;
3 | $gold: #D9B310;
4 | $light-grey: #efefef;
5 | $grey: darken($light-grey, 30%);
6 | $black: #1D2731;
7 |
8 | $navbar-height: 80px;
--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | export function formatDate(date) {
2 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
3 | const hours = date.getHours();
4 | const minutes = date.getMinutes();
5 | const seconds = date.getSeconds();
6 | const paddedSeconds = seconds < 10 ? '0' + seconds: seconds;
7 | const ampm = hours >= 12 ? 'PM' : 'AM';
8 | return `
9 | ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}, ${hours}:${minutes}:${paddedSeconds} ${ampm}
10 | `
11 | }
12 |
--------------------------------------------------------------------------------
75 |
139 | Sign Up
76 | 134 | Already have an Account? 135 | {this.state.error.length ? ( 136 |{this.state.error}
137 | ) : null}
138 |