From 31ce6cba1fde03bd3e60a8252ad9889fe30931f4 Mon Sep 17 00:00:00 2001 From: Pavel Darii Date: Sun, 28 Feb 2021 11:27:41 -0500 Subject: [PATCH 1/2] added functionality that when we push to send message, the window should scroll to the bottom --- src/App.js | 170 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 114 insertions(+), 56 deletions(-) diff --git a/src/App.js b/src/App.js index 7ff47fa..5f959ae 100644 --- a/src/App.js +++ b/src/App.js @@ -1,88 +1,146 @@ -import './App.css'; -import {useState,useEffect,useRef} from 'react'; -import {Button, Input,FormControl} from "@material-ui/core"; -import Brightness4Icon from "@material-ui/icons/Brightness4" -import SendIcon from '@material-ui/icons/Send' +import "./App.css"; +import { useState, useEffect, useRef } from "react"; +import { Button, Input, FormControl } from "@material-ui/core"; +import Brightness4Icon from "@material-ui/icons/Brightness4"; +import SendIcon from "@material-ui/icons/Send"; //import {IconButton} from '@material-ui/core' -import logo from './logo.png'; -import Messages from './Messages.js' -import db from "./firebase.js" +import logo from "./logo.png"; +import Messages from "./Messages.js"; +import db from "./firebase.js"; import firebase from "firebase"; function App() { + const [input, setInput] = useState(""); + const [messages, setMessages] = useState([]); + const [username, setUsername] = useState(""); + const [dark, setDark] = useState(false); + const scrollToBottom = () => { + endRef.current.scrollIntoView({ behaviour: "smooth" }); + }; - const [input,setInput]=useState(""); - const [messages,setMessages]=useState([]); - const [username,setUsername]=useState(""); - const [dark,setDark]=useState(false); - const scrollToBottom=()=>{ - endRef.current.scrollIntoView({behaviour:"smooth"}) - } - - useEffect(scrollToBottom,[]); + useEffect(scrollToBottom, []); - useEffect(()=>{ + useEffect(() => { setUsername(prompt("Kindly Enter Your Name")); - },[]) + }, []); - useEffect(()=>{db.collection('messages').orderBy("timestamp","asc").onSnapshot(snapshot=>setMessages(snapshot.docs.map(doc=>doc.data())))},[]) + useEffect(() => { + db.collection("messages") + .orderBy("timestamp", "asc") + .onSnapshot((snapshot) => + setMessages(snapshot.docs.map((doc) => doc.data())) + ); + }, []); - const endRef=useRef(null); + const endRef = useRef(null); - const newMessage=(event)=>{ + const newMessage = (event) => { event.preventDefault(); //setMessages([...messages,{message:input,username:username}]); - if(input!=="") - { - db.collection('messages').add({username:username,message:input,timestamp:firebase.firestore.FieldValue.serverTimestamp()}) + if (input !== "") { + db.collection("messages").add({ + username: username, + message: input, + timestamp: firebase.firestore.FieldValue.serverTimestamp(), + }); } + setInput(""); - } - const theme=(event)=>{ - if(dark===false) - { - document.body.classList.add('dark-bg'); + //scrolls to the bottom of the page + document + .getElementById("root") + .scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }); + }; + + const theme = (event) => { + if (dark === false) { + document.body.classList.add("dark-bg"); setDark(true); - } - else - { - document.body.classList.remove('dark-bg'); + } else { + document.body.classList.remove("dark-bg"); setDark(false); } - } + }; let but; - if(dark) - { - but=setInput(event.target.value)} /> - } - else - { - but=setInput(event.target.value)} /> + if (dark) { + but = ( + setInput(event.target.value)} + /> + ); + } else { + but = ( + setInput(event.target.value)} + /> + ); } return (
-