Add missing translations (#278)

public/locales/en/app.json

@@ -31,6 +31,7 @@
   "description": "Description",
   "descriptionPlaceholder": "Hey everyone, please choose the dates that work for you!",
   "donate": "Donate",
+  "edit": "Edit",
   "editDetails": "Edit details",
   "editOptions": "Edit options",
   "email": "Email",
@@ -71,6 +72,7 @@
   "monthView": "Month view",
   "name": "Name",
   "namePlaceholder": "Jessie Smith",
+  "new": "New",
   "newPoll": "New poll",
   "next": "Next",
   "nextMonth": "Next month",
@@ -81,6 +83,7 @@
   "notificationsOn": "Notifications are on",
   "notificationsOnDescription": "An email will be sent to <b>{{email}}</b> when there is activity on this poll.",
   "notificationsVerifyEmail": "You need to verify your email to turn on notifications",
+  "noVotes": "No one has voted for this option",
   "ok": "Ok",
   "options": "Options",
   "participant": "Participant",

src/components/poll/mobile-poll.tsx

@@ -205,7 +205,7 @@ const MobilePoll: React.VoidFunctionComponent = () => {
                   reset();
                 }}
               >
-                Cancel
+                {t("cancel")}
               </Button>
             ) : selectedParticipant ? (
               <div className="flex space-x-3">
@@ -232,7 +232,7 @@ const MobilePoll: React.VoidFunctionComponent = () => {
                     });
                   }}
                 >
-                  Edit
+                  {t("edit")}
                 </Button>
                 <Button
                   icon={<Trash />}
@@ -268,7 +268,7 @@ const MobilePoll: React.VoidFunctionComponent = () => {
                   setIsEditing(true);
                 }}
               >
-                New
+                {t("new")}
               </Button>
             )}
           </div>
@@ -317,7 +317,7 @@ const MobilePoll: React.VoidFunctionComponent = () => {
                   type="primary"
                   loading={formState.isSubmitting}
                 >
-                  Save
+                  {t("save")}
                 </Button>
               </div>
             </motion.div>

src/components/poll/mobile-poll/poll-option.tsx

@@ -1,6 +1,7 @@
 import { Participant, VoteType } from "@prisma/client";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
+import { useTranslation } from "next-i18next";
 import * as React from "react";
 
 import ChevronDown from "@/components/icons/chevron-down.svg";
@@ -72,6 +73,7 @@ const PopInOut: React.VoidFunctionComponent<{
 
 const PollOptionVoteSummary: React.VoidFunctionComponent<{ optionId: string }> =
   ({ optionId }) => {
+    const { t } = useTranslation("app");
     const { getParticipants } = useParticipants();
     const participantsWhoVotedYes = getParticipants(optionId, "yes");
     const participantsWhoVotedIfNeedBe = getParticipants(optionId, "ifNeedBe");
@@ -92,7 +94,7 @@ const PollOptionVoteSummary: React.VoidFunctionComponent<{ optionId: string }> =
         <div>
           {noVotes ? (
             <div className="rounded-lg bg-slate-50 p-2 text-center text-slate-400">
-              No one has voted for this option
+              {t("noVotes")}
             </div>
           ) : (
             <div className="grid grid-cols-2 gap-x-4">