feat(project): public project and glossary renaming

app/api/projects/[projectId]/route.ts

@@ -78,17 +78,22 @@ export async function PATCH(
       }
     }
 
+    const newData: typeof body = {
+      title: body.title,
+      languages: body.languages,
+      info: body.info,
+      settings: body.settings,
+    }
+
+    if (body.published !== undefined) {
+      newData.published = body.published
+    }
+
     await db.project.update({
       where: {
         id: params.projectId,
       },
-      data: {
-        title: body.title,
-        languages: body.languages,
-        info: body.info,
-        settings: body.settings,
-        published: body.published,
-      },
+      data: newData,
     })
 
     return SuccessResponse()

components/app/project/dialogs/add-new-languages.tsx

@@ -71,7 +71,7 @@ const AddNewLanguage = (props: Props) => {
 
   const onAddCustomLanguage = useCallback(() => {
     if (!languageName || !shortName || shortName === "_id") {
-      // The keyword '_id' is a reserved keyword for identifying constant translations
+      // The keyword '_id' is a reserved keyword for identifying terms
       return
     }
 

components/app/project/dialogs/add-new-constant-translation.tsx → components/app/project/dialogs/add-new-term.tsx

@@ -16,20 +16,20 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Icons } from "@/components/icons"
 
-export type NewConstantTranslation = {
+export type NewTerm = {
   _id: string
   [language: string]: string
 }
 
 type Props = {
   languages: string[]
-  addContantTranslation: (newWord: NewConstantTranslation) => void
+  addTerm: (newWord: NewTerm) => void
 }
 
-const AddNewConstantTranslation = (props: Props) => {
-  const { languages, addContantTranslation } = props
+const AddNewTerm = (props: Props) => {
+  const { languages, addTerm } = props
 
-  const [translations, setTranslation] = useState<NewConstantTranslation>({
+  const [translations, setTranslation] = useState<NewTerm>({
     _id: "",
   })
 
@@ -40,9 +40,9 @@ const AddNewConstantTranslation = (props: Props) => {
   }, [])
 
   const onSubmit = useCallback(() => {
-    addContantTranslation(translations)
+    addTerm(translations)
     reset()
-  }, [addContantTranslation, reset, translations])
+  }, [addTerm, reset, translations])
 
   return (
     <Dialog>
@@ -121,4 +121,4 @@ const AddNewConstantTranslation = (props: Props) => {
   )
 }
 
-export default AddNewConstantTranslation
+export default AddNewTerm

components/app/project/dialogs/edit-contant-translation.tsx → components/app/project/dialogs/edit-term.tsx

@@ -1,6 +1,7 @@
-import { ConstantTranslations } from "@/store/useI18nState"
+import { Term } from "@/store/useI18nState"
 import { DialogClose } from "@radix-ui/react-dialog"
 
+import i18n from "@/lib/i18n"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -15,34 +16,36 @@ import { Label } from "@/components/ui/label"
 
 type Props = {
   languages: string[]
-  word: ConstantTranslations
-  editWord: (word: ConstantTranslations) => void
+  term: Term
+  editWord: (term: Term) => void
   deleteWord: (id: string) => void
 }
 
-const EditConstantTranslation = (props: Props) => {
-  const { word, languages } = props
+const EditTerm = (props: Props) => {
+  const { term, languages } = props
 
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <button className="t-button">{word._id}</button>
+        <button className="t-button">{term._id}</button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>Edit word: {word._id}</DialogTitle>
+          <DialogTitle>
+            {i18n.t("Edit word: {keyword}", { keyword: term._id })}
+          </DialogTitle>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="languageName" className="text-right">
-              Identifier
+              {i18n.t("Identifier")}
             </Label>
             <Input
               id="languageName"
               placeholder="English"
               className="col-span-3"
               data-1p-ignore
-              value={word._id}
+              value={term._id}
               onChange={() => {}}
             />
           </div>
@@ -56,7 +59,7 @@ const EditConstantTranslation = (props: Props) => {
                 placeholder={`translation in ${language} if you needed`}
                 className="col-span-3"
                 data-1p-ignore
-                value={word[language]}
+                value={term[language]}
                 onChange={() => {}}
               />
             </div>
@@ -70,16 +73,16 @@ const EditConstantTranslation = (props: Props) => {
               className="mt-4 sm:mt-0"
               onClick={() => {}}
             >
-              Delete
+              {i18n.t("Delete")}
             </Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button onClick={() => {}}>Edit word</Button>
+            <Button onClick={() => {}}>{i18n.t("Edit term")}</Button>
           </DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   )
 }
 
-export default EditConstantTranslation
+export default EditTerm

components/app/project/index.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import Link from "next/link"
 
 import "@/styles/editor.css"
-import { useState } from "react"
+import { useMemo, useState } from "react"
 
 import i18n from "@/lib/i18n"
 import { cn } from "@/lib/utils"
@@ -16,7 +16,7 @@ import ImportKeywordsModal from "./dialogs/import-keywords"
 import ProjectSettingsSlideOver from "./settings-slide-over"
 import Table from "./table/table"
 import { ProjectData } from "./types"
-import useTranslation from "./useTranslation"
+import useTranslation, { Status } from "./useTranslation"
 
 export interface EditorProps {
   project: ProjectData
@@ -27,7 +27,7 @@ export function Editor(props: EditorProps) {
 
   const {
     keywords,
-    isSaving,
+    status,
     title,
     languages,
     settings,
@@ -41,7 +41,7 @@ export function Editor(props: EditorProps) {
     editLanguage,
     deleteLanguage,
     editSettings,
-    addNewConstantTranslation,
+    addNewTerm,
     checkIfKeyAlreadyExists,
     importKeys,
     download,
@@ -53,6 +53,31 @@ export function Editor(props: EditorProps) {
   const [isProjectSettingsOpened, openProjectSettings] =
     useState<boolean>(false)
 
+  const renderStatus = useMemo(() => {
+    switch (status) {
+      case Status.ToSave:
+        return (
+          <div className="flex items-center space-x-2">
+            <span>{i18n.t("Waiting...")}</span>
+          </div>
+        )
+      case Status.Saving:
+        return (
+          <div className="flex items-center space-x-2">
+            <Icons.spinner className="animate-spin h-4 w-4" />
+            <span>{i18n.t("Saving...")}</span>
+          </div>
+        )
+      case Status.Saved:
+        return (
+          <div className="flex items-center space-x-2 text-green-500">
+            <Icons.check className="h-4 w-4" />
+            <span>{i18n.t("Saved")}</span>
+          </div>
+        )
+    }
+  }, [status])
+
   return (
     <div className="w-full gap-10">
       <div className="flex w-full items-center justify-between">
@@ -98,17 +123,7 @@ export function Editor(props: EditorProps) {
         />
         {/** icon plus label to say if the object is saved */}
         <div className="flex items-center justify-left my-1">
-          {isSaving ? (
-            <div className="flex items-center space-x-2">
-              <Icons.spinner className="animate-spin h-4 w-4" />
-              <span>{i18n.t("Loading...")}</span>
-            </div>
-          ) : (
-            <div className="flex items-center space-x-2 text-green-500">
-              <Icons.check className="h-4 w-4" />
-              <span>{i18n.t("Saved")}</span>
-            </div>
-          )}
+          {renderStatus}
         </div>
         <Table
           keywords={keywords}
@@ -118,7 +133,6 @@ export function Editor(props: EditorProps) {
           editContext={editContext}
           editKey={editKey}
           checkIfKeyAlreadyExists={checkIfKeyAlreadyExists}
-          isSaving={isSaving}
           project={project}
           languages={languages}
           addLanguage={addLanguage}
@@ -133,7 +147,7 @@ export function Editor(props: EditorProps) {
           deleteLanguage={deleteLanguage}
           onClose={() => openProjectSettings(false)}
           editSettings={editSettings}
-          addNewConstantTranslation={addNewConstantTranslation}
+          addNewTerm={addNewTerm}
         />
       )}
     </div>

components/app/project/settings-slide-over.tsx

@@ -1,20 +1,20 @@
 import { ChangeEvent, useCallback } from "react"
 import {
-  ConstantTranslations,
   EditLanguageType,
   Formality,
   Language,
   ProjectSettings,
   Sex,
+  Term,
 } from "@/store/useI18nState"
 
 import i18n from "@/lib/i18n"
 
 import SlideOver, { SlideOverRow } from "../../slide-over"
-import AddNewConstantTranslation from "./dialogs/add-new-constant-translation"
 import AddNewLanguage from "./dialogs/add-new-languages"
-import EditConstantTranslation from "./dialogs/edit-contant-translation"
+import AddNewTerm from "./dialogs/add-new-term"
 import EditLanguage from "./dialogs/edit-languages"
+import EditTerm from "./dialogs/edit-term"
 
 type Props = {
   languages: Language[]
@@ -24,7 +24,7 @@ type Props = {
   deleteLanguage: (language: Language) => void
   onClose: () => void
   editSettings: (newSettings: Partial<ProjectSettings>) => void
-  addNewConstantTranslation: (newword: ConstantTranslations) => void
+  addNewTerm: (newTerm: Term) => void
 }
 
 const ProjectSettingsSlideOver = (props: Props) => {
@@ -36,7 +36,7 @@ const ProjectSettingsSlideOver = (props: Props) => {
     deleteLanguage,
     onClose,
     editSettings,
-    addNewConstantTranslation,
+    addNewTerm,
   } = props
 
   const handleChangeDescription = useCallback(
@@ -260,21 +260,19 @@ const ProjectSettingsSlideOver = (props: Props) => {
           )}
         >
           <>
-            {settings.constantTranslations.map((word) => (
-              <EditConstantTranslation
+            {settings.glossary.map((term) => (
+              <EditTerm
                 languages={languages.map((language) => language.short)}
-                key={word._id}
-                word={word}
+                key={term._id}
+                term={term}
                 editWord={() => {}}
                 deleteWord={() => {}}
               />
             ))}
           </>
-          <AddNewConstantTranslation
+          <AddNewTerm
             languages={languages.map((language) => language.short)}
-            addContantTranslation={(newWord) =>
-              addNewConstantTranslation(newWord)
-            }
+            addTerm={(newWord) => addNewTerm(newWord)}
           />
         </SlideOverRow>
       </div>

components/app/project/table/detail-slide-over.tsx

@@ -9,7 +9,6 @@ import { Keyword } from "../useTranslation"
 
 type Props = {
   keyword: Keyword
-  isSaving: boolean
   onClose: () => void
   editTranslation: (language: string, key: string, value: string) => void
   editContext: (key: string, context: string) => void
@@ -21,7 +20,6 @@ type Props = {
 const DetailSlideOver = (props: Props) => {
   const {
     keyword,
-    isSaving,
     onClose,
     editTranslation,
     editContext,
@@ -73,7 +71,7 @@ const DetailSlideOver = (props: Props) => {
   }, [editTranslation, keyword.key, project?.id])
 
   return (
-    <SlideOver title={i18n.t("Detail")} onClose={onClose} isSaving={isSaving}>
+    <SlideOver title={i18n.t("Detail")} onClose={onClose}>
       <div className="relative p-4 flex-1 sm:px-6">
         <SlideOverRow title="Keyword">
           <div className="mt-1">

components/app/project/table/table.tsx

@@ -14,7 +14,6 @@ import Row from "./row"
 
 type Props = {
   keywords: Keyword[]
-  isSaving: boolean
   addKeyword: (newKeyword: NewKeyword) => void
   deleteKey: (key: string) => void
   editTranslation: (language: string, key: string, value: string) => void
@@ -29,7 +28,6 @@ type Props = {
 const Table = (props: Props) => {
   const {
     keywords,
-    isSaving,
     addKeyword,
     deleteKey,
     editTranslation,
@@ -137,7 +135,6 @@ const Table = (props: Props) => {
           editContext={editContext}
           editKey={editKey}
           checkIfKeyAlreadyExists={checkIfKeyAlreadyExists}
-          isSaving={isSaving}
         />
       )}
     </div>