Add light theme, start adding translations

muhammetselimfe · Feb 13, 2021 · 1346d8d · 1346d8d
1 parent d6da8a9
commit 1346d8d
Show file tree

Hide file tree

Showing 19 changed files with 428 additions and 65 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12.18.3-alpine3.12
+FROM node:14.15.4-alpine3.12
 
 COPY . /app
 WORKDIR /app

diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -1,9 +1,12 @@
 import React from 'react'
+import { useIntl } from "react-intl"
 
 import { defaultLocale, locales } from '../../locales';
 import { Link } from '../../routes'
 
 export const Footer = ({ children }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="footer">
       <div className="container">
@@ -14,7 +17,7 @@ export const Footer = ({ children }) => {
             </div>
           </div>
           <div className="right">
-            <button type="button" className="btn btn-secondary join-us">Join us on Telegram</button>
+            <button type="button" className="btn btn-secondary join-us">{f('footer.join.us.telegram')}</button>
             <ul className="social-icon">
               <li><a href="#"><img src="/static/images/instagram.png" alt="" className="footer-dark" />
                 <img src="/static/images/light-instagram.png" alt="" className="footer-light" style={{ display: 'none' }} /></a></li>

diff --git a/components/Header/index.js b/components/Header/index.js
@@ -2,11 +2,14 @@ import React from 'react'
 import { NavDropdown, Navbar } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 import { defaultLocale, locales } from '../../locales';
 import { Link } from '../../routes'
 
 export const Header = ({ children, currentLocale, currentRoute, route }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   const router = useRouter()
   const { darkModeActive, switchToDarkMode, switchToLightMode } = useDarkMode()
 
@@ -33,15 +36,15 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
             <li className={`nav-item ${currentRoute === 'home' ? 'active' : ''}`}>
               <Link route={`${currentLocale}-home`} params={{ locale }}>
                 <a className="nav-link">
-                  Nodes
+                  {f('header.pages.nodes.title')}
                   <span className="sr-only">(current)</span>
                 </a>
               </Link>
             </li>
             <li className={`nav-item ${currentRoute === 'notifier' ? 'active' : ''}`}>
               <Link route={`${currentLocale}-notifier`} params={{ locale }}>
                 <a className="nav-link">
-                  Notifier
+                  {f('header.pages.notifier.title')}
                 </a>
               </Link>
             </li>

diff --git a/components/Node/index.js b/components/Node/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { gql, useQuery } from '@apollo/client';
 import { FaCircle } from "react-icons/fa";
 import moment from 'moment'
+import { useIntl } from "react-intl"
 
 import dynamic from "next/dynamic";
 
@@ -57,8 +58,6 @@ export const Node = ({
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
 
-  console.log({ router })
-
   const filter = {
     nodeID: router.query.id,
     page,
@@ -70,8 +69,6 @@ export const Node = ({
     },
   });
 
-  console.log(data)
-
   const position = [51.505, -0.09]
 
   const MapWithNoSSR = dynamic(() => import("../Map"), {

diff --git a/components/Nodes/index.js b/components/Nodes/index.js
@@ -3,6 +3,7 @@ import { gql, useQuery } from '@apollo/client';
 import { FaCircle } from "react-icons/fa";
 import moment from 'moment'
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 import shortNodeId from '../../utils/shortNodeId';
 import numberFormat from '../../utils/numberFormat';
@@ -49,36 +50,38 @@ export const GET_NODES = gql`
 `;
 
 const Stats = ({ data = {} }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="col-md-9 col-sm-9 rectangleSmall">
       <div className="row total-node-wrapper">
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL NODES
+            {f('stats.total.nodes.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalNodes || 0, 0)}
           </div>
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL PROVIDERS
+            {f('stats.total.providers.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalProviders || 0, 0)}
           </div>
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL DELIGATIONS
+            {f('stats.total.delegations.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalDelegations || 0, 0)}
           </div>
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL BLOCKS
+            {f('stats.total.blocks.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalBlocks || 0, 0)}
@@ -88,15 +91,15 @@ const Stats = ({ data = {} }) => {
       <div className="row">
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL TRANSACTIONS
+            {f('stats.total.transactions.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalTransactions || 0, 0)}
           </div>
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL PARTICIPATION
+            {f('stats.total.participation.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalParticipation || 0, 1)}
@@ -115,6 +118,8 @@ const Filters = ({
   const [selectFilterOpen, setSelectFilterOpen] = React.useState(false);
   const [selectFilterOptionsOpen, setSelectFilterOptionsOpen] = React.useState(false);
   const { darkModeActive } = useDarkMode()
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="filter-wrapper">
       <div className="search-container">
@@ -123,7 +128,7 @@ const Filters = ({
             id="text1"
             type="text"
             className="form-control search-field"
-            placeholder="Search Address / TX / Asset / Blockchain / Subnet"
+            placeholder={f('filter.search.placeolder')}
             value={filter}
             onChange={(event) => {
               setFilter(event.target.value)
@@ -261,10 +266,11 @@ export const Nodes = ({ currentLocale }) => {
     },
   });
 
-  console.log(data)
-
   const locale = currentLocale === defaultLocale ? undefined : currentLocale
 
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
+
   // if (loading) return 'Loading...';
   // if (error) return `Error! ${error.message}`;
 
@@ -283,7 +289,7 @@ export const Nodes = ({ currentLocale }) => {
                 <span style={{ color: '#fff' }}> / </span>
                 <Link route={`${currentLocale}-home`} params={{ locale }}>
                   <a className="nodes">
-                    Nodes
+                    {f('page.nodes.header')}
                   </a>
                 </Link>
               </div>
@@ -304,7 +310,7 @@ export const Nodes = ({ currentLocale }) => {
           <div className="container">
             <div className="">
               <div className="PageTitleFont">
-                Nodes
+                {f('page.nodes.header')}
               </div>
             </div>
           </div>
@@ -325,15 +331,15 @@ export const Nodes = ({ currentLocale }) => {
                   <table id="datatable" className="display responsive nowrap dataTable table-hover" style={{ width: '100%' }}>
                     <thead>
                       <tr>
-                        <th>Node ID</th>
-                        <th>Delegators</th>
-                        <th>Total stake</th>
-                        <th className="free-space">Free space</th>
-                        <th>Started on</th>
-                        <th>Time left</th>
-                        <th>Fee</th>
-                        <th>Max yield</th>
-                        <th>Country</th>
+                        <th>{f('page.nodes.table.header.nodeid.title')}</th>
+                        <th>{f('page.nodes.table.header.delegators.title')}</th>
+                        <th>{f('page.nodes.table.header.totalstake.title')}</th>
+                        <th className="free-space">{f('page.nodes.table.header.freespace.title')}</th>
+                        <th>{f('page.nodes.table.header.startedon.title')}</th>
+                        <th>{f('page.nodes.table.header.timeleft.title')}</th>
+                        <th>{f('page.nodes.table.header.fee.title')}</th>
+                        <th>{f('page.nodes.table.header.maxyield.title')}</th>
+                        <th>{f('page.nodes.table.header.country.title')}</th>
                         <th></th>
                       </tr>
                     </thead>

diff --git a/components/TableControls/index.js b/components/TableControls/index.js
@@ -1,4 +1,5 @@
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 const maxPagesToShow = 5
 
@@ -10,6 +11,8 @@ const TableControls = ({
   pagination = {},
 }) => {
   const { darkModeActive } = useDarkMode()
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
 
   const numberOfPages = Math.ceil(pagination.count / perPage) || 0
 
@@ -22,21 +25,12 @@ const TableControls = ({
   }
   const endPage = Math.min(startPage + maxPagesToShow, numberOfPages)
 
-  console.log({
-    page,
-    startPage,
-    endPage,
-    pagination,
-    perPage,
-    numberOfPages,
-  })
-
   return (
     <div className="row">
       <div className="col-sm-3">
         <div className="dataTables_length bs-select" id="datatable_length">
           <label>
-            Show
+            {f('pagination.show')}
             {' '}
             <select
               name="datatable_length"
@@ -52,7 +46,7 @@ const TableControls = ({
               <option value="-1">All</option>
             </select>
             {' '}
-            entries
+            {f('pagination.entries')}
           </label>
         </div>
       </div>
@@ -119,7 +113,7 @@ const TableControls = ({
           </a>
         </div>
         <div id="jump-to-page">
-          <span>Jump to page:</span>
+          <span>{f('pagination.jump.to.page')}:</span>
           <div className="dataTables_length bs-select">
             <select
               disabled={numberOfPages < 40}

diff --git a/i18n.js b/i18n.js
@@ -1,9 +1,25 @@
-const NextI18Next = require('next-i18next').default
-const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
-const path = require('path')
+const { locales, defaultLocale } = require("./locales");
 
-module.exports = new NextI18Next({
-  otherLanguages: ['en'],
-  localeSubpaths,
-  localePath: path.resolve('./public/static/locales')
-})
+module.exports = {
+  locales: locales,
+  defaultLocale: defaultLocale,
+  // pages: {
+  //   "*": ["common"],
+  //   "/home": ["home"],
+  //   "/node": ["node"]
+  // },
+  // loader: false,
+  // loadLocaleFrom: (locale, namespace) =>
+  //   import(`./locales/${locale}/${namespace}`).then((m) => m.default),
+}
+
+// const NextI18Next = require('next-i18next').default
+// // const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
+// const path = require('path')
+
+// module.exports = new NextI18Next({
+//   otherLanguages: locales,
+//   defaultLanguage: defaultLocale,
+//   // localeSubpaths,
+//   localePath: path.resolve('./public/static/locales')
+// })
diff --git a/i18nLocales/en.js b/i18nLocales/en.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "Nodes",
+  "header.pages.notifier.title": "Notifier",
+
+  "stats.total.nodes.title": "Total nodes",
+  "stats.total.providers.title": "Total providers",
+  "stats.total.delegations.title": "Total delegations",
+  "stats.total.blocks.title": "Total blocks",
+  "stats.total.transactions.title": "Total transactions",
+  "stats.total.participation.title": "Total participation",
+
+  "page.nodes.title": "Nodes",
+  "page.nodes.header": "Nodes",
+
+  "page.nodes.table.header.nodeid.title": "Node id",
+  "page.nodes.table.header.delegators.title": "Delegators",
+  "page.nodes.table.header.totalstake.title": "Total stake",
+  "page.nodes.table.header.freespace.title": "Free space",
+  "page.nodes.table.header.startedon.title": "Started on",
+  "page.nodes.table.header.timeleft.title": "Time left",
+  "page.nodes.table.header.fee.title": "Fee",
+  "page.nodes.table.header.maxyield.title": "Max yield",
+  "page.nodes.table.header.country.title": "Country",
+
+  "pagination.show": "Show",
+  "pagination.entries": "entries",
+  "pagination.jump.to.page": "Jump to page",
+
+  "filter.search.placeolder": "Search Address / TX / Asset / Blockchain / Subnet",
+
+  "space.available": "Available space",
+
+  "footer.join.us.telegram": "Join us on Telegram"
+}
diff --git a/i18nLocales/index.js b/i18nLocales/index.js
@@ -0,0 +1,13 @@
+import en from './en'
+import nl from './nl'
+import ja from './ja'
+import ko from './ko'
+import zh from './zh'
+
+export default {
+  en: en,
+  nl: nl,
+  ja: ja,
+  ko: ko,
+  zh: zh,
+}