45 | -
50 | {_.map(matchList, matchedProfile => {
51 | const redirectLink = `/chatroom/${matchedProfile.matchid}`;
52 | return (
53 |
52 |
53 |
55 |
56 | Forgot your password?
57 |
58 |
95 |
96 |
53 |
55 | );
56 | }
57 |
58 | return (
59 | <>
60 |
50 |
51 |
53 |
54 | Sign in
55 |
56 |
107 |
108 |
48 | {_.isEmpty(notifications) ? (
49 |
50 |
51 | You don't have any notifications yet! Be patient, it's coming 😌
52 |
53 |
54 | ) : (
55 |
84 | );
85 | };
86 |
87 | export default NotificationDrawer;
88 |
--------------------------------------------------------------------------------
/src/components/nav/index.js:
--------------------------------------------------------------------------------
1 | import Nav from './nav-view';
2 |
3 | export default Nav;
4 |
--------------------------------------------------------------------------------
/src/components/nav/nav-container.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elitedev201/React-Dating-app/11b2954e5de0d2504c41abaafbf12b417e1a6f32/src/components/nav/nav-container.js
--------------------------------------------------------------------------------
/src/components/profile/components/cropper/cropImage.js:
--------------------------------------------------------------------------------
1 | const createImage = url =>
2 | new Promise((resolve, reject) => {
3 | const image = new Image();
4 | image.addEventListener('load', () => resolve(image));
5 | image.addEventListener('error', error => reject(error));
6 | image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
7 | image.src = url;
8 | });
9 |
10 | /**
11 | * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
12 | * @param {File} image - Image File url
13 | * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop
14 | * @param {number} rotation - optional rotation parameter
15 | */
16 | export default async function getCroppedImg(imageSrc, pixelCrop, upload) {
17 | const image = await createImage(imageSrc);
18 | const canvas = document.createElement('canvas');
19 | const ctx = canvas.getContext('2d');
20 |
21 | const safeArea = Math.max(image.width, image.height);
22 |
23 | // set each dimensions to double largest dimension to allow for a safe area for the
24 | // image to rotate in without being clipped by canvas context
25 | const ios =
26 | !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
27 | canvas.width = ios ? 4096 : safeArea;
28 | canvas.height = ios ? 4096 : safeArea;
29 |
30 | // draw rotated image and store data.
31 | ctx.drawImage(image, safeArea - image.width, safeArea - image.height);
32 | const data = ctx.getImageData(0, 0, safeArea, safeArea);
33 |
34 | // set canvas width to final desired crop size - this will clear existing context
35 | canvas.width = pixelCrop.width;
36 | canvas.height = pixelCrop.height;
37 |
38 | // paste generated rotate image with correct offsets for x,y crop values.
39 | ctx.putImageData(
40 | data,
41 | 0 - safeArea + image.width - pixelCrop.x,
42 | 0 - safeArea + image.height - pixelCrop.y,
43 | );
44 |
45 | // As Base64 string
46 | // return canvas.toDataURL('image/jpeg');
47 |
48 | // As a blob
49 | return new Promise(resolve => {
50 | canvas.toBlob(file => {
51 | upload(file);
52 | resolve(URL.createObjectURL(file));
53 | }, 'image/jpeg');
54 | });
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/profile/components/cropper/cropper.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useCallback } from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Slider from '@material-ui/core/Slider';
4 | import Cropper from 'react-easy-crop';
5 | import Button from '@material-ui/core/Button';
6 | import ArrowBackIcon from '@material-ui/icons/ArrowBack';
7 | import getCroppedImg from './cropImage';
8 |
9 | const useCropperStyles = makeStyles(() => ({
10 | cropWrapper: {
11 | position: 'relative',
12 | height: '60vh',
13 | },
14 | cropContainer: {
15 | position: 'absolute',
16 | top: '0',
17 | left: '0',
18 | right: '0',
19 | bottom: '80px',
20 | backgroundColor: 'white',
21 | },
22 | controls: {
23 | position: 'absolute',
24 | bottom: '0',
25 | left: '50%',
26 | width: '50%',
27 | transform: 'translateX(-50%)',
28 | height: '80px',
29 | display: 'flex',
30 | alignItems: 'center',
31 | },
32 | slider: {
33 | padding: '22px 0px',
34 | },
35 | cropButton: {
36 | flexShrink: '0',
37 | marginLeft: '16',
38 | },
39 | }));
40 |
41 | const CropperImg = ({
42 | imageToSave,
43 | croppedImage,
44 | setCroppedImage,
45 | upload,
46 | finalImage,
47 | sendCroppedImageServer,
48 | }) => {
49 | const classes = useCropperStyles();
50 | const [crop, setCrop] = useState({ x: 0, y: 0 });
51 | const [zoom, setZoom] = useState(1);
52 | const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
53 | const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
54 | setCroppedAreaPixels(croppedAreaPixels);
55 | }, []);
56 |
57 | const showCroppedImage = useCallback(async () => {
58 | try {
59 | getCroppedImg(imageToSave, croppedAreaPixels, upload).then(image =>
60 | setCroppedImage(image),
61 | );
62 | } catch (e) {
63 | console.error(e);
64 | }
65 | }, [setCroppedImage, imageToSave, croppedAreaPixels, upload]);
66 |
67 | const closeCroppedImg = useCallback(() => {
68 | setCroppedImage(null);
69 | }, [setCroppedImage]);
70 |
71 | if (!croppedImage) {
72 | return (
73 | -
56 | {notifications.map(notification => {
57 | const notifLink = `/profile/${notification.username}`;
58 | return (
59 |
74 |
104 | );
105 | }
106 | return (
107 |
75 |
85 |
86 | setZoom(zoom)}
93 | />
94 |
95 |
103 |
108 |
131 | );
132 | };
133 |
134 | export default CropperImg;
135 |
--------------------------------------------------------------------------------
/src/components/profile/components/current-pictures.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HighlightOffIcon from '@material-ui/icons/HighlightOff';
3 | import Fab from '@material-ui/core/Fab';
4 |
5 | const CurrentPictures = ({
6 | pictures,
7 | classes,
8 | Grid,
9 | Box,
10 | handleDeleteImage,
11 | handleChangeProfileImage,
12 | profilePicture,
13 | }) => {
14 | if (pictures) {
15 | return pictures.map(pictureUrl => (
16 |
109 | 
110 |
111 |
119 |
130 | Aucune photo
54 |
19 |
20 | {title}
21 |
22 |
44 | );
45 | }
46 | if (name === 'description') {
47 | return (
48 |
49 |
50 | {title}
51 |
52 |
64 | );
65 | }
66 | return (
67 |
68 |
69 | {title}
70 |
71 |
81 | );
82 | };
83 |
84 | export default InputTextShort;
85 |
--------------------------------------------------------------------------------
/src/components/profile/components/location/address-autocomplete.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GooglePlacesAutocomplete, {
3 | getLatLng,
4 | geocodeByAddress,
5 | } from 'react-google-places-autocomplete';
6 | import 'react-google-places-autocomplete/dist/assets/index.css';
7 |
8 | const AddressAutocomplete = ({ handleChangeLocation, classes }) => {
9 | const changeLocation = address => {
10 | geocodeByAddress(address)
11 | .then(results => getLatLng(results[0]))
12 | .then(({ lat, lng }) => {
13 | const newLocation = [lat, lng];
14 | handleChangeLocation(newLocation);
15 | });
16 | };
17 | return (
18 | <>
19 | 
11 | );
12 |
13 | const Map = ({ lat, lon }) => {
14 | const [center] = useState({ lat, lng: lon });
15 | const [zoom] = useState(11);
16 | return (
17 |
18 |
23 |
25 |
26 | );
27 | };
28 |
29 | export default Map;
30 |
--------------------------------------------------------------------------------
/src/components/profile/components/modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Modal from 'react-bootstrap/Modal';
3 | import CropperImg from './cropper/cropper';
4 | import 'bootstrap/dist/css/bootstrap.min.css';
5 |
6 | const ModalCrop = ({
7 | showModal,
8 | setShowModal,
9 | imageToSave,
10 | croppedImage,
11 | setCroppedImage,
12 | upload,
13 | finalImage,
14 | sendCroppedImageServer,
15 | }) => {
16 | return (
17 | <>
18 |
47 | Disconnected {moment(lastConnection).fromNow()}
48 |
49 | ) : null}
50 |
51 | );
52 | };
53 |
54 | export default LoggedDot;
55 |
--------------------------------------------------------------------------------
/src/components/profileshow/index.js:
--------------------------------------------------------------------------------
1 | import ProfileShow from './profileshow-view';
2 |
3 | export default ProfileShow;
4 |
--------------------------------------------------------------------------------
/src/components/profileshow/profileshow-container.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { useState, useContext } from 'react';
3 | import _ from 'lodash';
4 | import { toast } from 'react-toastify';
5 | import { AuthContext } from '../app/AuthContext';
6 |
7 | const ProfileShowContainer = visitedUsername => {
8 | const [visitedProfile, setVisitedProfile] = useState({});
9 | const [loaded, setLoaded] = useState(false);
10 | const [loading, setLoading] = useState(false);
11 | const { authContext } = useContext(AuthContext);
12 | const { token } = authContext;
13 |
14 | const handleBlock = (blockedId, blocked, setBlocked) => {
15 | axios
16 | .post(
17 | `${process.env.REACT_APP_PUBLIC_API_URL}/block/block-unblock/${blockedId}`,
18 | {},
19 | {
20 | headers: {
21 | 'Content-type': 'application/json; charset=UTF-8',
22 | 'x-access-token': token,
23 | },
24 | },
25 | )
26 | .then(result => {
27 | if (result.data.deleted === true) {
28 | setBlocked(false);
29 | toast.success('You just unblocked this user');
30 | }
31 | if (result.data.created === true) {
32 | setBlocked(true);
33 | toast.success('You just blocked this user');
34 | }
35 | })
36 | .catch(error => {
37 | if (process.env.REACT_APP_VERBOSE === 'true') console.log(error);
38 | });
39 | };
40 |
41 | const handleReport = (reportedId, reported, setReported) => {
42 | axios
43 | .post(
44 | `${process.env.REACT_APP_PUBLIC_API_URL}/report/${reportedId}`,
45 | {},
46 | {
47 | headers: {
48 | 'Content-type': 'application/json; charset=UTF-8',
49 | 'x-access-token': token,
50 | },
51 | },
52 | )
53 | .then(result => {
54 | if (result.data.success) {
55 | setReported(true);
56 | }
57 | })
58 | .catch(error => {
59 | if (process.env.REACT_APP_VERBOSE === 'true') console.log(error);
60 | });
61 | };
62 |
63 | const handleLike = (likedId, setLiked) => {
64 | axios
65 | .get(
66 | `${process.env.REACT_APP_PUBLIC_API_URL}/likes/like-unlike/${likedId}`,
67 | {
68 | headers: {
69 | 'Content-type': 'application/json; charset=UTF-8',
70 | 'x-access-token': token,
71 | },
72 | },
73 | )
74 | .then(result => {
75 | if (result.data.deleted === true) {
76 | setLiked(false);
77 | toast.success('You just unliked this user');
78 | if (visitedProfile.match === true) {
79 | setVisitedProfile({ ...visitedProfile, match: false });
80 | }
81 | }
82 | if (result.data.created === true) {
83 | setLiked(true);
84 | toast.success('You just liked this user');
85 | if (
86 | visitedProfile.match === false &&
87 | visitedProfile.visitedlikevisitor === true
88 | ) {
89 | toast.info("It's a match!");
90 | setVisitedProfile({ ...visitedProfile, match: true });
91 | }
92 | }
93 | })
94 | .catch(error => {
95 | if (process.env.REACT_APP_VERBOSE === 'true') console.log(error);
96 | });
97 | };
98 |
99 | const fetchVisitedProfile = () =>
100 | axios
101 | .get(
102 | `${process.env.REACT_APP_PUBLIC_API_URL}/users/profile/${visitedUsername}`,
103 | {
104 | headers: {
105 | 'Content-type': 'application/json; charset=UTF-8',
106 | 'x-access-token': token,
107 | },
108 | },
109 | )
110 | .then(response => {
111 | return response.data;
112 | })
113 | .catch(error => {
114 | if (process.env.REACT_APP_VERBOSE === 'true') console.log(error);
115 | });
116 |
117 | if (_.isEmpty(visitedProfile) && loading === false) {
118 | setLoading(true);
119 | fetchVisitedProfile().then(data => {
120 | if (data.founded === true) {
121 | setVisitedProfile(data);
122 | setLoaded(true);
123 | setLoading(false);
124 | } else if (data.success === false) {
125 | window.location = '/?message=user_not_found';
126 | } else if (data.authorized === false) {
127 | window.location = '/profile?message=profile_not_completed';
128 | } else if (data.blocked === true) {
129 | window.location = '/?message=user_blocked_you';
130 | }
131 | });
132 | }
133 |
134 | return { visitedProfile, loaded, handleBlock, handleReport, handleLike };
135 | };
136 |
137 | export default ProfileShowContainer;
138 |
--------------------------------------------------------------------------------
/src/components/search/index.js:
--------------------------------------------------------------------------------
1 | import Search from './search-view';
2 |
3 | export default Search;
4 |
--------------------------------------------------------------------------------
/src/components/search/search-container.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { useState, useContext } from 'react';
3 | import { toast } from 'react-toastify';
4 | import _ from 'lodash';
5 | import { AuthContext } from '../app/AuthContext';
6 |
7 | const SearchContainer = () => {
8 | const [loaded, setLoaded] = useState(false);
9 | const [currentUserProfile, setCurrentUserProfile] = useState({});
10 | const [searchResult, setSearchResult] = useState([]);
11 | const [searchOptions, setSearchOptions] = useState({
12 | ageRange: [18, 85],
13 | popularityRange: [0, 100],
14 | interests: [],
15 | distanceMax: 100,
16 | sort: '',
17 | });
18 | const { authContext } = useContext(AuthContext);
19 | const { userData, token } = authContext;
20 |
21 | const handleLike = likedId => {
22 | axios
23 | .get(
24 | `${process.env.REACT_APP_PUBLIC_API_URL}/likes/like-unlike/${likedId}`,
25 | {
26 | headers: {
27 | 'Content-type': 'application/json; charset=UTF-8',
28 | 'x-access-token': token,
29 | },
30 | },
31 | )
32 | .then(result => {
33 | if (result.data.blocked) {
34 | toast.error(result.data.message);
35 | } else {
36 | const indexToModify = _.keys(
37 | _.pickBy(searchResult, { visitor: likedId }),
38 | );
39 |
40 | const newSearchResult = searchResult;
41 | indexToModify.forEach(index => {
42 | newSearchResult[parseInt(index, 10)] = {
43 | ...newSearchResult[parseInt(index, 10)],
44 | liking: !searchResult[parseInt(index, 10)].liking,
45 | };
46 | });
47 | document
48 | .querySelectorAll(`[visitor*="${likedId}"]`)
49 | .forEach(element => {
50 | if (element.classList.contains('MuiIconButton-colorSecondary'))
51 | element.classList.remove('MuiIconButton-colorSecondary');
52 | else element.className += ' MuiIconButton-colorSecondary';
53 | });
54 | setSearchResult(newSearchResult);
55 | }
56 | });
57 | };
58 |
59 | const handleSort = (event, profiles = searchResult) => {
60 | let sortChoice = '';
61 | if (event) {
62 | sortChoice = event.target.value;
63 | } else {
64 | sortChoice = searchOptions.sort;
65 | }
66 | let order = '';
67 | switch (sortChoice) {
68 | case 'distance':
69 | order = 'asc';
70 | break;
71 | case 'ageAsc':
72 | order = 'asc';
73 | break;
74 | case 'ageDesc':
75 | order = 'desc';
76 | break;
77 | case 'popularity':
78 | order = 'desc';
79 | break;
80 | case 'interests':
81 | order = 'asc';
82 | break;
83 | default:
84 | }
85 | const newSearchOptions = { ...searchOptions, sort: sortChoice };
86 | setSearchOptions(newSearchOptions);
87 | setSearchResult(
88 | _.orderBy(
89 | profiles,
90 | [
91 | profile => {
92 | switch (sortChoice) {
93 | case 'distance':
94 | return profile.distance;
95 | case 'ageAsc':
96 | return profile.age;
97 | case 'ageDesc':
98 | return profile.age;
99 | case 'popularity':
100 | return profile.popularityRate;
101 | case 'interests':
102 | return profile.interests[0] ? profile.interests[0] : 'ZZZZ';
103 | default:
104 | }
105 | },
106 | ],
107 | [order],
108 | ),
109 | );
110 | };
111 |
112 | const handleChangeSlider = (type, newValue) => {
113 | if (type === 'interests') {
114 | newValue = newValue.map(interest => {
115 | return interest.name;
116 | });
117 | const newSearchOptions = { ...searchOptions, [type]: newValue };
118 | setSearchOptions(newSearchOptions);
119 | fetchSearch(newSearchOptions);
120 | return;
121 | }
122 | const newSearchOptions = { ...searchOptions, [type]: newValue };
123 | setSearchOptions(newSearchOptions);
124 | };
125 |
126 | const fetchSearch = (searchQuery = searchOptions) => {
127 | axios
128 | .post(
129 | `${process.env.REACT_APP_PUBLIC_API_URL}/users/search`,
130 | searchQuery,
131 | {
132 | headers: {
133 | 'Content-type': 'application/json; charset=UTF-8',
134 | 'x-access-token': token,
135 | },
136 | },
137 | )
138 | .then(result => {
139 | if (result.data.authorized === false) {
140 | window.location = '/profile?message=profile_not_completed';
141 | return;
142 | }
143 | handleSort(null, result.data);
144 | });
145 | };
146 |
147 | if (_.isEmpty(currentUserProfile) && loaded === false) {
148 | userData.then(value => {
149 | setCurrentUserProfile(value.data);
150 | fetchSearch();
151 | setLoaded(true);
152 | });
153 | }
154 | return {
155 | currentUserProfile,
156 | loaded,
157 | searchResult,
158 | searchOptions,
159 | handleChangeSlider,
160 | setSearchOptions,
161 | fetchSearch,
162 | handleLike,
163 | handleSort,
164 | };
165 | };
166 |
167 | export default SearchContainer;
168 |
--------------------------------------------------------------------------------
/src/components/search/search-view.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CircularProgress from '@material-ui/core/CircularProgress';
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Divider from '@material-ui/core/Divider';
5 | import SearchFilters from './components/search-filters';
6 | import ProfilesGrid from '../shared/profiles-grid';
7 | import Title from '../shared/title';
8 | import SearchContainer from './search-container';
9 |
10 | const useStyles = makeStyles(theme => ({
11 | wrapper: {
12 | display: 'flex',
13 | flexDirection: 'row',
14 | justifyContent: 'center',
15 | marginLeft: 'auto',
16 | marginRight: 'auto',
17 | maxWidth: '1500px',
18 | marginTop: '10px',
19 | },
20 | center: {
21 | display: 'flex',
22 | flexDirection: 'column',
23 | justifyContent: 'center',
24 | alignItems: 'center',
25 | },
26 | progress: {
27 | height: '100vh',
28 | display: 'flex',
29 | flexDirection: 'row',
30 | justifyContent: 'center',
31 | alignItems: 'center',
32 | },
33 | filtersContainer: {
34 | width: '100%',
35 | display: 'flex',
36 | flexDirection: 'column',
37 | justifyContent: 'space-between',
38 | padding: '10px',
39 | },
40 | filtersButtonContainer: {
41 | width: '100%',
42 | display: 'flex',
43 | flexDirection: 'row',
44 | justifyContent: 'space-around',
45 | position: 'relative',
46 | },
47 | sliderContainer: {
48 | position: 'absolute',
49 | backgroundColor: 'red',
50 | },
51 | slider: {
52 | width: '100%',
53 | },
54 | menuItem: {
55 | width: '600px',
56 | height: '300px',
57 | textDecoration: 'none',
58 | },
59 | titleGutterbottom: {
60 | marginBottom: theme.spacing(2),
61 | },
62 | }));
63 |
64 | const Search = () => {
65 | const {
66 | currentUserProfile,
67 | loaded,
68 | searchResult,
69 | searchOptions,
70 | handleChangeSlider,
71 | fetchSearch,
72 | handleLike,
73 | handleSort,
74 | } = SearchContainer();
75 | const classes = useStyles();
76 |
77 | if (loaded === false) {
78 | return (
79 |
80 |
82 | );
83 | }
84 |
85 | return (
86 | <>
87 |
35 |
36 |
42 |
44 | }
45 | >
46 |
23 |
24 | {textTitle}
25 |
26 |
27 | );
28 | };
29 |
30 | export default Title;
31 |
--------------------------------------------------------------------------------
/src/components/signup/index.js:
--------------------------------------------------------------------------------
1 | import Signup from './signup-view';
2 |
3 | export default Signup;
4 |
--------------------------------------------------------------------------------
/src/components/signup/signup-container.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { toast } from 'react-toastify';
3 | import axios from 'axios';
4 |
5 | const useSignUpForm = callback => {
6 | const [inputs, setInputs] = useState({
7 | firstname: '',
8 | surname: '',
9 | username: '',
10 | email: '',
11 | password1: '',
12 | password2: '',
13 | });
14 | const { firstname, surname, username, email, password1 } = inputs;
15 | const handleSubmit = event => {
16 | if (event) {
17 | event.preventDefault();
18 | axios
19 | .post(
20 | `${process.env.REACT_APP_PUBLIC_API_URL}/users`,
21 | {
22 | firstname,
23 | surname,
24 | username,
25 | email,
26 | password: password1,
27 | },
28 | {
29 | headers: {
30 | 'Content-type': 'application/json; charset=UTF-8',
31 | },
32 | },
33 | )
34 | .then(({ data }) => {
35 | if (data.created === true) {
36 | callback(true);
37 | } else {
38 | data.errors.forEach(error => {
39 | toast.error(error);
40 | });
41 | }
42 | });
43 | }
44 | };
45 | const handleInputChange = event => {
46 | event.persist();
47 | const newInput = {
48 | ...inputs,
49 | [event.target.name]: event.target.value,
50 | };
51 | setInputs(newInput);
52 | };
53 | return {
54 | handleSubmit,
55 | handleInputChange,
56 | inputs,
57 | };
58 | };
59 |
60 | export default useSignUpForm;
61 |
--------------------------------------------------------------------------------
/src/components/signup/signup-view.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Container from '@material-ui/core/Container';
3 | import Avatar from '@material-ui/core/Avatar';
4 | import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
5 | import Typography from '@material-ui/core/Typography';
6 | import TextField from '@material-ui/core/TextField';
7 | import Button from '@material-ui/core/Button';
8 | import Grid from '@material-ui/core/Grid';
9 | import Link from '@material-ui/core/Link';
10 | import { makeStyles } from '@material-ui/core/styles';
11 |
12 | import useSignUpForm from './signup-container';
13 |
14 | const useStyles = makeStyles(theme => ({
15 | '@global': {
16 | body: {
17 | backgroundColor: theme.palette.common.white,
18 | },
19 | },
20 | paper: {
21 | marginTop: theme.spacing(8),
22 | display: 'flex',
23 | flexDirection: 'column',
24 | alignItems: 'center',
25 | },
26 | avatar: {
27 | margin: theme.spacing(1),
28 | backgroundColor: theme.palette.secondary.main,
29 | },
30 | form: {
31 | width: '100%', // Fix IE 11 issue.
32 | marginTop: theme.spacing(3),
33 | },
34 | submit: {
35 | margin: theme.spacing(3, 0, 2),
36 | },
37 | }));
38 |
39 | const Signup = () => {
40 | const signup = success => {
41 | if (success) {
42 | window.location = '/?message=signup_success';
43 | }
44 | };
45 | const { inputs, handleInputChange, handleSubmit } = useSignUpForm(signup);
46 | const classes = useStyles();
47 |
48 | return (
49 |
51 |
52 |
54 |
55 | Sign up
56 |
57 |
167 |
168 |
80 |
82 | );
83 | }
84 |
85 | return (
86 | <>
87 | Chargement en cours
; 24 | }; 25 | 26 | UserValidation.propTypes = { 27 | // eslint-disable-next-line react/forbid-prop-types 28 | computedMatch: PropTypes.object.isRequired, 29 | }; 30 | 31 | export default UserValidation; 32 | -------------------------------------------------------------------------------- /src/components/visit/index.js: -------------------------------------------------------------------------------- 1 | import Visit from './visit-view'; 2 | 3 | export default Visit; 4 | -------------------------------------------------------------------------------- /src/components/visit/visit-container.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import { useState, useContext } from 'react'; 3 | import _ from 'lodash'; 4 | import { toast } from 'react-toastify'; 5 | import { AuthContext } from '../app/AuthContext'; 6 | 7 | const VisitContainer = () => { 8 | const [loaded, setLoaded] = useState(false); 9 | const [visitedProfile, setVisitedProfile] = useState({}); 10 | const [visitorProfile, setVisitorProfile] = useState({}); 11 | const { authContext } = useContext(AuthContext); 12 | const { userData, token } = authContext; 13 | 14 | const handleLike = likedId => { 15 | axios 16 | .get( 17 | `${process.env.REACT_APP_PUBLIC_API_URL}/likes/like-unlike/${likedId}`, 18 | { 19 | headers: { 20 | 'Content-type': 'application/json; charset=UTF-8', 21 | 'x-access-token': token, 22 | }, 23 | }, 24 | ) 25 | .then(result => { 26 | if (result.data.blocked) { 27 | toast.error(result.data.message); 28 | } else { 29 | const indexToModify = _.keys( 30 | _.pickBy(visitedProfile, { visitor: likedId }), 31 | ); 32 | 33 | const newVisitedProfile = visitedProfile; 34 | indexToModify.forEach(index => { 35 | newVisitedProfile[parseInt(index, 10)] = { 36 | ...newVisitedProfile[parseInt(index, 10)], 37 | liking: !visitedProfile[parseInt(index, 10)].liking, 38 | }; 39 | }); 40 | document 41 | .querySelectorAll(`[visitor*="${likedId}"]`) 42 | .forEach(element => { 43 | if (element.classList.contains('MuiIconButton-colorSecondary')) 44 | element.classList.remove('MuiIconButton-colorSecondary'); 45 | else element.className += ' MuiIconButton-colorSecondary'; 46 | }); 47 | setVisitedProfile(newVisitedProfile); 48 | } 49 | }); 50 | }; 51 | 52 | const fetchVisitHistory = () => 53 | axios 54 | .get(`${process.env.REACT_APP_PUBLIC_API_URL}/visits/`, { 55 | headers: { 56 | 'Content-type': 'application/json; charset=UTF-8', 57 | 'x-access-token': token, 58 | }, 59 | }) 60 | .then(response => { 61 | return response.data; 62 | }) 63 | .catch(error => { 64 | if (process.env.REACT_APP_VERBOSE === 'true') console.log(error); 65 | }); 66 | 67 | if (_.isEmpty(visitedProfile) && loaded === false) { 68 | Promise.all([userData, fetchVisitHistory()]).then(values => { 69 | setVisitedProfile(values[1]); 70 | setVisitorProfile(values[0].data); 71 | setLoaded(true); 72 | }); 73 | } 74 | 75 | return { visitedProfile, visitorProfile, loaded, handleLike }; 76 | }; 77 | 78 | export default VisitContainer; 79 | -------------------------------------------------------------------------------- /src/components/visit/visit-view.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CircularProgress from '@material-ui/core/CircularProgress'; 3 | import { makeStyles } from '@material-ui/core/styles'; 4 | import VisitContainer from './visit-container'; 5 | import Title from '../shared/title'; 6 | import ProfilesGrid from '../shared/profiles-grid'; 7 | 8 | const useStyles = makeStyles(theme => ({ 9 | wrapper: { 10 | display: 'flex', 11 | flexDirection: 'row', 12 | justifyContent: 'center', 13 | marginLeft: 'auto', 14 | marginRight: 'auto', 15 | maxWidth: '1500px', 16 | marginTop: '10px', 17 | }, 18 | center: { 19 | display: 'flex', 20 | flexDirection: 'column', 21 | justifyContent: 'center', 22 | alignItems: 'center', 23 | }, 24 | progress: { 25 | height: '100vh', 26 | display: 'flex', 27 | flexDirection: 'row', 28 | justifyContent: 'center', 29 | alignItems: 'center', 30 | }, 31 | emptyPageWrapper: { 32 | display: 'flex', 33 | flexDirection: 'row', 34 | justifyContent: 'center', 35 | }, 36 | emptyPageText: { 37 | maxWidth: "700px", 38 | margin: theme.spacing(2), 39 | }, 40 | })); 41 | 42 | const Visit = ({ computedMatch }) => { 43 | const visitedUsername = computedMatch.params.username; 44 | 45 | const { visitedProfile, visitorProfile, loaded, handleLike } = VisitContainer( 46 | visitedUsername, 47 | ); 48 | const classes = useStyles(); 49 | 50 | if (loaded === false) { 51 | return ( 52 |
53 |
55 | );
56 | }
57 |
58 | return (
59 | <>
60 |