CHORE: removed unnecessary localization code and dependencies

packages/ui/src/dialog/index.test.tsx → packages/ui/src/contributor-card/dialog/index.test.tsx

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
 
-import { createProjects } from "../__mocks__/create-projects";
-import { createRepositories } from "../__mocks__/create-repositories";
-import { ContributionsDialog } from ".";
+import { createProjects } from "../../__mocks__/create-projects";
+import { createRepositories } from "../../__mocks__/create-repositories";
+import { ContributionsDialog, ContributionsDialogProps } from ".";
 
 it("should render a closed dialog on first mount", async () => {
   const onClose = jest.fn();
-  const props = {
+  const props: ContributionsDialogProps = {
     onClose: onClose,
     open: false,
-    projects: createProjects(2),
     repositories: createRepositories(2),
+    repositoriesText: "Repositories",
   };
 
   const { container } = render(<ContributionsDialog {...props} />);
@@ -19,11 +19,11 @@ it("should render a closed dialog on first mount", async () => {
 
 it("should handle users with no projects", async () => {
   const onClose = jest.fn();
-  const props = {
+  const props: ContributionsDialogProps = {
     onClose: onClose,
     open: true,
-    projects: [],
     repositories: createRepositories(2),
+    repositoriesText: "Repositories",
   };
 
   render(<ContributionsDialog {...props} />);
@@ -33,11 +33,11 @@ it("should handle users with no projects", async () => {
 
 it("should handle users with no repositories", async () => {
   const onClose = jest.fn();
-  const props = {
+  const props: ContributionsDialogProps = {
     onClose: onClose,
     open: true,
-    projects: createProjects(2),
     repositories: [],
+    repositoriesText: "Repositories",
   };
 
   render(<ContributionsDialog {...props} />);
@@ -47,11 +47,11 @@ it("should handle users with no repositories", async () => {
 
 it("should render a dialog", async () => {
   const onClose = jest.fn();
-  const props = {
+  const props: ContributionsDialogProps = {
     onClose: onClose,
     open: true,
-    projects: createProjects(2),
     repositories: createRepositories(2),
+    repositoriesText: "Repositories",
   };
 
   render(<ContributionsDialog {...props} />);

packages/ui/src/dialog/index.tsx → packages/ui/src/contributor-card/dialog/index.tsx

@@ -8,6 +8,7 @@ import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
+import { FC } from "react";
 
 interface ContributionItemProps {
   description: string;
@@ -36,7 +37,7 @@ interface ContributionListProps {
 const ContributionList = ({ title, items }: ContributionListProps) => {
   return (
     <>
-      <Typography variant="h4" component="h2" textAlign="center">
+      <Typography variant="h4" component="h2" textAlign="center" margin={2}>
         {title}
       </Typography>
       <List>
@@ -48,66 +49,39 @@ const ContributionList = ({ title, items }: ContributionListProps) => {
 };
 
 export interface ContributionsDialogProps {
+  repositoriesText: string;
   open: boolean;
-  projects?: Array<{
-    slug: string;
-    image?: string;
-    title: string;
-    description?: string;
-    content?: string;
-    authors?: string[];
-    contributors?: string[];
-    views?: number;
-    githubURI?: string;
-  }>;
   repositories?: { provider: string; owner: string; repository: string }[];
   onClose: () => void;
 }
 
-export function ContributionsDialog(props: ContributionsDialogProps) {
-  const { onClose, open, projects, repositories } = props;
-
-  const handleClose = () => {
-    onClose();
-  };
-
+export const ContributionsDialog: FC<ContributionsDialogProps> = ({
+  onClose,
+  open,
+  repositories,
+  repositoriesText,
+}) => {
   return (
     <Dialog
       maxWidth="sm"
       fullWidth
-      onClose={handleClose}
+      onClose={onClose}
       aria-labelledby="contribution"
       data-testid="contribution-dialog"
       open={open}
     >
       <Grid container rowSpacing={2}>
-        <Grid item xs={12}>
-          <DialogTitle
-            id="contribution"
-            sx={{ textAlign: "center", fontSize: "typography.h2.fontSize" }}
-          >
-            Contributions
-          </DialogTitle>
-        </Grid>
         <Grid item xs={12}>
           {repositories && repositories.length > 0 && (
             <ContributionList
-              title="Repositories"
+              title={repositoriesText}
               items={repositories.map((repository) => ({
                 label: repository.repository,
               }))}
             />
           )}
         </Grid>
-        <Grid item xs={12}>
-          {projects && projects.length > 0 && (
-            <ContributionList
-              title="Projects"
-              items={projects.map((project) => ({ label: project.title }))}
-            />
-          )}
-        </Grid>
       </Grid>
     </Dialog>
   );
-}
+};

packages/ui/src/contributor-card/index.test.tsx

@@ -13,15 +13,27 @@ it("should render a contributor skeleton ", async () => {
 
 it("should render a contributor card", () => {
   const contributor = createContributors(1)[0];
-  render(<ContributorCard contributor={contributor} />);
+  render(
+    <ContributorCard
+      contributor={contributor}
+      ctaText="Contributions"
+      repositoriesText="Repositories"
+    />,
+  );
   const username = screen.getByText(contributor.username);
 
   expect(username).toBeInTheDocument();
 });
 
 it("should show contributions dialog after Contributions button is clicked", async () => {
   const contributor = createContributors(1)[0];
-  render(<ContributorCard contributor={contributor} />);
+  render(
+    <ContributorCard
+      contributor={contributor}
+      ctaText="Contributions"
+      repositoriesText="Repositories"
+    />,
+  );
   const button = await screen.findByRole("button", { name: "Contributions" });
   userEvent.click(button);
 

packages/ui/src/contributor-card/index.tsx

@@ -9,7 +9,7 @@ import Skeleton from "@mui/material/Skeleton";
 import Typography from "@mui/material/Typography";
 import { FC, useState } from "react";
 
-import { ContributionsDialog } from "../dialog";
+import { ContributionsDialog } from "./dialog";
 
 const styles = {
   root: {
@@ -41,11 +41,17 @@ export const ContributorSkeleton = () => {
   );
 };
 
-interface ContributorCardProps {
+export interface ContributorCardProps {
+  ctaText: string;
+  repositoriesText: string;
   contributor: ContributorEntity;
 }
 
-export const ContributorCard: FC<ContributorCardProps> = ({ contributor }) => {
+export const ContributorCard: FC<ContributorCardProps> = ({
+  contributor,
+  ctaText,
+  repositoriesText,
+}) => {
   const [open, setOpen] = useState(false);
   const { avatarUrl, username, repositories } = contributor;
   return (
@@ -64,10 +70,15 @@ export const ContributorCard: FC<ContributorCardProps> = ({ contributor }) => {
           fullWidth
           variant="contained"
         >
-          Contributions
+          {ctaText}
         </Button>
       </CardActions>
-      <ContributionsDialog repositories={repositories} open={open} onClose={() => setOpen(false)} />
+      <ContributionsDialog
+        repositoriesText={repositoriesText}
+        repositories={repositories}
+        open={open}
+        onClose={() => setOpen(false)}
+      />
     </MuiCard>
   );
 };

packages/ui/src/faq-card/index.tsx

@@ -24,7 +24,7 @@ export const FaqCard = ({ title, questions }: FaqCardProps) => {
       </Grid>
       <Grid item xs={12}>
         {questions.map(({ question, answer }, index) => (
-          <Accordion key={`faq-${index}`} variant="outlined">
+          <Accordion key={`faq-${index}`} variant="outlined" style={{ marginTop: -1 }}>
             <AccordionSummary expandIcon={<ExpandMore />}>
               <Typography variant="body1">{question}</Typography>
             </AccordionSummary>

packages/ui/src/translation-factory/index.tsx

@@ -0,0 +1,47 @@
+import type { VFC } from "react";
+
+type BaseDictionary = Record<string, Record<string, string>>;
+
+export const translationFactory =
+  <T extends BaseDictionary>(
+    dictionary: T,
+    getLanguageCode: () => keyof T[keyof T],
+    fallbackText = "MISSING_TRANSLATION",
+  ): VFC<
+    Partial<Record<keyof T, boolean>> & {
+      k?: keyof T;
+      r?: Record<string, string>;
+    }
+  > =>
+  // eslint-disable-next-line react/display-name
+  ({ k, r = {}, ...props }) => {
+    const languageCode = getLanguageCode();
+    const key = (k as keyof T) || (Object.keys(props)[0] as keyof T);
+    return <>{replace(dictionary, languageCode, fallbackText, key, r)}</>;
+  };
+
+export const translationFunctionFactory =
+  <T extends Record<string, Record<string, string>>>(
+    dictionary: T,
+    getLanguageCode: () => keyof T[keyof T],
+    fallbackText?: string,
+  ): ((k: keyof T, r?: Record<string, string>) => string) =>
+  (k, r = {}) => {
+    const languageCode = getLanguageCode();
+    return replace(dictionary, languageCode, fallbackText, k, r);
+  };
+
+const replace = <T extends BaseDictionary>(
+  dictionary: T,
+  languageCode: keyof T[keyof T],
+  fallbackText = "MISSING_TRANSLATION",
+  k: keyof T,
+  r: Record<string, string> = {},
+) => {
+  const key = k;
+  let value = dictionary[key]?.[languageCode] || fallbackText;
+  Object.keys(r).forEach((rKey: keyof typeof r) => {
+    value = value.replace(RegExp(`${rKey}`), r[rKey]);
+  });
+  return value;
+};

web/package.json

@@ -26,8 +26,6 @@
     "markdown-to-jsx": "^7.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-intl": "^5.20.6",
-    "react-intl-translations-manager": "^5.0.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.0",
     "react-spring": "^8.0.27",

web/src/apps/main/components/card/index.tsx

@@ -47,7 +47,7 @@ export const Card: FC<CardProps> = ({ info }) => {
       {info ? (
         <>
           <CardMedia className={classes.media} image={info.image} title={info.title} />
-          <CardContent className={classes.content}>
+          <CardContent dir="ltr" className={classes.content}>
             <Typography gutterBottom variant="h6">
               {info.title}
             </Typography>

web/src/apps/main/components/footer/__snapshots__/footer.spec.tsx.snap

@@ -183,13 +183,14 @@ exports[`components/footer/footer.spec.tsx should render properly 1`] = `
           <h6
             class="MuiTypography-root makeStyles-categoryTitle-3 MuiTypography-h6"
           >
-            Contact Information
+            FAQ
           </h6>
           <a
             href="tel:+21367-626-1157"
           >
             <p
               class="MuiTypography-root makeStyles-linkText-2 MuiTypography-body1"
+              style="direction: ltr; display: inline-block;"
             >
               +213 06-76-26-11-57
             </p>
@@ -206,10 +207,12 @@ exports[`components/footer/footer.spec.tsx should render properly 1`] = `
           <p
             class="MuiTypography-root makeStyles-linkText-2 MuiTypography-body1"
           >
-            Copyright © 
-            2020 
+            Copyright ©
+
+            2022 
             <a
               href="https://twitter.com/dzcode_io"
+              style="direction: ltr; display: inline-block;"
             >
               @dzCode_io
             </a>

web/src/apps/main/components/footer/footer.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react";
-import { IntlProvider } from "react-intl";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 import { createMainStore } from "src/apps/main/redux";
@@ -13,9 +12,7 @@ describe("components/footer/footer.spec.tsx", () => {
     const { container } = render(
       <Provider store={mainStore}>
         <Router>
-          <IntlProvider locale={"en"} defaultLocale="en">
-            <Footer />
-          </IntlProvider>
+          <Footer />
         </Router>
       </Provider>,
     );