Adjust pages, account confirm, reset password views

next.config.js

@@ -1,48 +1,11 @@
 const { parsed: env } = require("dotenv").config();
-const sass = require("@zeit/next-sass");
-const css = require("@zeit/next-css");
-const images = require("next-images");
 const withPlugins = require("next-compose-plugins");
 const optimizedImages = require("next-optimized-images");
-const sourceMaps = require("@zeit/next-source-maps");
-
-// next-optimized-images
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = withPlugins(
-  [
-    [
-      sass,
-      {
-        sassLoaderOptions: { sourceMap: true },
-      },
-    ],
-    [
-      optimizedImages,
-      {
-        /**
-         * TODO:
-         * Plugin breaks file loader for svg, find a way to use it as a default here.
-         */
-        handleImages: ["jpeg", "png", "webp", "gif"],
-      },
-    ],
-  ],
+  [[optimizedImages, { handleImages: ["jpeg", "png", "webp", "gif"] }]],
   {
-    optimization: {
-      splitChunks: {
-        chunks: "all",
-        name: false,
-        cacheGroups: {
-          styles: {
-            name: false,
-            test: /\.css$/,
-            chunks: "all",
-            enforce: true,
-          },
-        },
-      },
-      runtimeChunk: true, // This line is just for you to know where I added the lines above.
-    },
     env: {
       API_URI: "http://localhost:8000/graphql/",
       DEMO_MODE: false,
@@ -72,6 +35,29 @@ module.exports = withPlugins(
         },
       ];
 
+      if (!isServer) {
+        config.devtool = "source-map";
+        config.module.rules.push({
+          test: /\.(scss|css)$/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: { sourceMap: true },
+            },
+            { loader: "sass-loader" },
+          ],
+        });
+      }
+
+      config.plugins = [
+        ...config.plugins,
+        new MiniCssExtractPlugin({
+          filename: "[name].css",
+          chunkFilename: "[id].css",
+        }),
+      ];
+
       return config;
     },
   }

src/@next/pages/PasswordReset/PasswordReset.tsx

@@ -5,11 +5,12 @@ import * as Yup from "yup";
 
 import { StringParam, useQueryParams } from "use-query-params";
 
-import { BASE_URL } from "@temp/core/config";
-
 import { ResetPasswordForm } from "@components/molecules";
+import { useRouter } from "next/router";
+import { baseUrl } from "@temp/app/routes";
+import { NextPage } from "next";
 import * as S from "./styles";
-import { FormikProps, IProps } from "./types";
+import { FormikProps } from "./types";
 
 const PasswordResetSchema = Yup.object().shape({
   password: Yup.string()
@@ -26,11 +27,12 @@ const initialData: FormikProps = {
   retypedPassword: "",
 };
 
-export const PasswordReset: React.FC<IProps> = ({ history }: IProps) => {
+export const PasswordReset: NextPage = () => {
   const [query] = useQueryParams({
     email: StringParam,
     token: StringParam,
   });
+  const { push } = useRouter();
 
   const [tokenError, setTokenError] = React.useState(false);
   const [passwordError, setPasswordError] = React.useState("");
@@ -40,13 +42,10 @@ export const PasswordReset: React.FC<IProps> = ({ history }: IProps) => {
   React.useEffect(() => {
     if (data && data.setPassword && data.setPassword.token) {
       setAuthToken(data.setPassword.token);
-      history.push(BASE_URL);
+      push(baseUrl);
     }
-    if (
-      graphqlErrors &&
-      graphqlErrors.extraInfo &&
-      graphqlErrors.extraInfo.userInputErrors
-    ) {
+
+    if (graphqlErrors?.extraInfo?.userInputErrors) {
       graphqlErrors.extraInfo.userInputErrors.forEach(error => {
         if (error.field === "token") setTokenError(true);
         else setTokenError(false);
@@ -59,7 +58,7 @@ export const PasswordReset: React.FC<IProps> = ({ history }: IProps) => {
   const { email, token } = query;
 
   if (!email || !token) {
-    history.push(BASE_URL);
+    push(baseUrl);
   }
 
   const onSubmit = (values: FormikProps) => {

src/@next/pages/PasswordReset/types.ts

@@ -1,9 +1,3 @@
-import { History } from "history";
-
-export interface IProps {
-  history: History;
-}
-
 export interface FormikProps {
   password: string;
   retypedPassword: string;

src/app/routes/AppRoutes.tsx

@@ -17,19 +17,19 @@ import * as paths from "./paths";
 
 export const Routes: React.FC = () => (
   <Switch>
-    <Route exact path={paths.baseUrl} component={HomePage} />
+    {/* <Route exact path={paths.baseUrl} component={HomePage} /> */}
     <Route path={paths.searchUrl} component={SearchPage} />
-    <Route path={paths.categoryUrl} component={CategoryPage} />
-    <Route path={paths.collectionUrl} component={CollectionPage} />
+    {/* <Route path={paths.categoryUrl} component={CategoryPage} /> */}
+    {/* <Route path={paths.collectionUrl} component={CollectionPage} /> */}
     {/* <Route path={paths.productUrl} component={ProductPage} /> */}
     {/* <Route path={paths.cartUrl} component={CartPage} /> */}
-    <Route path={paths.checkoutLoginUrl} component={CheckoutLogin} />
+    {/* <Route path={paths.checkoutLoginUrl} component={CheckoutLogin} /> */}
     <Route path={paths.pageUrl} component={ArticlePage} />
     <Route path={accountPaths.baseUrl} component={UserAccount} />
     <Route path={accountPaths.userOrderDetailsUrl} component={OrderDetails} />
     <Route path={paths.guestOrderDetailsUrl} component={OrderDetails} />
     <Route path={paths.accountUrl} component={Account} />
-    <Route path={paths.accountConfirmUrl} component={AccountConfirm} />
+    {/* <Route path={paths.accountConfirmUrl} component={AccountConfirm} /> */}
     <Route path={paths.orderHistoryUrl} component={Account} />
     <Route path={paths.addressBookUrl} component={Account} />
     <Route path={paths.passwordResetUrl} component={PasswordReset} />

src/app/routes/paths.ts

@@ -1,19 +1,20 @@
-const slugUrl = ":slug([a-z-0-9]+)/:id([0-9]+)/";
+const slugUrl = "[slug]/[id]/";
+
 export const baseUrl = "/";
 export const searchUrl = `${baseUrl}search/`;
-export const categoryUrl = `${baseUrl}category/${slugUrl}`;
-export const collectionUrl = `${baseUrl}collection/${slugUrl}`;
 
-export const pageUrl = `${baseUrl}page/:slug/`;
 export const guestOrderDetailsUrl = `/order-history/:token/`;
 export const accountUrl = `${baseUrl}account/`;
-export const accountConfirmUrl = `${baseUrl}account-confirm/`;
 export const orderHistoryUrl = `${baseUrl}order-history/`;
 export const addressBookUrl = `${baseUrl}address-book/`;
-export const passwordResetUrl = `${baseUrl}reset-password/`;
 export const orderFinalizedUrl = `${baseUrl}order-finalized/`;
 
+export const pageUrl = `${baseUrl}page/[slug]/`;
+export const passwordResetUrl = `${baseUrl}reset-password/`;
+export const accountConfirmUrl = `${baseUrl}account-confirm/`;
 export const cartUrl = `${baseUrl}cart/[[...token]]/`;
 export const checkoutLoginUrl = `${baseUrl}login/`;
 export const checkoutUrl = `${baseUrl}checkout/`;
-export const productUrl = `${baseUrl}product/[slug]/[id]/`;
+export const productUrl = `${baseUrl}product/${slugUrl}`;
+export const categoryUrl = `${baseUrl}category/${slugUrl}`;
+export const collectionUrl = `${baseUrl}collection/${slugUrl}`;

src/pages/account-confirm.ts

@@ -0,0 +1,3 @@
+import { AccountConfirm } from "../views/Account";
+
+export default AccountConfirm;

src/pages/page/[slug].ts

@@ -0,0 +1,6 @@
+import { ArticlePage, ArticlePageProps } from "@temp/views/Article";
+
+export default ArticlePage;
+
+ArticlePage.getInitialProps = async ({ query }) =>
+  ({ query } as ArticlePageProps);

src/pages/reset-password.ts

@@ -0,0 +1,3 @@
+import { PasswordReset } from "@pages";
+
+export default PasswordReset;

src/views/Account/AccountConfirm.tsx

@@ -1,22 +1,22 @@
-import * as React from "react";
+import React, { useEffect, useRef } from "react";
 import { useAlert } from "react-alert";
-
+import { NextPage } from "next";
 import { StringParam, useQueryParams } from "use-query-params";
+import { useRouter } from "next/router";
 
-import { RouteComponentProps } from "react-router";
-import { BASE_URL } from "../../core/config";
-
+import { baseUrl } from "@temp/app/routes";
 import { TypedAccountConfirmMutation } from "./queries";
 
 import "./scss/index.scss";
 
-const AccountConfirm: React.FC<RouteComponentProps> = ({ history }) => {
+const AccountConfirm: NextPage = () => {
   const [query] = useQueryParams({
     email: StringParam,
     token: StringParam,
   });
-
+  const { push } = useRouter();
   const alert = useAlert();
+  const accountManagerFnRef = useRef(null);
 
   const displayConfirmationAlert = anyErrors => {
     alert.show(
@@ -31,31 +31,34 @@ const AccountConfirm: React.FC<RouteComponentProps> = ({ history }) => {
     );
   };
 
-  React.useEffect(() => {
-    this.accountManagerFn({
-      variables: { email: query.email, token: query.token },
-    })
-      .then(result => {
-        const possibleErrors = result.data.confirmAccount.errors;
-        displayConfirmationAlert(possibleErrors);
-      })
-      .catch(() => {
-        const errors = [
-          {
-            message: "Something went wrong while activating your account.",
-          },
-        ];
-        displayConfirmationAlert(errors);
+  useEffect(() => {
+    const mutateFn = accountManagerFnRef.current;
+    if (mutateFn) {
+      mutateFn({
+        variables: { email: query.email, token: query.token },
       })
-      .finally(() => {
-        history.push(BASE_URL);
-      });
-  }, []);
+        .then(result => {
+          const possibleErrors = result.data.confirmAccount.errors;
+          displayConfirmationAlert(possibleErrors);
+        })
+        .catch(() => {
+          const errors = [
+            {
+              message: "Something went wrong while activating your account.",
+            },
+          ];
+          displayConfirmationAlert(errors);
+        })
+        .finally(() => {
+          push(baseUrl);
+        });
+    }
+  }, [accountManagerFnRef]);
 
   return (
     <TypedAccountConfirmMutation>
       {accountConfirm => {
-        this.accountManagerFn = accountConfirm;
+        accountManagerFnRef.current = accountConfirm;
         return <div />;
       }}
     </TypedAccountConfirmMutation>

src/views/Article/Page.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import * as React from "react";
-import { Link } from "react-router-dom";
+import Link from "next/link";
 
 import { RichTextContent } from "@components/atoms";
 import { Breadcrumb, Breadcrumbs } from "../../components";
@@ -49,7 +49,7 @@ export const Page: React.FC<PageProps> = ({
                 })}
                 key={menuElement.url}
               >
-                <Link to={menuElement.url}>{menuElement.label}</Link>
+                <Link href={menuElement.url}>{menuElement.label}</Link>
               </li>
             ))}
           </ul>