Added git links to todo sidebar

src/components/b.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react'
+
+import constants from '../constants.json'
+
+const soundCount = 7
+function GetRandom(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+export default function BB() {
+  const [audios, setAudios] = useState(null)
+  const [range, setRange] = useState([0, 3])
+  const [clicks, setClicks] = useState(0)
+  const [shouldRender, setShouldRender] = useState(false)
+
+  useEffect(() => {
+    setShouldRender(GetRandom(0, 100) === 4)
+  }, [])
+
+  useEffect(() => {
+    if (shouldRender) {
+      const res = []
+      for (let i = 1; i < soundCount + 2; i++) {
+        res.push(new Audio(`${constants.siteUrl}sound/deer${i}.mp3`))
+      }
+      setAudios(res)
+    }
+  }, [shouldRender])
+
+  useEffect(() => {
+    if (clicks > 3) {
+      setRange([4, 5])
+    }
+    if (clicks > 6) {
+      setRange([6, 7])
+    }
+  }, [clicks])
+
+  if (!shouldRender) {
+    return null
+  }
+
+  return (
+    <div
+      style={{ position: 'fixed', right: 0, bottom: 0, margin: 0, padding: 0 }}
+      onClick={() => {
+        const rnd = GetRandom(range[0], range[1])
+        audios[rnd].play()
+        setClicks(clicks + 1)
+      }}
+    >
+      <img
+        src={`${constants.siteUrl}img/tiszai.png`}
+        alt="img"
+        style={{ cursor: 'pointer', width: '200px' }}
+      />
+    </div>
+  )
+}

src/components/layout.js

@@ -3,6 +3,7 @@ import Link from 'next/link'
 
 import tabs from '../data/tabs.json'
 import constants from '../constants.json'
+import BB from './b.js'
 
 // FIXME: window resize event listener to show sidebar on resize
 
@@ -70,6 +71,7 @@ export default function Layout(props) {
         ) : null}
       </div>
       <div className="content">{props.children}</div>
+      <BB />
     </div>
   )
 }

src/components/todoStuff/todoSidebar.js

@@ -2,10 +2,28 @@ import React from 'react'
 
 import styles from './todoSidebar.module.css'
 
-export default function Todos({ card, userId, categories, columns, voteOn }) {
-  const { name, description, category, points, votes, id } = card
+export default function Todos({
+  card,
+  userId,
+  categories,
+  columns,
+  voteOn,
+  namedGroups,
+}) {
+  const {
+    name,
+    description,
+    category,
+    points,
+    votes,
+    id,
+    group,
+    gitlink,
+  } = card
   const voteable = columns[card.state].clickable
 
+  console.log(card)
+
   // TODO: hide vote button if not voteable
   return (
     <div className={styles.container}>
@@ -27,6 +45,14 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
         </span>
       </div>
       <hr />
+      {group && (
+        <div className={styles.row}>
+          <div>Csoport:</div>
+          <div style={{ color: group }}>
+            {namedGroups[group] ? namedGroups[group].name : group}
+          </div>
+        </div>
+      )}
       <div className={styles.row} title={'Minél több a pont, annál nehezebb'}>
         <div>Nehézség:</div>
         <div>{points}</div>
@@ -39,6 +65,13 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
         <div>Szavazatok:</div>
         <div>{votes.length}</div>
       </div>
+      {gitlink && (
+        <div className={styles.row}>
+          <a href={gitlink} target={'_blank'} rel={'noreferrer'}>
+            Git link
+          </a>
+        </div>
+      )}
       <hr />
       {description && (
         <>

src/components/todoStuff/todos.js

@@ -152,6 +152,7 @@ export default function Todos() {
             userId={userId}
             categories={categories}
             columns={columns}
+            namedGroups={namedGroups}
             voteOn={(card) => {
               fetch(`${constants.apiUrl}todos?id=${card.id}`, {
                 credentials: 'include',