Translation improvements

admin/src/components/DropFileZone/index.js

@@ -4,12 +4,17 @@ import PropTypes from "prop-types";
 import DragAndDropIcon from "./DragAndDropIcon";
 import { Label, P } from "./styles";
 
+import { useGlobalContext } from "strapi-helper-plugin";
+import getTrad from '../../utils/getTrad';
+
 function DropFileZone({
   acceptMimeTypes,
   acceptFilesTypes,
   onUploadFile,
   onUploadError,
 }) {
+  const { formatMessage } = useGlobalContext();
+
   const validateFile = (file) => {
     if (acceptMimeTypes.includes(file.type)) {
       onUploadFile(file);
@@ -42,8 +47,8 @@ function DropFileZone({
       <DragAndDropIcon />
       <P>
         <span>
-          Drag & drop your file into this area or{" "}
-          <span className={"underline"}>browse</span> for a file to upload
+          {formatMessage({ id: getTrad('import.dragAndDrop.firstPart')})}{" "}
+          <span className={"underline"}>{formatMessage({ id: getTrad('import.dragAndDrop.browse')})}</span> {formatMessage({ id: getTrad('import.dragAndDrop.secondPart')})}
         </span>
       </P>
       {isDragging && (

admin/src/components/ImportForm/index.js

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
+import { useGlobalContext } from "strapi-helper-plugin";
 
 function ImportForm() {
+  const { formatMessage } = useGlobalContext();
+
   const contentTypes = [];
 
   const [contentTypeSelected, setContentType] = useState("");
@@ -10,10 +13,10 @@ function ImportForm() {
 
   return (
     <div className="pt-3 col-sm">
-      <Label htmlFor="contentType">Import Destination</Label>
+      <Label htmlFor="contentType">{formatMessage({ id: getTrad('import.page.label.destination')})}</Label>
       <Select
         name="contentType"
-        options={[{ label: "Select Content Type", value: "" }].concat(
+        options={[{ label: formatMessage({ id: getTrad('import.page.option.contentType')}), value: "" }].concat(
           contentTypes.map(({ info, uid }) => ({
             label: info.label,
             value: uid,

admin/src/components/Layout/index.js

@@ -1,13 +1,17 @@
 import React, { memo } from "react";
 import PropTypes from "prop-types";
-import { HeaderNav, PluginHeader } from "strapi-helper-plugin";
+import { HeaderNav, PluginHeader, useGlobalContext } from "strapi-helper-plugin";
+
+import getTrad from '../../utils/getTrad';
 
 function Layout({ navLinks, children }) {
+  const { formatMessage } = useGlobalContext();
+
   return (
     <div className="container-fluid" style={{ padding: "18px 30px" }}>
       <PluginHeader
-        title="Import Content"
-        description="Import CSV and JSON into your Content Types"
+        title={formatMessage({ id: getTrad('plugin.name')})}
+        description={formatMessage({ id: getTrad('plugin.description')})}
       />
       <HeaderNav links={navLinks} style={{ marginTop: "4.4rem" }} />
       <div className="row">{children}</div>

admin/src/components/OptionsExport/index.js

@@ -3,17 +3,23 @@ import { Select, Checkbox } from "@buffetjs/core";
 
 import BASE_OPTIONS from "../../constants/options";
 
+import { useGlobalContext } from "strapi-helper-plugin";
+import getTrad from '../../utils/getTrad';
+
 function OptionsExport({ values, onChange }) {
+  const { formatMessage } = useGlobalContext();
+
   return (
     <div>
       <hr />
       {BASE_OPTIONS.map(({ name, label, type, optionalValues }) => {
+
         const handleChange = ({ target: { value } }) => onChange(name, value);
 
         if (type === "select") {
           return (
             <div className="mt-3">
-              <span>{label}:</span>
+              <span>{formatMessage({ id: getTrad(label)})}:</span>
               <Select
                 key={name}
                 name={name}
@@ -28,7 +34,7 @@ function OptionsExport({ values, onChange }) {
             <div className="mt-3">
               <Checkbox
                 key={name}
-                message={label}
+                message={formatMessage({ id: getTrad(label)})}
                 name={name}
                 value={values[name]}
                 onChange={handleChange}

admin/src/components/RawInputForm/index.js

@@ -10,12 +10,17 @@ import { Row } from "../../components/common";
 import FORMATS from "../../constants/formats";
 import highlight from "../../utils/highlight";
 
+import { useGlobalContext } from "strapi-helper-plugin";
+import getTrad from '../../utils/getTrad';
+
 const fortmatsOptions = FORMATS.map(({ name, mimeType }) => ({
   label: name,
   value: mimeType,
 }));
 
 function RawInputForm({ onSubmit }) {
+  const { formatMessage } = useGlobalContext();
+
   const [rawText, setRawText] = useState("");
   const [rawFormat, setRawFormat] = useState(FORMATS[0].mimeType || "");
 
@@ -30,7 +35,7 @@ function RawInputForm({ onSubmit }) {
   return (
     <form className="col-12" onSubmit={handleSubmit}>
       <Row>
-        <Label message="Data Format" htmlFor="dataFormats" />
+        <Label message={formatMessage({ id: getTrad('import.raw.label.dataFormat')})} htmlFor="dataFormats" />
         <Select
           name="dataFormats"
           options={fortmatsOptions}
@@ -50,7 +55,7 @@ function RawInputForm({ onSubmit }) {
         </EditorWrapper>
       </Row>
       <Row>
-        <Button type="submit" label={"Analyze"} disabled={rawText === ""} />
+        <Button type="submit" label={formatMessage({ id: getTrad('import.raw.label.analyze')})} disabled={rawText === ""} />
       </Row>
     </form>
   );

admin/src/components/UploadFileForm/index.js

@@ -8,9 +8,15 @@ import { Button } from "@buffetjs/core";
 import { Row } from "../common";
 
 import FORMATS from "../../constants/formats";
+
 import readFileContent from "../../utils/readFileContent";
 
+import { useGlobalContext } from "strapi-helper-plugin";
+import getTrad from '../../utils/getTrad';
+
 function UploadFileForm({ onSubmit }) {
+  const { formatMessage } = useGlobalContext();
+
   const [file, setFile] = useState(null);
   const [data, setData] = useState("");
 
@@ -22,7 +28,7 @@ function UploadFileForm({ onSubmit }) {
     } catch (err) {
       strapi.notification.toggle({
         type: "warning",
-        message: "import.file.content.error",
+        message: formatMessage({ id: getTrad("import.file.content.error")})
       });
     }
   };
@@ -51,7 +57,7 @@ function UploadFileForm({ onSubmit }) {
             onUploadError={() =>
               strapi.notification.toggle({
                 type: "warning",
-                message: "import.file.type.error",
+                message: formatMessage({ id: getTrad("import.file.type.error")})
               })
             }
           />
@@ -60,13 +66,13 @@ function UploadFileForm({ onSubmit }) {
       <Row>
         <Button
           type="submit"
-          label="Analyze"
+          label={formatMessage({ id: getTrad('import.upload.button.analyze')})}
           color={file ? "primary" : "cancel"}
           disabled={!file}
         />
         <Button
           className="ml-3"
-          label="Remove File"
+          label={formatMessage({ id: getTrad('import.upload.button.remove')})}
           color="delete"
           onClick={removeFile}
           disabled={!file}

admin/src/constants/options.js

@@ -2,26 +2,26 @@ const BASE_OPTIONS = [
   {
     name: "medias",
     type: "select",
-    label: "Select how medias will be exported.",
+    label: "export.options.medias",
     optionalValues: ["none", "ids", "url", "without-formats", "full"],
-    defaultValue: "full",
+    defaultValue: "none",
   },
   {
     name: "relations",
     type: "select",
-    label: "Select how relation will be exported.",
+    label: "export.options.relations",
     optionalValues: ["none", "ids", "full"],
-    defaultValue: "full",
+    defaultValue: "none",
   },
   {
     name: "ids",
-    label: "Remove Ids",
+    label: "export.options.ids",
     type: "boolean",
     defaultValue: false,
   },
   {
     name: "timestamp",
-    label: "Remove TimeStamps",
+    label: "export.options.timestamps",
     type: "boolean",
     defaultValue: false,
   }

admin/src/containers/App/index.js

@@ -10,6 +10,10 @@ import { Redirect, Route, Switch } from "react-router-dom";
 import Layout from "../../components/Layout";
 // Utils
 import pluginId from "../../pluginId";
+//Trad
+import { request, useGlobalContext } from "strapi-helper-plugin";
+import getTrad from '../../utils/getTrad';
+
 // Pages
 import ImportPage from "../ImportPage";
 import ExportPage from "../ExportPage";
@@ -18,19 +22,19 @@ import useContentTypes from "../../hooks/useContentTypes";
 
 import "../../assets/prismjs.css";
 
-const pathTo = (uri = "") => `/plugins/${pluginId}/${uri}`;
-const navLinks = [
-  {
-    name: "Import Data",
-    to: pathTo("import"),
-  },
-  {
-    name: "Export Data",
-    to: pathTo("export"),
-  },
-];
-
 function App() {
+  const { formatMessage } = useGlobalContext();
+  const pathTo = (uri = "") => `/plugins/${pluginId}/${uri}`;
+  const navLinks = [
+    {
+      name: formatMessage({id: getTrad('import.tab.name')}),
+      to: pathTo("import"),
+    },
+    {
+      name: formatMessage({id: getTrad('export.tab.name')}),
+      to: pathTo("export"),
+    },
+  ];
   const userContentTypes = useContentTypes();
 
   return (

admin/src/containers/DataMapper/index.js

@@ -6,8 +6,9 @@ import { Button, Checkbox } from "@buffetjs/core";
 import { Loader, Row } from "../../components/common";
 import MappingTable from "../../components/MappingTable";
 
-import { request } from "strapi-helper-plugin";
+import { request, useGlobalContext } from "strapi-helper-plugin";
 import pluginId from "../../pluginId";
+import getTrad from '../../utils/getTrad';
 
 const filterIgnoreFields = (fieldName) =>
   ![
@@ -17,9 +18,16 @@ const filterIgnoreFields = (fieldName) =>
     "updated_at",
     "updated_by",
     "published_at",
+    "createdAt",
+    "createdBy",
+    "updatedAt",
+    "updatedBy",
+    "publishedAt",
   ].includes(fieldName);
 
 function DataMapper({ analysis, target, onImport }) {
+  const { formatMessage } = useGlobalContext();
+
   const { fieldsInfo, parsedData } = analysis;
   const { kind, attributes, options } = target;
 
@@ -93,7 +101,7 @@ function DataMapper({ analysis, target, onImport }) {
     if (importItems.length === 0) {
       strapi.notification.toggle({
         type: "warning",
-        message: "import.items.empty",
+        message: formatMessage({ id: getTrad("import.items.empty")})
       });
 
       // Finish with the import
@@ -111,13 +119,12 @@ function DataMapper({ analysis, target, onImport }) {
           asDraft: uploadAsDraft,
         },
       });
-
-      strapi.notification.toggle({ type: "info", message });
+      strapi.notification.toggle({ type: message.type, message: formatMessage({ id: getTrad(message.id)}) });
     } catch (error) {
       console.log(error);
       strapi.notification.toggle({
         type: "warning",
-        message: `import.items.error`,
+        message: formatMessage({ id: getTrad('import.items.error')})
       });
     }
 
@@ -129,9 +136,9 @@ function DataMapper({ analysis, target, onImport }) {
     <>
       {isLoading && <Loader />}
       <div className="pt-3 col-12">
-        <Prompt message="import.mapper.unsaved" />
+        <Prompt message={formatMessage({ id: getTrad('import.mapper.unsaved')})} />
         <Row>
-          <h2>Map the Import Data to Destination Field</h2>
+          <h2>{formatMessage({ id: getTrad('import.mapper.label')})}</h2>
           <MappingTable
             mappingHeaders={headers}
             mappingRows={importItems}
@@ -143,24 +150,24 @@ function DataMapper({ analysis, target, onImport }) {
           />
         </Row>
         <Row>
-          <span className="mr-3">Count of Items to Import:</span>
+          <span className="mr-3">{formatMessage({ id: getTrad('import.mapper.count')})}</span>
           <strong>{kind === "singleType" ? 1 : importItems.length}</strong>
         </Row>
         {options.draftAndPublish && (
           <Row>
             <Checkbox
-              message="Upload as Draft"
+              message={formatMessage({ id: getTrad('import.mapper.checkbox.draft')})}
               name="uploadAsDraft"
               value={uploadAsDraft}
               onChange={() => setUploadAsDraft(!uploadAsDraft)}
             />
           </Row>
         )}
         <Row>
-          <Button label="Import Data" onClick={uploadData} />
+          <Button label={formatMessage({ id: getTrad('import.mapper.button.import')})} onClick={uploadData} />
           <Button
             className="ml-3"
-            label="Cancel"
+            label={formatMessage({ id: getTrad('import.mapper.button.cancel')})}
             color="delete"
             onClick={() => onImport()}
           />