Feature/custom-hook

package.json

@@ -15,6 +15,7 @@
     "analyze": "cross-env BUNDLE_ANALYZE=both npm run build",
     "export": "cross-env NODE_ENV=production next export",
     "cli": "pankod-cli add",
+    "new": "plop",
     "storybook": "start-storybook -s ./public/static -p 6006",
     "build-storybook": "build-storybook -s ./public/static  -c .storybook -o .storybookout"
   },
@@ -96,6 +97,7 @@
     "jest-styled-components": "^6.3.4",
     "nock": "^11.3.5",
     "nodemon": "^2.0.3",
+    "plop": "^3.1.1",
     "prettier": "^1.19.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.3",

pages/About/index.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { NextPage } from "next";
+import { useSelector, useDispatch } from "react-redux";
+
+import { withTranslation } from "@Server/i18n";
+import { IStore } from "@Redux/IStore";
+import { AboutActions } from "@Actions";
+import { Heading, LocaleButton } from "@Components";
+
+import { IAbout, ReduxNextPageContext } from "@Interfaces";
+
+const About: NextPage<IAbout.IProps, IAbout.InitialProps> = ({
+    t,
+    i18n,
+}) => {
+    const About = useSelector((state: IStore) => state.About);
+    const dispatch = useDispatch();
+
+    const renderLocaleButtons = (activeLanguage: string) =>
+        ["en", "es", "tr"].map(lang => (
+            <LocaleButton
+                key={lang}
+                lang={lang}
+                isActive={activeLanguage === lang}
+                onClick={() => i18n.changeLanguage(lang)}
+            />
+        ));
+
+    return (
+        <div>
+            {renderLocaleButtons(i18n.language)}
+        </div>
+    );
+};
+
+About.getInitialProps = async (
+    ctx: ReduxNextPageContext
+): Promise<IAbout.InitialProps> => {
+    await ctx.store.dispatch(
+        AboutActions.GetApod({
+            params: { hd: true },
+        })
+    );
+    return { namespacesRequired: ["common"] };
+};
+
+const Extended = withTranslation("common")(About);
+
+export default Extended;

pages/index.tsx

@@ -0,0 +1,98 @@
+// #region Global Imports
+import * as React from "react";
+import { NextPage } from "next";
+import { useSelector, useDispatch } from "react-redux";
+// #endregion Global Imports
+
+// #region Local Imports
+import { withTranslation } from "@Server/i18n";
+import {
+    Container,
+    Top,
+    TopText,
+    Middle,
+    MiddleLeft,
+    MiddleLeftButtons,
+    MiddleRight,
+    Apod,
+    ApodButton,
+} from "@Styled/Home";
+import { IStore } from "@Redux/IStore";
+import { HomeActions } from "@Actions";
+import { Heading, LocaleButton } from "@Components";
+// #endregion Local Imports
+
+// #region Interface Imports
+import { IHomePage, ReduxNextPageContext } from "@Interfaces";
+// #endregion Interface Imports
+
+const Home: NextPage<IHomePage.IProps, IHomePage.InitialProps> = ({
+    t,
+    i18n,
+}) => {
+    const home = useSelector((state: IStore) => state.home);
+    const dispatch = useDispatch();
+
+    const renderLocaleButtons = (activeLanguage: string) =>
+        ["en", "es", "tr"].map(lang => (
+            <LocaleButton
+                key={lang}
+                lang={lang}
+                isActive={activeLanguage === lang}
+                onClick={() => i18n.changeLanguage(lang)}
+            />
+        ));
+
+    return (
+        <Container>
+            <Top>
+                <img src="/images/pankod-logo.png" alt="Pankod Logo" />
+            </Top>
+            <Middle>
+                <MiddleLeft>
+                    <MiddleLeftButtons>
+                        {renderLocaleButtons(i18n.language)}
+                    </MiddleLeftButtons>
+                </MiddleLeft>
+                <MiddleRight>
+                    <TopText>{t("common:Hello")}</TopText>
+                    <Heading text={t("common:World")} />
+                    <Apod>
+                        <ApodButton
+                            onClick={() => {
+                                dispatch(
+                                    HomeActions.GetApod({
+                                        params: { hd: false },
+                                    })
+                                );
+                            }}
+                        >
+                            Discover Space
+                        </ApodButton>
+                        <img
+                            src={home.image.url}
+                            height="300"
+                            width="150"
+                            alt="Discover Space"
+                        />
+                    </Apod>
+                </MiddleRight>
+            </Middle>
+        </Container>
+    );
+};
+
+Home.getInitialProps = async (
+    ctx: ReduxNextPageContext
+): Promise<IHomePage.InitialProps> => {
+    await ctx.store.dispatch(
+        HomeActions.GetApod({
+            params: { hd: true },
+        })
+    );
+    return { namespacesRequired: ["common"] };
+};
+
+const Extended = withTranslation("common")(Home);
+
+export default Extended;

plop-templates/Component/Component.module.scss.hbs

@@ -0,0 +1,3 @@
+.{{pascalCase name}}{
+
+}

plop-templates/Component/Component.stories.tsx.hbs

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import {{pascalCase name}} from './{{pascalCase name}}';
+
+export const attributes = {
+
+};
+
+export const actions = {
+
+}
+
+storiesOf("{{pascalCase name}}", module)
+.add("Test",() => (
+    <{{pascalCase name}} />
+))

plop-templates/Component/Component.test.ts.hbs

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+import { {{pascalCase name}} } from "./Greetings";
+
+describe("when rendered with a `name` prop", () => {
+  it("should paste it into the greetings text", () => {
+    render(<{{pascalCase name}} name="Test Name" />); 
+    expect(
+      screen.getByTestId("{{pascalCase name}}")
+    ).toBeInTheDocument();
+  });
+});

plop-templates/Component/Component.ts.hbs

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+
+export interface {{pascalCase name}}Props {
+}
+
+const {{pascalCase name}}: FC<{{pascalCase name}}Props> = (props) => {
+    return (
+        <div className={styles.{{pascalCase name}} } data-testid="{{pascalCase name}}">
+            {{pascalCase name}}
+        </div>
+    );
+};
+
+export default {{pascalCase name}};

plop-templates/Page/IPage.ts.hbs

@@ -0,0 +1,35 @@
+// #region Global Imports
+import { WithTranslation } from "next-i18next";
+// #endregion Global Imports
+
+declare namespace I{{pascalCase name}} {
+    export interface IProps extends WithTranslation {}
+
+    export interface InitialProps {
+        namespacesRequired: string[];
+    }
+
+    export interface IStateProps {
+        {{name}}: {
+            version: number;
+        };
+        image: {
+            url: string;
+        };
+    }
+
+    namespace Actions {
+        export interface IMapPayload {}
+
+        export interface IMapResponse {}
+
+        export interface IGetApodPayload extends PlanetaryModel.GetApodPayload {
+            params: {};
+        }
+
+        export interface IGetApodResponse
+            extends PlanetaryModel.GetApodResponse {}
+    }
+}
+
+export { I{{pascalCase name}} };

plop-templates/Page/IStore.ts.hbs

@@ -0,0 +1,8 @@
+// #region Interface Imports
+import { IHomePage } from "@Interfaces";
+// #endregion Interface Imports
+
+export interface IStore {
+    home: I{{HomePage}}.IStateProps;
+    /* Add_Page_IStore_Here */
+}

plop-templates/Page/Page.tsx.hbs

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { NextPage } from "next";
+import { useSelector, useDispatch } from "react-redux";
+
+import { withTranslation } from "@Server/i18n";
+import { IStore } from "@Redux/IStore";
+import { {{pascalCase name}}Actions } from "@Actions";
+import { Heading, LocaleButton } from "@Components";
+
+import { I{{pascalCase name}}, ReduxNextPageContext } from "@Interfaces";
+
+const {{pascalCase name}}: NextPage<I{{pascalCase name}}.IProps, I{{pascalCase name}}.InitialProps> = ({
+    t,
+    i18n,
+}) => {
+    const {{name}} = useSelector((state: IStore) => state.{{name}});
+    const dispatch = useDispatch();
+
+    const renderLocaleButtons = (activeLanguage: string) =>
+        ["en", "es", "tr"].map(lang => (
+            <LocaleButton
+                key={lang}
+                lang={lang}
+                isActive={activeLanguage === lang}
+                onClick={() => i18n.changeLanguage(lang)}
+            />
+        ));
+
+    return (
+        <div>
+            {renderLocaleButtons(i18n.language)}
+        </div>
+    );
+};
+
+{{pascalCase name}}.getInitialProps = async (
+    ctx: ReduxNextPageContext
+): Promise<I{{pascalCase name}}.InitialProps> => {
+    await ctx.store.dispatch(
+        {{pascalCase name}}Actions.GetApod({
+            params: { hd: true },
+        })
+    );
+    return { namespacesRequired: ["common"] };
+};
+
+const Extended = withTranslation("common")({{pascalCase name}});
+
+export default Extended;

plop-templates/hook/hook.ts.hbs

@@ -0,0 +1,7 @@
+
+export interface use{{pascalCase name}}Props {
+}
+
+export const use{{pascalCase name}} = ({}: use{{pascalCase name}}Props) => {
+  return {};
+}