Merge pull request #615 from mirumee/refactor/change-app-directory-st…

…ructure

Change main app directories structure

src/@sdk/auth.ts

@@ -24,6 +24,7 @@ export function removeAuthToken() {
 
 export function clearStorage(): void {
   localStorage.clear();
+  dispatchEvent(authEvent);
 }
 
 interface ResponseError extends ErrorResponse {

src/app/App.tsx

@@ -5,7 +5,7 @@ import { RouteComponentProps } from "react-router";
 
 import { Footer, MainMenu, MetaConsumer, OverlayManager } from "../components";
 import { isPath } from "../core/utils";
-import { orderConfirmationUrl, Routes } from "../routes";
+import { orderConfirmationUrl, Routes } from "./routes";
 
 const App: React.FC<RouteComponentProps> = ({
   history: {

src/app/routes/AppRoutes.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Route, Switch } from "react-router-dom";
+
+import { CheckoutLogin, NotFound } from "../../components";
+import UserAccount, * as accountPaths from "../../userAccount/routes";
+import { OrderDetails } from "../../userAccount/views";
+import { Account, AccountConfirm } from "../../views/Account";
+import { ArticlePage } from "../../views/Article";
+import { CartPage } from "../../views/Cart";
+import { CategoryPage } from "../../views/Category";
+import { CollectionPage } from "../../views/Collection";
+import { HomePage } from "../../views/Home";
+import OrderConfirmation from "../../views/OrderConfirmation/View";
+import { ProductPage } from "../../views/Product";
+import { SearchPage } from "../../views/Search";
+
+import { PasswordReset } from "../../@next/components/views";
+
+import * as paths from "./paths";
+
+export const Routes: React.FC = () => (
+  <Switch>
+    <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.productUrl} component={ProductPage} />
+    <Route path={paths.cartUrl} component={CartPage} />
+    <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.orderConfirmationUrl} component={OrderConfirmation} />
+    <Route path={paths.accountUrl} component={Account} />
+    <Route path={paths.accountConfirmUrl} component={AccountConfirm} />
+    <Route path={paths.orderHistoryUrl} component={Account} />
+    <Route path={paths.addressBookUrl} component={Account} />
+    <Route path={paths.paymentOptionsUrl} component={Account} />
+    <Route path={paths.passwordResetUrl} component={PasswordReset} />
+    <Route component={NotFound} />
+  </Switch>
+);
+
+export default Routes;

src/app/routes/index.ts

@@ -0,0 +1,2 @@
+export * from "./paths";
+export * from "./AppRoutes";

src/app/routes/paths.ts

@@ -0,0 +1,17 @@
+const slugUrl = ":slug([a-z-0-9]+)/:id([0-9]+)/";
+export const baseUrl = "/";
+export const searchUrl = `${baseUrl}search/`;
+export const categoryUrl = `${baseUrl}category/${slugUrl}`;
+export const collectionUrl = `${baseUrl}collection/${slugUrl}`;
+export const productUrl = `${baseUrl}product/${slugUrl}`;
+export const cartUrl = `${baseUrl}cart/:token?/`;
+export const checkoutLoginUrl = `${baseUrl}login/`;
+export const pageUrl = `${baseUrl}page/:slug/`;
+export const guestOrderDetailsUrl = `/order-history/:token/`;
+export const orderConfirmationUrl = `${baseUrl}order-confirmation/`;
+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 paymentOptionsUrl = `${baseUrl}payment-options/`;
+export const passwordResetUrl = `${baseUrl}reset-password/`;

src/checkout/index.ts

@@ -0,0 +1 @@
+export { default as CheckoutApp } from "./CheckoutApp";

src/checkout/routes/CheckoutRouteDispatcher.tsx

@@ -3,13 +3,7 @@ import { generatePath, Redirect, RouteComponentProps } from "react-router";
 
 import { useVariantsProducts } from "@sdk/react";
 
-import {
-  billingUrl,
-  paymentUrl,
-  reviewUrl,
-  shippingAddressUrl,
-  shippingOptionsUrl,
-} from ".";
+import * as paths from ".";
 import { Loader } from "../../components";
 import { CartContext } from "../../components/CartProvider/context";
 import { CheckoutContext } from "../context";
@@ -50,14 +44,18 @@ export const CheckoutRouteDispatcher: React.FC<RouteComponentProps<{
 
   switch (step) {
     case CheckoutStep.BillingAddress:
-      return <Redirect to={generatePath(billingUrl, { token })} />;
+      return <Redirect to={generatePath(paths.billingUrl, { token })} />;
     case CheckoutStep.ShippingAddress:
-      return <Redirect to={generatePath(shippingAddressUrl, { token })} />;
+      return (
+        <Redirect to={generatePath(paths.shippingAddressUrl, { token })} />
+      );
     case CheckoutStep.Review:
-      return <Redirect to={generatePath(reviewUrl, { token })} />;
+      return <Redirect to={generatePath(paths.reviewUrl, { token })} />;
     case CheckoutStep.Payment:
-      return <Redirect to={generatePath(paymentUrl, { token })} />;
+      return <Redirect to={generatePath(paths.paymentUrl, { token })} />;
     case CheckoutStep.ShippingOption:
-      return <Redirect to={generatePath(shippingOptionsUrl, { token })} />;
+      return (
+        <Redirect to={generatePath(paths.shippingOptionsUrl, { token })} />
+      );
   }
 };

src/checkout/routes/CheckoutRoutes.tsx

@@ -5,23 +5,16 @@ import { NotFound } from "../../components";
 import { Billing, Payment, Review, Shipping, ShippingOptions } from "../views";
 import { CheckoutRouteDispatcher } from "./CheckoutRouteDispatcher";
 
-import {
-  baseUrl,
-  billingUrl,
-  paymentUrl,
-  reviewUrl,
-  shippingAddressUrl,
-  shippingOptionsUrl,
-} from ".";
+import * as paths from ".";
 
 export const CheckoutRoutes: React.FC = () => (
   <Switch>
-    <Route exact path={baseUrl} component={CheckoutRouteDispatcher} />
-    <Route path={shippingAddressUrl} component={Shipping} />
-    <Route path={shippingOptionsUrl} component={ShippingOptions} />
-    <Route path={billingUrl} component={Billing} />
-    <Route path={paymentUrl} component={Payment} />
-    <Route path={reviewUrl} component={Review} />
+    <Route exact path={paths.baseUrl} component={CheckoutRouteDispatcher} />
+    <Route path={paths.shippingAddressUrl} component={Shipping} />
+    <Route path={paths.shippingOptionsUrl} component={ShippingOptions} />
+    <Route path={paths.billingUrl} component={Billing} />
+    <Route path={paths.paymentUrl} component={Payment} />
+    <Route path={paths.reviewUrl} component={Review} />
     <Route component={NotFound} />
   </Switch>
 );

src/checkout/views/OrderConfirmation/View.tsx

@@ -3,9 +3,9 @@ import "./scss/index.scss";
 import React from "react";
 import { generatePath, Link, RouteComponentProps } from "react-router-dom";
 
+import { guestOrderDetailsUrl } from "../../../app/routes";
 import { Button, NotFound } from "../../../components";
 import { BASE_URL } from "../../../core/config";
-import { guestOrderDetailsUrl } from "../../../routes";
 import { userOrderDetailsUrl } from "../../../userAccount/routes";
 
 const View: React.FC<RouteComponentProps> = ({

src/checkout/views/Review/View.tsx

@@ -8,10 +8,10 @@ import { Link } from "react-router-dom";
 
 import { Money, TaxedMoney } from "@components/containers";
 
+import { orderConfirmationUrl } from "../../../app/routes";
 import { Button, CartTable } from "../../../components";
 import { CartContext } from "../../../components/CartProvider/context";
 import { extractCheckoutLines } from "../../../components/CartProvider/utils";
-import { orderConfirmationUrl } from "../../../routes";
 import { CheckoutContext } from "../../context";
 import { paymentUrl } from "../../routes";
 import { TypedCompleteCheckoutMutation } from "./queries";

src/components/Breadcrumbs/index.tsx

@@ -6,8 +6,8 @@ import * as React from "react";
 import Media from "react-media";
 import { Link } from "react-router-dom";
 
+import { baseUrl } from "../../app/routes";
 import { getDBIdFromGraphqlId, slugify } from "../../core/utils";
-import { baseUrl } from "../../routes";
 import { Category_category } from "../../views/Category/types/Category";
 
 export interface Breadcrumb {

src/components/EmptyCart.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 
-import { baseUrl } from "../routes";
+import { baseUrl } from "../app/routes";
 import Button from "./Button";
 
 const EmptyCart: React.FC<{}> = () => (

src/components/MainMenu/MainMenu.tsx

@@ -20,15 +20,9 @@ import {
   OverlayTheme,
   OverlayType,
 } from "..";
+import * as appPaths from "../../app/routes";
 import { CheckoutContext } from "../../checkout/context";
 import { maybe } from "../../core/utils";
-import {
-  accountUrl,
-  addressBookUrl,
-  baseUrl,
-  orderHistoryUrl,
-  paymentOptionsUrl,
-} from "../../routes";
 import { CartContext } from "../CartProvider/context";
 import NavDropdown from "./NavDropdown";
 import { TypedMainMenuQuery } from "./queries";
@@ -108,7 +102,7 @@ const MainMenu: React.FC = () => {
           </div>
 
           <div className="main-menu__center">
-            <Link to={baseUrl}>
+            <Link to={appPaths.baseUrl}>
               <ReactSVG path={logoImg} />
             </Link>
           </div>
@@ -130,22 +124,22 @@ const MainMenu: React.FC = () => {
                           content={
                             <ul className="main-menu__dropdown">
                               <li data-testid="my_account__link">
-                                <Link to={accountUrl}>
+                                <Link to={appPaths.accountUrl}>
                                   <Trans id="My Account" />
                                 </Link>
                               </li>
                               <li data-testid="order_history__link">
-                                <Link to={orderHistoryUrl}>
+                                <Link to={appPaths.orderHistoryUrl}>
                                   <Trans id="Order history" />
                                 </Link>
                               </li>
                               <li data-testid="address_book__link">
-                                <Link to={addressBookUrl}>
+                                <Link to={appPaths.addressBookUrl}>
                                   <Trans id="Address book" />
                                 </Link>
                               </li>
                               <li data-testid="payment_options__link">
-                                <Link to={paymentOptionsUrl}>
+                                <Link to={appPaths.paymentOptionsUrl}>
                                   Payment options
                                 </Link>
                               </li>

src/components/MobileNav/NavList.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
 
-import { baseUrl } from "../../routes";
+import { baseUrl } from "../../app/routes";
 import NavItem, { INavItem } from "./NavItem";
 
 import backImg from "../../images/arrow-back.svg";

src/components/OverlayManager/Cart/Cart.tsx

@@ -12,11 +12,11 @@ import {
   OfflinePlaceholder,
   Online,
   Overlay,
-  OverlayContextInterface
+  OverlayContextInterface,
 } from "../..";
+import { cartUrl, checkoutLoginUrl } from "../../../app/routes";
 import { baseUrl as checkoutUrl } from "../../../checkout/routes";
 import { maybe } from "../../../core/utils";
-import { cartUrl, checkoutLoginUrl } from "../../../routes";
 import { TypedProductVariantsQuery } from "../../../views/Product/queries";
 import { CartContext } from "../../CartProvider/context";
 import { extractCartLines, getTotal } from "../../CartProvider/utils";

src/components/OverlayManager/Login/RegisterForm.tsx

@@ -2,7 +2,7 @@ import "./scss/index.scss";
 
 import * as React from "react";
 
-import { accountConfirmUrl } from "../../../routes/Routes";
+import { accountConfirmUrl } from "../../../app/routes";
 
 import { Button, Form, TextField } from "../..";
 import { maybe } from "../../../core/utils";
@@ -23,8 +23,8 @@ const showSuccessNotification = (
     alert.show(
       {
         title: data.accountRegister.requiresConfirmation
-        ? "Please check your e-mail for further instructions"
-        : "New user has been created",
+          ? "Please check your e-mail for further instructions"
+          : "New user has been created",
       },
       { type: "success", timeout: 5000 }
     );

src/components/OverlayManager/Search/Search.tsx

@@ -14,8 +14,8 @@ import {
   OverlayContextInterface,
   OverlayType,
 } from "../..";
+import { searchUrl } from "../../../app/routes";
 import { maybe } from "../../../core/utils";
-import { searchUrl } from "../../../routes";
 import { DebouncedTextField } from "../../Debounce";
 import { Error } from "../../Error";
 import NetworkStatus from "../../NetworkStatus";

src/components/PasswordResetForm/index.tsx

@@ -6,7 +6,7 @@ import { Button, Form, TextField } from "..";
 import { maybe } from "../../core/utils";
 import { TypedPasswordResetMutation } from "./queries";
 
-import { passwordResetUrl } from "../../routes/";
+import { passwordResetUrl } from "../../app/routes";
 
 const PasswordResetForm: React.FC = () => (
   <div className="password-reset-form">

src/core/SEO/Homepage/structuredData.tsx

@@ -1,6 +1,6 @@
 import urljoin from "url-join";
 
-import { searchUrl } from "../../../routes";
+import { searchUrl } from "../../../app/routes";
 
 export const structuredData = shop => {
   return JSON.stringify({

src/index.tsx

@@ -29,7 +29,7 @@ import { Route, Router, Switch } from "react-router-dom";
 import { QueryParamProvider } from "use-query-params";
 
 import { App } from "./app";
-import CheckoutApp from "./checkout";
+import { CheckoutApp } from "./checkout";
 import { CheckoutProvider } from "./checkout/CheckoutProvider";
 import { CheckoutContext } from "./checkout/context";
 import { baseUrl as checkoutBaseUrl } from "./checkout/routes";