last changes

Author: romanrakhlin

.DS_Store

@@ -32,10 +32,12 @@
     "eruda-code": "^2.0.0",
     "eruda-dom": "^2.0.0",
     "firebase": "^7.16.1",
+    "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-deck-swiper": "^1.0.9",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
     "react-tinder-card": "^1.1.4"
   },
   "browserslist": {

bundle.zip

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from "react";
 import bridge from "@vkontakte/vk-bridge";
 import ScreenSpinner from "@vkontakte/vkui/dist/components/ScreenSpinner/ScreenSpinner"
-import { View, Root, Alert, Avatar, Snackbar, ModalRoot, ModalPage, ModalPageHeader, PanelHeaderButton, Div, Button, Group, RichCell } from "@vkontakte/vkui";
-import Icon16Done from "@vkontakte/icons/dist/16/done";
+import { Root, View, Alert, Avatar, Snackbar } from "@vkontakte/vkui";
 import Icon24Camera from "@vkontakte/icons/dist/24/camera";
 import Icon24Place from "@vkontakte/icons/dist/24/place";
 import Icon24NotificationCheckOutline from "@vkontakte/icons/dist/24/notification_check_outline";
 import Icon24Done from "@vkontakte/icons/dist/24/done";
-import Icon24Repeat from "@vkontakte/icons/dist/24/repeat";
-import Icon28EditOutline from "@vkontakte/icons/dist/28/edit_outline";
 import Icon16CheckCircleOutline from '@vkontakte/icons/dist/16/check_circle_outline';
 import Icon16CancelCircleOutline from '@vkontakte/icons/dist/16/cancel_circle_outline';
+import Icon28UserOutline from '@vkontakte/icons/dist/28/user_outline';
+import Icon28FireOutline from '@vkontakte/icons/dist/28/fire_outline';
+import Icon28LikeOutline from '@vkontakte/icons/dist/28/like_outline';
 import "@vkontakte/vkui/dist/vkui.css";
 import "./css/Home.css";
 
@@ -43,24 +43,7 @@ const App = () => {
 	// Основные константы
 	const [activeView, setActiveView] = useState("home");
 	const [activePanel, setActivePanel] = useState("screen1");
-	const [fetchedUser, setUser] = useState({
-		id: 0,
-	    first_name: "",
-	    last_name: "",
-	    sex: 0,
-	    city: {
-		    id: 0,
-		    title: ""
-	    },
-	    country: {
-		    id: 0,
-		    title: ""
-	    },
-	    photo_100: "",
-	    photo_max_orig: "",
-	    photo_200: "",
-	    timezone: 0,
-    });
+	const [fetchedUser, setUser] = useState(null);
 
 	const [popout, setPopout] = useState(null);
 	const [snackbarIsActive, setSnackbarIsActive] = useState(false)
@@ -87,21 +70,20 @@ const App = () => {
 	const [notDecidedArray, setNotDecidedArray] = useState([]);
 
 	useEffect(() => {
-		// Theme changer
-		bridge.subscribe(({ detail: { type, data }}) => {
-    		if (type === "VKWebAppUpdateConfig") {
-        		const schemeAttribute = document.createAttribute("scheme");
-        		schemeAttribute.value = data.scheme ? data.scheme : "bright_light";
-        		document.body.attributes.setNamedItem(schemeAttribute);
-    		}
-		});
+		// bridge.subscribe(({ detail: { type, data }}) => {
+    	// 	if (type === "VKWebAppUpdateConfig") {
+		// 		const schemeAttribute = document.createAttribute("scheme");
+		// 		schemeAttribute.value = data.scheme;
+		// 		document.body.attributes.setNamedItem(schemeAttribute);
+    	// 	}
+		// });
 
 		// Функция для получения данных о пользователе
 		async function fetchData() {
 			const user = await bridge.send("VKWebAppGetUserInfo");
 
 			// Присваиваем данные в константу fetchedUser
-			setUser({...user});
+			setUser(user);
     	}
 
 		// Вызываем функцию
@@ -120,7 +102,6 @@ const App = () => {
 	// Метод для проверки если ли Юзер в БД
 	async function onUserData() {
 		console.log('onUserData')
-		setPopout(<ScreenSpinner size="large"/>);
 		if (fetchedUser) {
 			await usersRef.doc("id" + fetchedUser.id).get().then(function(doc) {
 				// Если есть
@@ -137,12 +118,10 @@ const App = () => {
 
 					// Вызываем метод для Получения и Сортировки всех пользователей
 					getAllUsers();
-					setPopout(null);
 					setActiveView("home");
 				// Если нету
 				} else {
 					console.log("User does not exist");
-					setPopout(null);
 					setActiveView("onboarding");
 				}
 			});
@@ -172,7 +151,7 @@ const App = () => {
 			// Кладем в массив likedYouArray тех юзеров, которых лайкнул текущий юзер
 			await usersRef.doc("id" + fetchedUser.id).collection("liked_you").get().then(function(querySnapshot) {
 				querySnapshot.forEach(function(doc) {
-					if (doc.data().status == "none") {
+					if (doc.data().status === "none") {
 						notDecided.push(doc.data());
 					}
 					likedYouArray.push(doc.data());
@@ -196,14 +175,13 @@ const App = () => {
 					return;
 				} else {
 					// Проверка нужна чтобы убрать карточку самого себя
-					if (doc.data().id == userId) {
+					if (doc.data().id === userId) {
 						return;
 					} else {
-						let distance = sortAllUsers(lat, long, doc.data().lat, doc.data().long);
-
 						// Когда в прилоежниее будет больше человек
-							// if (distance <= 50) {
-							// }
+						// let distance = sortAllUsers(lat, long, doc.data().lat, doc.data().long);
+						// if (distance <= 50) {
+						// }
 
 						// Пока что отображаем всех пользователей
 						dataArray.push(doc.data());
@@ -382,7 +360,7 @@ const App = () => {
 				}
 			} catch (error) {
 	    		const result = Object.assign({ success: false, message: error.message, imageFile });
-				console.log("Error");
+				console.log(result);
 				setCancelPhoto(true);
 				setPopout(null);
 	  		}
@@ -643,16 +621,6 @@ const App = () => {
     	)
   	}
 
-	// Метод для перехода на другие View
-	const goToNextView = e => {
-		setActiveView(e.currentTarget.dataset.to);
-	};
-
-	// Метод для перехода на другие Panel
-	const goToNextPanel = e => {
-		setActivePanel(e.currentTarget.dataset.to);
-	};
-
 	// Метод для отправклю уведомлений принимая само сообщение и id человека которому пойдет уведомление
 	const sendNotifications = (message, senderId) => {
 		if (fetchedUser) {
@@ -677,6 +645,16 @@ const App = () => {
 		}
 	}
 
+	// Метод для перехода на другие Panel
+	const goToNextView = e => {
+		setActiveView(e.currentTarget.dataset.to);
+	};
+
+	// Метод для перехода на другие Panel
+	const goToNextPanel = e => {
+		setActivePanel(e.currentTarget.dataset.to);
+	};
+
 	// Возвращаем все экраны по уровням
 	return (
 		<Root activeView={activeView} popout={popout} snackbar={snackbar}>
@@ -690,41 +668,40 @@ const App = () => {
 			<View id="home" activePanel="home">
 				<Home
 					id="home"
-					goToNextView={goToNextView}
 					usersData={usersData}
 					updateLike={updateLike}
 					sendNotifications={sendNotifications}
 					snackbar={snackbar}
 					notDecidedArray={notDecidedArray}
 					openLikeSnackbar={openLikeSnackbar}
 					openDislikeSnackbar={openDislikeSnackbar}
+					goToNextView={goToNextView}
 				/>
 			</View>
 			<View id="likes" activePanel="likes">
 				<Likes
 					id="likes"
-					goToNextView={goToNextView}
 					likedYou={likedYou}
 					updateStatus={updateStatus}
 					sendNotifications={sendNotifications}
+					goToNextView={goToNextView}
 				/>
 			</View>
 			<View id="show" activePanel="show">
 				<Show
 					id="show"
-					goToNextView={goToNextView}
 					username={username}
 					userAge={userAge}
 					userBio={userBio}
 					userFileUrl={userFileUrl}
 					showAskAlert={showAskAlert}
 					snackbar={snackbar}
+					goToNextView={goToNextView}
 				/>
 			</View>
 			<View id="edit" activePanel="edit">
 				<Edit
 					id="edit"
-					goToNextView={goToNextView}
 					onFileChange={onFileChange}
 					confirmLocation={confirmLocation}
 					username={username}
@@ -733,18 +710,19 @@ const App = () => {
 					updatePersonalData={updatePersonalData}
 					showEditAlert={showEditAlert}
 					snackbar={snackbar}
+					goToNextView={goToNextView}
 				/>
 			</View>
 			<View id="create" activePanel="create">
 				<Create
 					id="create"
-					goToNextView={goToNextView}
 					onFileChange={onFileChange}
 					savePersonalData={savePersonalData}
 					showCreateAlert={showCreateAlert}
 					showPhotoAlert={showPhotoAlert}
 					cancelPhoto={cancelPhoto}
 					snackbar={snackbar}
+					goToNextView={goToNextView}
 				/>
 			</View>
 		</Root>

package.json

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import ThumbDownIcon from '@material-ui/icons/ThumbDown';
-import ThumbUpIcon from '@material-ui/icons/ThumbUp';
+import { FaThumbsDown, FaThumbsUp } from "react-icons/fa";
+import './css/demo.scss';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -16,34 +15,40 @@ const useStyles = makeStyles((theme) => ({
     iconButtonContainerRight: {
         display: 'flex',
         justifyContent: 'flex-end',
-    },
+    }
 }));
 
-export default function CardButtons({
-    right,
-    left,
-}) {
+export default function CardButtons({right, left,}) {
     const classes = useStyles();
 
+    useEffect(() => {
+        let animateButton = function(e) {
+            e.target.classList.remove('animate');
+            e.target.classList.add('animate');
+            setTimeout(() => {
+                e.target.classList.remove('animate');
+            }, 800);
+        };
+        let likeButtons = document.getElementsByClassName("like-button");
+        let dislikeButtons = document.getElementsByClassName("dislike-button");
+
+        for (var i = 0; i < likeButtons.length; i++) {
+            likeButtons[i].addEventListener('click', animateButton, false);
+            dislikeButtons[i].addEventListener('click', animateButton, false);
+        }
+    }, []);
+
     return (
         <Grid container justify="space-between" className={classes.root}>
             <Grid item xs={6} className={classes.iconButtonContainerLeft}>
-                <IconButton
-                    onClick={left}
-                    aria-label="dislike"
-                    className={classes.margin}
-                >
-                    <ThumbDownIcon color="secondary" fontSize="large"/>
-                </IconButton>
+                <button onClick={left} className="dislike-button">
+                    <FaThumbsDown color="rgb(247, 18, 18)" size={38} style={{position: 'relative', zIndex: -9999 }} />
+                </button>
             </Grid>
             <Grid item xs={6} className={classes.iconButtonContainerRight}>
-                <IconButton
-                    onClick={right}
-                    aria-label="like"
-                    className={classes.margin}
-                >
-                    <ThumbUpIcon color="primary" fontSize="large" />
-                </IconButton>
+                <button onClick={right} className="like-button">
+                    <FaThumbsUp color="rgb(64, 233, 31)" size={38} style={{position: 'relative', zIndex: -9999 }} />
+                </button>
             </Grid>
         </Grid>
     );