Ranklist own entry on top checkbox

src/components/reactButton.js

@@ -18,7 +18,7 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
           }
           return (
             <div
-              title={currReact.join(', ')}
+              title={`'${key}': ${currReact.join(', ')}`}
               className={`${currReact.includes(uid) && styles.reacted}`}
               key={key}
               onClick={(e) => {

src/defaultStyles.css

@@ -418,7 +418,8 @@ select:hover {
   align-items: center;
 }
 
-.selectContainer > select {
+.selectContainer > select,
+.selectContainer > input {
   width: 20%;
   border-radius: 5px;
   border: 1.5px solid white;
@@ -453,5 +454,4 @@ select:hover {
   display: flex;
   justify-content: center;
   margin-top: 8px;
-
 }

src/pages/ranklist.js

@@ -92,6 +92,7 @@ export default function RankList({ globalData }) {
   const [key, setKey] = useState('newQuestions')
   const [since, setSince] = useState('all')
   const [sum, setSum] = useState()
+  const [ownEntryOnTop, setOwnEntryOnTop] = useState(false)
 
   const getList = () => {
     setSum()
@@ -120,7 +121,7 @@ export default function RankList({ globalData }) {
   const list =
     ranklist &&
     sortDataBy(ranklist, key).reduce((acc, entry, i) => {
-      if (entry.userId === userId) {
+      if (entry.userId === userId && ownEntryOnTop) {
         return [{ rank: i, ...entry }, ...acc]
       } else {
         return [...acc, { rank: i, ...entry }]
@@ -188,6 +189,16 @@ export default function RankList({ globalData }) {
               })}
             </select>
           </div>
+          <div className={'selectContainer'}>
+            <div>Saját hely mutatása felül:</div>
+            <input
+              type="checkbox"
+              checked={ownEntryOnTop}
+              onChange={(e) => {
+                setOwnEntryOnTop(e.target.checked)
+              }}
+            />
+          </div>
         </div>
         {sum && list ? (
           <>