Merge pull request #1 from thaind97git/develop

Add i18n feature

Author: thaind97git

README.md

@@ -70,7 +70,7 @@ For Production:
 - [ ] Redux-saga
 - [x] Jest
 - [x] Axios
-- [x] I18n [Not completed]
+- [x] I18n
 - [x] React-router
 - [x] Alias
 - [x] Hot reload
@@ -139,6 +139,43 @@ For Production:
 
     _- You should use [BEM](http://getbem.com/) to write css without conflict_
 
+- Using i18n
+
+  - Create new json file at `src/locales/resources/<file-name/>.json`
+  - Add content follow this format into json file
+    ```javascript
+    {
+      "en": {
+        "name": "Name"
+      },
+      "vi": {
+        "name": "Tên"
+      }
+    }
+    ```
+  - update `src/locales/resources/index.ts` like this:
+
+    ```javascript
+    /*
+     * you can use other name instead `user`
+     * this name will be used as path to key
+    */
+    import user from './<file-name/>.json
+
+    const mergeResource: IResource = {
+      ..., // others json
+      user
+    };
+    ```
+
+  - Now inside any where, you can access to key like this:
+
+    ```javascript
+      const { t } = useTranslation()
+
+      t('user.name') will be render "Name" for `en` and "Tên" for `vi`
+    ```
+
 ---
 
 ## Tips

config/@types/index.d.ts

@@ -15,7 +15,7 @@ declare module '*.png' {
 }
 
 declare module '*.json' {
-  const content: string;
+  const content: any;
   export default content;
 }
 

public/static/images/icon/arrow-down.svg

@@ -0,0 +1,62 @@
+import useOutsideClick from '@/hooks/useOutsideClick';
+import React, { useRef, useState } from 'react';
+import ArrowDown from '@/static/images/icon/arrow-down.svg';
+
+interface IOption {
+  value: any;
+  label: any;
+}
+
+interface IProps {
+  options: Array<IOption>;
+  width?: number;
+  onChange?: (option: IOption) => void;
+  className?: string;
+}
+
+const Select: React.FC<IProps> = ({
+  options,
+  width = 240,
+  onChange,
+  className,
+}) => {
+  const [show, setShow] = useState<boolean>(false);
+  const [option, setOption] = useState<IOption>(options[0]);
+  const selectRef = useRef(null);
+  useOutsideClick(selectRef, () => {
+    show === true && setShow(false);
+  });
+
+  function handleSelectDropdown(option: IOption) {
+    const opt = options.find(opt => opt.value === option.value);
+
+    typeof onChange === 'function' && onChange(opt);
+    setOption(opt);
+    setShow(false);
+  }
+  return (
+    <div
+      ref={selectRef}
+      style={{ width }}
+      className={`dropdown ${className || ''}`}
+    >
+      <div onClick={() => setShow(true)} className="dropdown-select">
+        <span className="dropdown-selected">{option.label}</span>
+        <ArrowDown className={`dropdown-caret ${show ? 'up' : 'down'}`} />
+      </div>
+      <ul className={`dropdown-list ${show ? 'show' : ''}`}>
+        {options.map(opt => (
+          <li
+            key={opt.value}
+            onClick={() => handleSelectDropdown(opt)}
+            className="dropdown-item"
+          >
+            {opt.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Select;

public/static/images/icon/en.svg

@@ -0,0 +1,64 @@
+.dropdown {
+  color: $primary-color;
+  width: 100%;
+  position: relative;
+  border-radius: 8px;
+  .dropdown-caret {
+    width: 12px;
+    fill: $primary-color;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+  .dropdown-select {
+    background-color: white;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    border-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+  .dropdown-select * {
+    pointer-events: none;
+  }
+  .dropdown-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.4rem;
+    background-color: white;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    border-radius: 8px;
+    display: none;
+    &::before {
+      content: '';
+      height: 1rem;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      transform: translateY(-100%);
+    }
+    &.show {
+      display: block;
+    }
+
+    .dropdown-item {
+      padding: 1rem;
+      color: #47536b;
+      transition: all 0.25s ease;
+      border-radius: 8px;
+      cursor: pointer;
+      &:hover {
+        color: $primary-color;
+        background-color: #f1fbff;
+      }
+    }
+  }
+}