Skip to content

Commit 2c5af99

Browse files
Muntasir2001Muntasir2001
committed
fixed autoscrolling to bottom and removed horizontal scroll bar
1 parent ceb6c64 commit 2c5af99

File tree

6 files changed

+129
-15
lines changed

6 files changed

+129
-15
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"react-firebase-hooks": "^3.0.1",
1515
"react-router-dom": "^5.2.0",
1616
"react-scripts": "4.0.3",
17+
"react-scroll": "^1.8.2",
18+
"react-scroll-to-bottom": "^4.1.0",
1719
"web-vitals": "^1.0.1"
1820
},
1921
"scripts": {
@@ -40,4 +42,4 @@
4042
"last 1 safari version"
4143
]
4244
}
43-
}
45+
}

‎src/App.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ h1, h2, h3, p, a, li, label, input {
138138
}
139139

140140
.chatbox-body .chatbox-left .users {
141-
overflow: scroll;
141+
overflow-y: scroll;
142142
height: 79%;
143143
}
144144

@@ -182,7 +182,7 @@ h1, h2, h3, p, a, li, label, input {
182182
}
183183

184184
.chatbox-body .chatbox-right .messages {
185-
overflow: scroll;
185+
overflow-y: scroll;
186186
min-height: 70vh;
187187
max-height: 70vh;
188188
max-width: 70vw;

‎src/components/Auth.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import '../App.css';
2-
31
import React from 'react';
2+
import '../App.css';
43

54
import "firebase/firestore";
65
import "firebase/auth";

‎src/components/Chatarea.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { useEffect, useRef, useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22

33
import "firebase/firestore";
44
import "firebase/auth";
55
import firebase from "firebase/app";
6+
import ScrollBottom from './ScrollBottom';
67

78
import { useAuthState } from 'react-firebase-hooks/auth';
89
import { useCollectionData } from 'react-firebase-hooks/firestore';
@@ -18,10 +19,6 @@ const Chatarea = (props) => {
1819
//gets the current state of the logged in user
1920
const [user] = useAuthState(auth);
2021
const [messageDocID, setMessageDocID] = useState();
21-
22-
//scrolls to the bottom when a new message is entered
23-
const scrollTo = useRef();
24-
2522
const [formValue, setFormValue] = useState('');
2623

2724
const messageRef = db.collection('message').doc(messageDocID).collection('messages');
@@ -53,16 +50,13 @@ const Chatarea = (props) => {
5350
});
5451

5552
setFormValue('');
56-
57-
scrollTo.current.scrollIntoView({ behavior: 'smooth' });
5853
}
5954

6055
// useEffect(() => {
6156
// createMessageDocID();
6257
// // eslint-disable-next-line
6358
// }, []);
6459

65-
6660
useEffect(() => {
6761
createMessageDocID();
6862

@@ -100,7 +94,7 @@ const Chatarea = (props) => {
10094
);
10195
})
10296
}
103-
<div id="bottom" ref={scrollTo}></div>
97+
<ScrollBottom />
10498
</div>
10599
<div className="input-box">
106100
<form onSubmit={sendMessage}>

‎src/components/ScrollBottom.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { useEffect, useRef } from 'react';
2+
3+
const ScrollBottom = () => {
4+
const elementRef = useRef();
5+
useEffect(() => elementRef.current.scrollIntoView());
6+
return <div ref={elementRef} />;
7+
};
8+
9+
export default ScrollBottom;

‎yarn.lock

+111-1
Original file line numberDiff line numberDiff line change
@@ -1161,6 +1161,62 @@
11611161
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
11621162
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
11631163

1164+
"@emotion/cache@^10.0.27":
1165+
version "10.0.29"
1166+
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
1167+
integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
1168+
dependencies:
1169+
"@emotion/sheet" "0.9.4"
1170+
"@emotion/stylis" "0.8.5"
1171+
"@emotion/utils" "0.11.3"
1172+
"@emotion/weak-memoize" "0.2.5"
1173+
1174+
"@emotion/[email protected]":
1175+
version "0.8.0"
1176+
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
1177+
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
1178+
1179+
"@emotion/[email protected]":
1180+
version "0.7.4"
1181+
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
1182+
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
1183+
1184+
"@emotion/serialize@^0.11.15":
1185+
version "0.11.16"
1186+
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
1187+
integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
1188+
dependencies:
1189+
"@emotion/hash" "0.8.0"
1190+
"@emotion/memoize" "0.7.4"
1191+
"@emotion/unitless" "0.7.5"
1192+
"@emotion/utils" "0.11.3"
1193+
csstype "^2.5.7"
1194+
1195+
"@emotion/[email protected]":
1196+
version "0.9.4"
1197+
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
1198+
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
1199+
1200+
"@emotion/[email protected]":
1201+
version "0.8.5"
1202+
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
1203+
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
1204+
1205+
"@emotion/[email protected]":
1206+
version "0.7.5"
1207+
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
1208+
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
1209+
1210+
"@emotion/[email protected]":
1211+
version "0.11.3"
1212+
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
1213+
integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
1214+
1215+
"@emotion/[email protected]":
1216+
version "0.2.5"
1217+
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
1218+
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
1219+
11641220
"@eslint/eslintrc@^0.3.0":
11651221
version "0.3.0"
11661222
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
@@ -3541,6 +3597,11 @@ class-utils@^0.3.5:
35413597
isobject "^3.0.0"
35423598
static-extend "^0.1.1"
35433599

3600+
[email protected]:
3601+
version "2.2.6"
3602+
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
3603+
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
3604+
35443605
clean-css@^4.2.3:
35453606
version "4.2.3"
35463607
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3866,6 +3927,16 @@ create-ecdh@^4.0.0:
38663927
bn.js "^4.1.0"
38673928
elliptic "^6.5.3"
38683929

3930+
[email protected]:
3931+
version "10.0.27"
3932+
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
3933+
integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
3934+
dependencies:
3935+
"@emotion/cache" "^10.0.27"
3936+
"@emotion/serialize" "^0.11.15"
3937+
"@emotion/sheet" "0.9.4"
3938+
"@emotion/utils" "0.11.3"
3939+
38693940
create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
38703941
version "1.2.0"
38713942
resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -4151,6 +4222,11 @@ cssstyle@^2.2.0:
41514222
dependencies:
41524223
cssom "~0.3.6"
41534224

4225+
csstype@^2.5.7:
4226+
version "2.6.16"
4227+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
4228+
integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==
4229+
41544230
cyclist@^1.0.1:
41554231
version "1.0.1"
41564232
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -7399,6 +7475,11 @@ lodash.templatesettings@^4.0.0:
73997475
dependencies:
74007476
lodash._reinterpolate "^3.0.0"
74017477

7478+
lodash.throttle@^4.1.1:
7479+
version "4.1.1"
7480+
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
7481+
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
7482+
74027483
lodash.uniq@^4.5.0:
74037484
version "4.5.0"
74047485
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7493,6 +7574,11 @@ map-visit@^1.0.0:
74937574
dependencies:
74947575
object-visit "^1.0.0"
74957576

7577+
[email protected]:
7578+
version "2.0.1"
7579+
resolved "https://registry.yarnpkg.com/math-random/-/math-random-2.0.1.tgz#5604b16c6a9a4aee63aff13937fb909b27e46b3a"
7580+
integrity sha512-oIEbWiVDxDpl5tIF4S6zYS9JExhh3bun3uLb3YAinHPTlRtW4g1S66LtJrJ4Npq8dgIa8CLK5iPVah5n4n0s2w==
7581+
74967582
md5.js@^1.3.4:
74977583
version "1.3.5"
74987584
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9264,7 +9350,7 @@ [email protected], prompts@^2.0.1:
92649350
kleur "^3.0.3"
92659351
sisteransi "^1.0.5"
92669352

9267-
prop-types@^15.6.2, prop-types@^15.7.2:
9353+
prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
92689354
version "15.7.2"
92699355
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
92709356
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9625,6 +9711,25 @@ [email protected]:
96259711
optionalDependencies:
96269712
fsevents "^2.1.3"
96279713

9714+
react-scroll-to-bottom@^4.1.0:
9715+
version "4.1.0"
9716+
resolved "https://registry.yarnpkg.com/react-scroll-to-bottom/-/react-scroll-to-bottom-4.1.0.tgz#e39955aeaea27e36adb601de552b91a58f7be662"
9717+
integrity sha512-atWRfdhLFCG2dK4kAsCDCYvl327DDEi5BMO0kIU4D12u2o2UX+GmlKO8m7sPW86Vb3MlqL3+Gawv/79VQ90tXQ==
9718+
dependencies:
9719+
classnames "2.2.6"
9720+
create-emotion "10.0.27"
9721+
math-random "2.0.1"
9722+
prop-types "15.7.2"
9723+
simple-update-in "2.2.0"
9724+
9725+
react-scroll@^1.8.2:
9726+
version "1.8.2"
9727+
resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.8.2.tgz#68e35b74ae296c88e7863393c9fd49f05afa29f5"
9728+
integrity sha512-f2ZEG5fsPbPTySI9ekcFpETCcNlqbmwbQj9hhzYK8tkgv+PA8APatSt66o/q0KSkDZxyT98ONTtXp9x0lyowEw==
9729+
dependencies:
9730+
lodash.throttle "^4.1.1"
9731+
prop-types "^15.7.2"
9732+
96289733
react@^17.0.1:
96299734
version "17.0.1"
96309735
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -10367,6 +10472,11 @@ simple-swizzle@^0.2.2:
1036710472
dependencies:
1036810473
is-arrayish "^0.3.1"
1036910474

10475+
[email protected]:
10476+
version "2.2.0"
10477+
resolved "https://registry.yarnpkg.com/simple-update-in/-/simple-update-in-2.2.0.tgz#86607662635ea12e59b5341044244902aa7db1c8"
10478+
integrity sha512-FrW41lLiOs82jKxwq39UrE1HDAHOvirKWk4Nv8tqnFFFknVbTxcHZzDS4vt02qqdU/5+KNsQHWzhKHznDBmrww==
10479+
1037010480
sisteransi@^1.0.5:
1037110481
version "1.0.5"
1037210482
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"

0 commit comments

Comments
 (0)