From 947610d860b80f5f287eca6f96bdcdb14bed466c Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Wed, 30 Dec 2020 17:59:45 +0100
Subject: [PATCH] feat: display score requirements captions and titles
---
src/components/posts/PostScore.jsx | 30 ++++++++++++++++++++++++++++--
src/containers/GlobalStats.jsx | 9 +++++++--
2 files changed, 35 insertions(+), 4 deletions(-)
diff --git a/src/components/posts/PostScore.jsx b/src/components/posts/PostScore.jsx
index 9085a43..3cfda92 100644
--- a/src/components/posts/PostScore.jsx
+++ b/src/components/posts/PostScore.jsx
@@ -19,6 +19,24 @@ const PostScore = ({
score >= supportThreshold || (score > 0 && !hasDislikes),
};
+ let title;
+
+ if (!rankingReadonly) {
+ if (hasDislikes) {
+ if (score < supportThreshold) {
+ title = `Aktuální podpora je ${score} hlasů, pro získání podpory skupiny členů chybí ještě ${
+ supportThreshold - score
+ }.`;
+ } else {
+ title = `Aktuální podpora je ${score} hlasů, což je dostatek pro získání podpory skupiny členů (vyžaduje alespoň ${supportThreshold} hlasů).`;
+ }
+ } else {
+ title = `Příspěvek získal ${score} hlasů bez jakýchkoliv hlasů proti a má tedy konkludentní podporu.`;
+ }
+ } else {
+ title = `Příspěvek získal podporu ${score} hlasů.`;
+ }
+
return (
<span
className={classNames(
@@ -26,10 +44,18 @@ const PostScore = ({
coloring,
className
)}
- title={`Míra podpory je ${score}.`}
+ style={{ cursor: "help" }}
+ title={title}
>
<i className="ico--power" />
- <span className="font-bold">{score}</span>
+ <span className="font-bold">
+ {!rankingReadonly && hasDislikes && (
+ <span>
+ {score} z {supportThreshold}
+ </span>
+ )}
+ {!(!rankingReadonly && hasDislikes) && score.toString()}
+ </span>
</span>
);
};
diff --git a/src/containers/GlobalStats.jsx b/src/containers/GlobalStats.jsx
index d882241..e5acf60 100644
--- a/src/containers/GlobalStats.jsx
+++ b/src/containers/GlobalStats.jsx
@@ -1,12 +1,17 @@
import React from "react";
import { Link } from "react-router-dom";
import { format, isToday } from "date-fns";
+import pick from "lodash/pick";
import { GlobalInfoStore, ProgramStore } from "stores";
const GlobalStats = () => {
- const { onlineUsers, onlineMembers } = GlobalInfoStore.useState();
- const { currentId, scheduleIds, items } = ProgramStore.useState();
+ const { onlineUsers, onlineMembers } = GlobalInfoStore.useState((state) =>
+ pick(state, ["onlineUsers", "onlineMembers"])
+ );
+ const { currentId, scheduleIds, items } = ProgramStore.useState((state) =>
+ pick(state, ["currentId", "scheduleIds", "items"])
+ );
const nextProgramEntryId = scheduleIds
? scheduleIds[currentId ? scheduleIds.indexOf(currentId) + 1 : 0]
--
GitLab