t/i18n: support for internationalisation

src/components/ActionContext.js

@@ -9,7 +9,8 @@ export const ActionProvider = ({
   comments,
   signinUrl,
   signupUrl,
-  customInput
+  customInput,
+  i18n
 }) => {
   const [replies, setReplies] = useState([])
   const [user, setUser] = useState()
@@ -140,7 +141,8 @@ export const ActionProvider = ({
         signupUrl: signupUrl,
         user: user,
         customInput: customInput,
-        submit: submit
+        submit: submit,
+        i18n: i18n
       }}
     >
       {children}

src/components/CommentStructure.js

@@ -41,7 +41,7 @@ const CommentStructure = ({ i, reply, parentId }) => {
               disabled={!actions.user}
             >
               {' '}
-              <FontAwesomeIcon icon={faReply} size='1x' color='#a5a5a5' /> Reply
+              <FontAwesomeIcon icon={faReply} size='1x' color='#a5a5a5' /> {actions.i18n.comment.reply}
             </button>
           </div>
         </div>
@@ -65,13 +65,13 @@ const CommentStructure = ({ i, reply, parentId }) => {
                   onClick={() => actions.handleAction(i.comId, edit)}
                 >
                   {' '}
-                  edit
+                  {actions.i18n.editComment.action}
                 </button>
               </div>
               <div>
                 <Popup
                   trigger={
-                    <button className={styles.deleteBtn}> delete</button>
+                    <button className={styles.deleteBtn}> {actions.i18n.deleteComment.action}</button>
                   }
                   modal
                   nested
@@ -87,11 +87,11 @@ const CommentStructure = ({ i, reply, parentId }) => {
                       </button>
                       <div className='header' style={modalHeader}>
                         {' '}
-                        Delete Comment{' '}
+                        {actions.i18n.deleteComment.header}{' '}
                       </div>
                       <div className='content' style={modalContent}>
                         {' '}
-                        Delete your comment permanently?
+                        {actions.i18n.deleteComment.content}
                       </div>
                       <div className='actions' style={modalActions}>
                         <button
@@ -102,7 +102,7 @@ const CommentStructure = ({ i, reply, parentId }) => {
                             close()
                           }}
                         >
-                          Delete
+                          {actions.i18n.deleteComment.confirmButton}
                         </button>
                         <button
                           className='button'
@@ -111,7 +111,7 @@ const CommentStructure = ({ i, reply, parentId }) => {
                             close()
                           }}
                         >
-                          Cancel
+                          {actions.i18n.deleteComment.cancelButton}
                         </button>
                       </div>
                     </div>

src/components/DisplayComments.js

@@ -33,7 +33,8 @@ const DisplayComments = ({ comments }) => {
                 parentId: i.comId,
                 submit: actions.submit,
                 handleCancel: actions.handleCancel,
-                edit: false
+                edit: false,
+                i18n: actions.i18n
               })
             ) : (
               <InputField cancellor={i.comId} parentId={i.comId} />
@@ -51,7 +52,8 @@ const DisplayComments = ({ comments }) => {
                         handleCancel: actions.handleCancel,
                         edit: true,
                         parentId: i.comId,
-                        submit: actions.submit
+                        submit: actions.submit,
+                        i18n: actions.i18n
                       })
                     ) : (
                       <InputField
@@ -78,7 +80,8 @@ const DisplayComments = ({ comments }) => {
                         child: true,
                         submit: actions.submit,
                         handleCancel: actions.handleCancel,
-                        edit: false
+                        edit: false,
+                        i18n: actions.i18n
                       })
                     ) : (
                       <InputField

src/components/Input.js

@@ -9,7 +9,8 @@ const Input = () => {
       authorImg: action.userImg,
       main: true,
       handleCancel: action.handleCancel,
-      submit: action.submit
+      submit: action.submit,
+      i18n: action.i18n
     })
   ) : (
     <InputField authorImg={action.userImg} main />

src/components/InputField.js

@@ -33,7 +33,7 @@ const InputField = ({ cancellor, parentId, child, value, edit, main }) => {
       <input
         className={styles.postComment}
         type='text'
-        placeholder='Type your reply here.'
+        placeholder={actions.i18n.post.placeholder}
         component='input'
         value={text}
         onChange={handleChange}
@@ -54,7 +54,7 @@ const InputField = ({ cancellor, parentId, child, value, edit, main }) => {
               : { backgroundColor: '#30c3fd' }
           }
         >
-          Post
+          {actions.i18n.post.post}
         </button>
         {(text || parentId) && (
           <button
@@ -65,7 +65,7 @@ const InputField = ({ cancellor, parentId, child, value, edit, main }) => {
                 : actions.handleCancel(cancellor)
             }
           >
-            Cancel
+            {actions.i18n.post.cancel}
           </button>
         )}
       </div>

src/components/SignField.js

@@ -16,22 +16,22 @@ const SignField = () => {
   return (
     <div className={styles.signBox}>
       <div className={styles.signLine}>
-        Log in or sign up to leave a comment
+        {actions.i18n.sign.boxLine}
       </div>
       <div>
         <button
           className={styles.loginBtn}
           name='login'
           onClick={(e) => handleDivClick(e)}
         >
-          Log In
+          {actions.i18n.sign.logIn}
         </button>
         <button
           className={styles.signBtn}
           name='signup'
           onClick={(e) => handleDivClick(e)}
         >
-          Sign Up
+          {actions.i18n.sign.signUp}
         </button>
       </div>
     </div>

src/index.js

@@ -5,13 +5,66 @@ import { ActionProvider } from './components/ActionContext'
 import SignField from './components/SignField'
 import Input from './components/Input'
 
+export const enI18n = {
+  sign: {
+    boxLine: 'Log in or sign up to leave a comment',
+    logIn: 'Log In',
+    signUp: 'Sign Up'
+  },
+  post: {
+    placeholder: 'Type your reply here.',
+    post: 'Post',
+    cancel: 'Cancel',
+  },
+  comment: {
+    reply: 'Reply'
+  },
+  editComment: {
+    action: 'edit'
+  },
+  deleteComment: {
+    action: 'delete',
+    header: 'Delete Comment',
+    content: 'Delete your comment permanently?',
+    confirmButton: 'Delete',
+    cancelButton: 'Cancel'
+  }
+}
+
+export const esI18n = {
+  sign: {
+    boxLine: 'Inicie sesión o regístrese para dejar un comentario',
+    logIn: 'Iniciar Sesión',
+    signUp: 'Registrarse'
+  },
+  post: {
+    placeholder: 'Escriba su respuesta aquí.',
+    post: 'Publicar',
+    cancel: 'Cancelar',
+  },
+  comment: {
+    reply: 'Responder'
+  },
+  editComment: {
+    action: 'editar'
+  },
+  deleteComment: {
+    action: 'eliminar',
+    header: 'Eliminar Comentario',
+    content: '¿Desea eliminar su comentario permanentemente?',
+    confirmButton: 'Eliminar',
+    cancelButton: 'Cancelar'
+  }
+}
+
 export const CommentSection = ({
   commentsArray,
   currentUser,
   setComment,
   signinUrl,
   signupUrl,
-  customInput
+  customInput,
+  i18n = enI18n
 }) => {
   const [comments, setComments] = useState(commentsArray)
   useEffect(() => {
@@ -26,6 +79,7 @@ export const CommentSection = ({
       signinUrl={signinUrl}
       signupUrl={signupUrl}
       customInput={customInput}
+      i18n={i18n}
     >
       <div className={styles.section}>
         <div className={styles.inputBox}>