review comments, lint

app/create-pr.js

@@ -3,11 +3,6 @@
 const functions = require("@google-cloud/functions-framework");
 const { Octokit } = require("octokit");
 
-/**
- * github fine-grained personal access token
- * single repo
- * read/write permissions for contents and pull requests
- */
 const auth = process.env.GITHUB_API_KEY;
 const owner = "3b1b";
 const repo = "captions";

app/create-pr.md

@@ -0,0 +1,12 @@
+Notes for setting up cloud function
+
+1. Create GitHub fine-grained personal access token.
+   1. Give it access to only this repo
+   1. Give it read/write permissions for "Contents" and "Pull Requests"
+1. Create Google Cloud Function
+   1. Use minimum ram/cpu/etc. specs
+   1. Name function "captions"
+   1. Use latest Node.js version
+   1. Copy/paste `create-pr.js` into `index.js
+   1. Add `"octokit": "^3.0.0"` to `package.json` dependencies
+   1. Deploy and make not of full url

app/src/data/data.ts

@@ -27,7 +27,7 @@ export function convert(entry: _Entry): Entry {
     currentOriginal: entry.input,
     startingTranslation: entry.translatedText,
     currentTranslation: entry.translatedText,
-    model: entry.model || null,
+    model: entry.model || undefined,
     legacyTranslation: entry.from_community_srt,
     reviews: entry.n_reviews || 0,
     upvoted: false,
@@ -41,8 +41,10 @@ export function revert(entry: Entry): _Entry {
   return {
     input: entry.currentOriginal,
     translatedText: entry.currentTranslation,
-    ...(entry.model ? { model: entry.model } : {}),
-    ...(entry.legacyTranslation ? { from_community_srt: entry.legacyTranslation } : {}),
+    ...(entry.model && { model: entry.model }),
+    ...(entry.legacyTranslation && {
+      from_community_srt: entry.legacyTranslation,
+    }),
     n_reviews: isEdited(entry) ? 1 : entry.reviews + Number(entry.upvoted),
     start: entry.start,
     end: entry.end,
@@ -68,24 +70,25 @@ export function charsPerSec(language: string) {
 }
 
 /** Estimate how many characters would cause an overflow of narration time */
-export function maxCharsAllowed(language: string, start: number, end: number): number {
+export function maxCharsAllowed(
+  language: string,
+  start: number,
+  end: number,
+): number {
   const mult_const: number = 1.05;
   const time_buff: number = 1.0;
   return mult_const * (charsPerSec(language) * (end - start + time_buff));
 }
 
 /** get max length for entry translation text */
 export function translationMax(
-  { startingTranslation, startingOriginal, start, end }: Entry,
+  { startingTranslation, start, end }: Entry,
   language: string,
 ) {
   /** for entries with time range, i.e. captions */
   if (start && end) return maxCharsAllowed(language, start, end);
   /** for entries without a time range, i.e. title and description */ else
-    return (
-      startingTranslation.length * 1.5 ||
-      Infinity
-    );
+    return startingTranslation.length * 1.5 || Infinity;
 }
 
 /** get max length for entry original text */

app/src/pages/Edit.tsx

@@ -1,10 +1,10 @@
-import { LoaderFunction, useBlocker } from "react-router";
+import { LoaderFunction, redirect, useBlocker } from "react-router";
 import { atom } from "jotai";
 import { branchExists, createPr, repoRaw, request } from "@/api";
 import { getAtom, setAtom } from "@/App";
 import { calcCompletion, convert, isEdited, revert } from "@/data/data";
 import lessons from "@/data/lessons.json";
-import { _Entry, _Timings, Entry } from "@/data/types";
+import { _Entry, Entry } from "@/data/types";
 import Footer from "@/pages/edit/Footer";
 import Header from "@/pages/edit/Header";
 import Section from "@/pages/edit/Section";
@@ -84,10 +84,15 @@ export const filterFuncs: Record<Filter, FilterFunc> = {
 export const loader: LoaderFunction = async ({ params }) => {
   /** get lesson and language slug from url */
   const { lesson = "" } = params;
-
-  /** set language */
   language = params.language || "";
 
+  /** check if edit already open for lesson/language */
+  setAtom(locked, await branchExists(`${lesson}-${language}`));
+  if (getAtom(locked)) {
+    window.alert(lockedMessage);
+    return redirect("/");
+  }
+
   /** lookup lesson metadata */
   setAtom(meta, lessons.find((l) => l.lesson === lesson) || null);
   const { path = "" } = getAtom(meta) || {};
@@ -137,12 +142,6 @@ export const loader: LoaderFunction = async ({ params }) => {
     if (data) setAtom(captions, data.map(convert));
   }
 
-  /** alert about locked status */
-  if (getAtom(locked))
-    window.setTimeout(() => {
-      window.alert(lockedMessage);
-    }, 1000);
-
   return null;
 };
 
@@ -199,7 +198,7 @@ const navMessage =
   "Are you sure you want to navigate away from this page? Unsaved edits will be lost.";
 
 const lockedMessage =
-  "This lesson/language is already being edited by someone. Click the lock for more info. You may want to work on something else for now.";
+  "This lesson/language is already being edited by someone, see github.com/3b1b/captions/pulls. Please work on something else for now.";
 
 const submitMessage = (error: string) =>
   `There was an error submitting: ${error.replace(/\.$/, "")}. Please save your edits as a backup, then try again later or report this issue.`;

app/src/pages/edit/Footer.tsx

@@ -102,25 +102,33 @@ function Footer() {
           onChange={setAuthor}
           placeholder="@github-user or name"
           data-tooltip="So we can tag you on GitHub and/or attribute these edits to you"
+          required={true}
+          form="submit-edits"
         />
 
         <Button
-          onClick={async () => {
-            setSubmitting(true);
-            const pr = await submitPr(lesson, language, author || "");
-            setSubmitting(false);
-            if (pr && window.confirm(successMessage(pr.link)))
-              window.location.href = pr.link;
-          }}
           disabled={edits === 0 || submitting}
           text={
             submitting
               ? "Submitting"
               : `Submit ${edits.toLocaleString()} Edit(s)`
           }
           icon={submitting ? <ImSpinner8 className="spin" /> : <FaPaperPlane />}
+          type="submit"
+          form="submit-edits"
           data-tooltip="Submit your edits to be reviewed. Opens a public pull request on GitHub."
         />
+
+        <form
+          id="submit-edits"
+          onSubmit={async () => {
+            setSubmitting(true);
+            const pr = await submitPr(lesson, language, author || "");
+            setSubmitting(false);
+            if (pr && window.confirm(successMessage(pr.link)))
+              window.location.href = pr.link;
+          }}
+        />
       </div>
     </footer>
   );

app/src/pages/edit/Row.tsx

@@ -108,7 +108,7 @@ function Row({ index, entries }: Props) {
           <span>{edited ? 1 : reviews + Number(upvoted)}</span>
         </button>
 
-        {(start && end) && (
+        {start && end && (
           <button
             className={classes.action}
             onClick={() => {

app/src/pages/home/Search.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { FaAngleDown, FaAngleUp } from "react-icons/fa6";
 import { Link } from "react-router-dom";
 import { useAtom } from "jotai";
-import { sortBy, startCase } from "lodash";
+import { startCase } from "lodash";
 import Badge from "@/components/Badge";
 import Input from "@/components/Input";
 import { flatLessons } from "@/data/data";