Internationalization rebased, removed http backend replaced with static backend

.storybook/config.js

@@ -3,6 +3,7 @@ import { configure, addDecorator } from "@storybook/react"
 import Theme from "../src/components/Theme"
 import "../src/App.css"
 import "./storybook.css"
+import "../src/i18n"
 
 export const themeDecorator = (storyFn) => {
   // TODO wrap w/ theme

package.json

@@ -26,7 +26,7 @@
     "gh-pages": "npm run build:web && npm run build:vanilla && cp lib/vanilla.js build/vanilla.js && cp ./CNAME ./build/CNAME && gh-pages -d build",
     "prettier": "prettier --write \"src/**/*.js\"",
     "test:prettier": "prettier --check \"src/**/*.js\"",
-    "test:lint": "npx eslint src",
+    "test:lint": "eslint src --max-warnings=0",
     "test:integration:dev": "./node_modules/cypress/bin/cypress open",
     "test:integration": "./node_modules/cypress/bin/cypress run --env failOnSnapshotDiff=false"
   },
@@ -91,6 +91,8 @@
     "fast-json-patch": "^3.0.0-1",
     "ffmpeg-static": "^4.2.4",
     "form-data": "^3.0.0",
+    "i18next": "^19.4.4",
+    "i18next-browser-languagedetector": "^4.2.0",
     "in-browser-download": "^2.0.0",
     "jac-format": "^1.1.3",
     "js-md5": "^0.7.3",
@@ -102,6 +104,7 @@
     "react-dropzone": "^10.1.8",
     "react-github-btn": "^1.2.0",
     "react-hotkeys": "^2.0.0",
+    "react-i18next": "^11.4.0",
     "react-icons": "^3.9.0",
     "react-image-annotate": "^1.2.7",
     "react-scripts": "^3.4.1",

src/App.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Suspense } from "react"
 import Theme from "./components/Theme"
 import LocalStorageApp from "./components/LocalStorageApp"
 import DesktopApp from "./components/DesktopApp"
@@ -10,22 +10,29 @@ import { LabelHelpProvider } from "./components/LabelHelpView"
 import { HotkeyStorageProvider } from "./components/HotkeyStorage"
 import "./App.css"
 
+import Loading from "./components/Loading"
+
+// Importing Internalization file
+import "./i18n"
+
 export const App = () => {
   const electron = useElectron()
   return (
-    <Theme>
-      <AppConfigProvider>
-        <AuthProvider>
-          <LabelHelpProvider>
-            <ToastProvider>
-              <HotkeyStorageProvider>
-                {Boolean(electron) ? <DesktopApp /> : <LocalStorageApp />}
-              </HotkeyStorageProvider>
-            </ToastProvider>
-          </LabelHelpProvider>
-        </AuthProvider>
-      </AppConfigProvider>
-    </Theme>
+    <Suspense fallback={Loading}>
+      <Theme>
+        <AppConfigProvider>
+          <AuthProvider>
+            <LabelHelpProvider>
+              <ToastProvider>
+                <HotkeyStorageProvider>
+                  {Boolean(electron) ? <DesktopApp /> : <LocalStorageApp />}
+                </HotkeyStorageProvider>
+              </ToastProvider>
+            </LabelHelpProvider>
+          </AuthProvider>
+        </AppConfigProvider>
+      </Theme>
+    </Suspense>
   )
 }
 

src/components/AdvancedOptionsView/index.js

@@ -8,6 +8,8 @@ import { useAppConfig } from "../AppConfig"
 import { useHotkeyStorage } from "../HotkeyStorage"
 import KeyboardShortcutManagerDialog from "../KeyboardShortcutManagerDialog"
 
+import { useTranslation } from "react-i18next"
+
 const Button = styled(MuiButton)({
   margin: 8,
 })
@@ -19,10 +21,13 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
   const { hotkeys, changeHotkey, clearHotkeys } = useHotkeyStorage()
   const [hotkeyDialogOpen, setHotkeyDialogOpen] = useState(false)
 
+  // internalization hook
+  const { t } = useTranslation()
+
   return (
     <Box padding={2}>
       <Button onClick={onClickEditJSON} variant="outlined">
-        Edit JSON
+        {t("added-json")}
       </Button>
       <Button
         onClick={() => {
@@ -36,7 +41,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
         }}
         variant="outlined"
       >
-        Clear All Labels
+        {t("clear-labels")}
       </Button>
       <Button
         variant="outlined"
@@ -49,7 +54,8 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
           forceUpdate()
         }}
       >
-        {posthog.has_opted_out_capturing() ? "Enable" : "Disable"} Telemetry
+        {posthog.has_opted_out_capturing() ? "Enable" : "Disable"}{" "}
+        {t("telemetry")}
       </Button>
       <Button
         variant="outlined"
@@ -64,7 +70,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
           window.location.reload()
         }}
       >
-        Custom Collaboration Server
+        {t("custom-collobration-server")}
       </Button>
       <Button
         variant="outlined"
@@ -75,7 +81,8 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
           )
         }}
       >
-        {fromConfig("labelhelp.disabled") ? "Enable" : "Disable"} Label Help
+        {fromConfig("labelhelp.disabled") ? "Enable" : "Disable"}{" "}
+        {t("label-help")}
       </Button>
       {!fromConfig("labelhelp.disabled") && (
         <Button
@@ -90,7 +97,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
             setInConfig("labelhelp.apikey", response)
           }}
         >
-          Label Help API Key
+          {t("label-help-api-key")}
         </Button>
       )}
       <Button

src/components/BrushButton/index.js

@@ -11,6 +11,8 @@ import useEventCallback from "use-event-callback"
 import memoize from "lodash/memoize"
 import getBrushColorPalette from "../../utils/get-brush-color-palette.js"
 
+import { useTranslation } from "react-i18next"
+
 const Container = styled("div")({ position: "relative" })
 const BrushCircle = styled("div")(({ color }) => ({
   display: "inline",
@@ -66,6 +68,9 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
     memoize(() => onChangeSelectedBrush(color))
   )
 
+  // internalization hook
+  const { t } = useTranslation()
+
   return (
     <Container
       onMouseEnter={() => changeOpen(true)}
@@ -77,15 +82,15 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
         />
       </IconButton>
       <HeaderPopupBox open={open}>
-        <h1>Sample Brushes</h1>
+        <h1>{t("sample-brushes")}</h1>
         <StyledButton
           selected={selectedBrush === "complete" || selectedBrush === "blue"}
           iconcolor={colors.blue}
           fullWidth
           onClick={handleClick("complete")}
         >
           <BrushCircle color={colors.blue} />
-          Complete
+          {t("complete")}
         </StyledButton>
         <StyledButton
           selected={
@@ -96,7 +101,7 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
           onClick={handleClick("review")}
         >
           <BrushCircle color={colors.deepOrange} />
-          Review
+          {t("review")}
         </StyledButton>
         <OtherColorContainers>
           <StyledIconButton

src/components/CollaborateButton/index.js

@@ -15,6 +15,8 @@ import ExitToAppIcon from "@material-ui/icons/ExitToApp"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import usePosthog from "../../utils/use-posthog"
 
+import { useTranslation } from "react-i18next"
+
 const Container = styled("div")({ position: "relative", marginLeft: 8 })
 const WIDTH = 300
 const borderColor = colors.grey[500]
@@ -112,6 +114,9 @@ export default ({
   const [userName, changeUserName] = useLocalStorage("userName", "anonymous")
   const posthog = usePosthog()
 
+  // internalization hook
+  const { t } = useTranslation()
+
   useEffect(() => {
     if (loadingSession) {
       setTimeout(() => {
@@ -130,10 +135,10 @@ export default ({
         <PeopleIcon />
       </IconButton>
       <PopupBox className={sessionBoxOpen ? "" : "hidden"}>
-        <h1>Collaborate</h1>
+        <h1>{t("collobrate")}</h1>
         {!inSession ? (
           <>
-            <h2>Join a Session</h2>
+            <h2>{"join-a-session"}</h2>
             <TextField
               variant="outlined"
               label="URL to Session"
@@ -185,7 +190,7 @@ export default ({
             />
             <ExitButton fullWidth onClick={onLeaveSession}>
               <ExitToAppIcon className="icon" />
-              Leave Session
+              {t("leave-session")}
             </ExitButton>
           </>
         )}

src/components/Composite/index.js

@@ -10,6 +10,8 @@ import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight"
 import Checkbox from "@material-ui/core/Checkbox"
 import Box from "@material-ui/core/Box"
 
+import { useTranslation } from "react-i18next"
+
 const Title = styled("div")({
   fontSize: 18,
   fontWeight: "bold",
@@ -33,6 +35,8 @@ export const Composite = (props) => {
   } = props
   const [selectedField, changeSelectedField] = useState()
 
+  const { t } = useTranslation()
+
   if (!fields) throw new Error("No fields defined. Try adding a field in Setup")
 
   const sample = props.samples[currentSampleIndex]
@@ -99,7 +103,7 @@ export const Composite = (props) => {
         <KeyboardArrowRightIcon
           style={{ color: colors.grey[500], marginRight: 16 }}
         />
-        Next
+        {t("next")}
         <Box flexGrow={1} />
         <Box height="42px" />
         <KeyboardArrowRightIcon />

src/components/Configure3D/index.js

@@ -2,6 +2,8 @@ import React from "react"
 import { styled } from "@material-ui/core/styles"
 import * as colors from "@material-ui/core/colors"
 
+import { useTranslation } from "react-i18next"
+
 const ExplanationTextHeader = styled("div")({
   textAlign: "center",
   paddingTop: 30,
@@ -19,19 +21,20 @@ const GithubLink = styled("a")({
 })
 
 const Configure3D = () => {
+  const { t } = useTranslation()
+
   return (
     <ExplanationTextHeader>
       <ExplanationText>
-        Hey, this isn't currently available, but if you'd like this
-        functionality please let us know by leaving a thumbs up on{" "}
+        {t("configure-3d-explanation-text-part-1")}{" "}
         <GithubLink
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/UniversalDataTool/universal-data-tool/issues/20"
         >
           this
         </GithubLink>{" "}
-        github issue.
+        {t("github-issue")}.
       </ExplanationText>
     </ExplanationTextHeader>
   )

src/components/ConfigureComposite/index.js

@@ -10,6 +10,8 @@ import Box from "@material-ui/core/Box"
 import TextField from "@material-ui/core/TextField"
 import { setIn } from "seamless-immutable"
 
+import { useTranslation } from "react-i18next"
+
 const Fields = styled("div")({})
 const StyledExpansionPanel = styled(ExpansionPanel)({
   marginTop: 16,
@@ -22,6 +24,8 @@ const StyledButton = styled(Button)({
 })
 
 export default ({ iface, onChange }) => {
+  const { t } = useTranslation()
+
   return (
     <React.Fragment>
       <Fields>
@@ -69,7 +73,7 @@ export default ({ iface, onChange }) => {
                     })
                   }}
                 >
-                  Remove Field
+                  {t("remove-field")}
                 </Button>
               </Box>
             </ExpansionPanelDetails>
@@ -92,7 +96,7 @@ export default ({ iface, onChange }) => {
             )
           }}
         >
-          Add New Field
+          {t("add-new-field")}
         </StyledButton>
       </Fields>
     </React.Fragment>