localized and persisted dir in articles and learn pages

Author: ZibanPirate

web/src/apps/main/pages/articles/index.tsx

@@ -29,7 +29,7 @@ export const ArticlesPage: FC = () => {
 
   return (
     <ErrorBoundary>
-      <Grid container className="articles">
+      <Grid container className="articles" dir="ltr">
         {/* Sidebar */}
         <Grid item xs={false} md={3} style={{ paddingTop: "1rem" }}>
           {sidebarTree === "ERROR" ? (

web/src/apps/main/pages/articles/landing/index.tsx

@@ -5,7 +5,6 @@ import Typography from "@material-ui/core/Typography";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import ListIcon from "@material-ui/icons/List";
 import { FC } from "react";
-import { FormattedMessage } from "react-intl";
 import articlesLanding from "src/apps/main/assets/svg/articles-landing.svg";
 
 const useStyles = makeStyles((theme) => ({
@@ -40,18 +39,10 @@ export const Landing: FC<LandingProps> = ({ onShowSidebar }) => {
     <div className={classes.root}>
       <img src={articlesLanding} className={classes.image} alt="Dzcode i/o: Articles" />
       <Typography className={classes.text}>
-        <FormattedMessage
-          id="faq.articlespage.header"
-          defaultMessage="Welcome to the articles section of Dzcode i/o"
-        />
+        {"Welcome to the articles section of Dzcode i/o"}
       </Typography>
       {md ? (
-        <Typography className={classes.text}>
-          <FormattedMessage
-            id="faq.sidebar.select"
-            defaultMessage="👈 Please select from the left sidebar"
-          />
-        </Typography>
+        <Typography className={classes.text}>{"👈 Please select from the left sidebar"}</Typography>
       ) : (
         <Button
           className={classes.button}

web/src/apps/main/pages/learn/index.tsx

@@ -6,6 +6,7 @@ import { FC, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, useRouteMatch } from "react-router-dom";
 import { Sidebar } from "src/apps/main/components/sidebar";
+import { t } from "src/apps/main/components/t";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
 import { fetchDocumentationList } from "src/apps/main/redux/actions/documentation-page";
 import { LearnPageState } from "src/apps/main/redux/reducers/learn-page";
@@ -29,13 +30,13 @@ export const LearnPage: FC = () => {
 
   return (
     <ErrorBoundary>
-      <Grid container className="learn">
+      <Grid container className="learn" dir="ltr">
         {/* Sidebar */}
         <Grid item xs={false} md={3} style={{ paddingTop: "1rem" }}>
           {sidebarTree === "ERROR" ? (
             <TryAgain
-              error="Ops, an error occurred while loading the documentation list, please try again..."
-              action="Try Again"
+              error={t("team-error")}
+              action={t("team-try-again")}
               onClick={() => dispatch(fetchDocumentationList())}
             />
           ) : (

web/src/apps/main/pages/learn/landing/index.tsx

@@ -5,7 +5,6 @@ import Typography from "@material-ui/core/Typography";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import ListIcon from "@material-ui/icons/List";
 import { FC } from "react";
-import { FormattedMessage } from "react-intl";
 import learnLanding from "src/apps/main/assets/svg/learn-landing.svg";
 
 const useStyles = makeStyles((theme) => ({
@@ -40,26 +39,18 @@ export const Landing: FC<LandingProps> = ({ onShowSidebar }) => {
     <div className={classes.root}>
       <img src={learnLanding} className={classes.image} alt="Dzcode i/o: Learn" />
       <Typography className={classes.text}>
-        <FormattedMessage
-          id="faq.learnpage.header"
-          defaultMessage="Welcome to the learning section of Dzcode i/o"
-        />
+        {"Welcome to the learning section of Dzcode i/o"}
       </Typography>
       {md ? (
-        <Typography className={classes.text}>
-          <FormattedMessage
-            id="faq.sidebar.select"
-            defaultMessage="👈 Please select from the left sidebar"
-          />
-        </Typography>
+        <Typography className={classes.text}>{"👈 Please select from the left sidebar"}</Typography>
       ) : (
         <Button
           className={classes.button}
           startIcon={<ListIcon />}
           size="large"
           onClick={() => onShowSidebar()}
         >
-          Materials list
+          {"Materials list"}
         </Button>
       )}
     </div>