From 6aea32fc04d474c92e4a73e94adee703295bccdb Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Tue, 18 Feb 2020 16:30:00 +0100 Subject: [PATCH 1/3] Change main app directories structure --- src/app/App.tsx | 2 +- src/app/routes/AppRoutes.tsx | 65 +++++++++++++++++++ src/app/routes/index.ts | 2 + src/app/routes/paths.ts | 17 +++++ src/checkout/{index.tsx => CheckoutApp.tsx} | 0 src/checkout/index.ts | 1 + src/checkout/views/OrderConfirmation/View.tsx | 2 +- src/checkout/views/Review/View.tsx | 2 +- src/components/Breadcrumbs/index.tsx | 2 +- src/components/EmptyCart.tsx | 2 +- src/components/MainMenu/MainMenu.tsx | 10 +-- src/components/MobileNav/NavList.tsx | 2 +- src/components/OverlayManager/Cart/Cart.tsx | 4 +- .../OverlayManager/Login/RegisterForm.tsx | 6 +- .../OverlayManager/Search/Search.tsx | 2 +- src/components/PasswordResetForm/index.tsx | 2 +- src/core/SEO/Homepage/structuredData.tsx | 2 +- src/index.tsx | 2 +- src/routes/Routes.tsx | 64 ------------------ src/routes/index.ts | 2 - src/userAccount/views/OrderDetails/Page.tsx | 2 +- src/views/Account/Account.tsx | 4 +- src/views/Cart/Page.tsx | 2 +- src/views/OrderConfirmation/View.tsx | 2 +- 24 files changed, 110 insertions(+), 91 deletions(-) create mode 100644 src/app/routes/AppRoutes.tsx create mode 100644 src/app/routes/index.ts create mode 100644 src/app/routes/paths.ts rename src/checkout/{index.tsx => CheckoutApp.tsx} (100%) create mode 100644 src/checkout/index.ts delete mode 100644 src/routes/Routes.tsx delete mode 100644 src/routes/index.ts diff --git a/src/app/App.tsx b/src/app/App.tsx index 27cc726dee..97e0a43ca6 100644 --- a/src/app/App.tsx +++ b/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 = ({ history: { diff --git a/src/app/routes/AppRoutes.tsx b/src/app/routes/AppRoutes.tsx new file mode 100644 index 0000000000..a6ac29563d --- /dev/null +++ b/src/app/routes/AppRoutes.tsx @@ -0,0 +1,65 @@ +import * as React from "react"; +import { Route, Switch } from "react-router-dom"; + +import { CheckoutLogin, NotFound } from "../../components"; +import UserAccount, { + baseUrl as userAccountBaseUrl, + userOrderDetailsUrl, +} 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 { + accountConfirmUrl, + accountUrl, + addressBookUrl, + baseUrl, + cartUrl, + categoryUrl, + checkoutLoginUrl, + collectionUrl, + guestOrderDetailsUrl, + orderConfirmationUrl, + orderHistoryUrl, + pageUrl, + passwordResetUrl, + paymentOptionsUrl, + productUrl, + searchUrl, +} from "./paths"; + +export const Routes: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + +); + +export default Routes; diff --git a/src/app/routes/index.ts b/src/app/routes/index.ts new file mode 100644 index 0000000000..8af3300c78 --- /dev/null +++ b/src/app/routes/index.ts @@ -0,0 +1,2 @@ +export * from "./paths"; +export * from "./AppRoutes"; diff --git a/src/app/routes/paths.ts b/src/app/routes/paths.ts new file mode 100644 index 0000000000..27795a98d4 --- /dev/null +++ b/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/`; diff --git a/src/checkout/index.tsx b/src/checkout/CheckoutApp.tsx similarity index 100% rename from src/checkout/index.tsx rename to src/checkout/CheckoutApp.tsx diff --git a/src/checkout/index.ts b/src/checkout/index.ts new file mode 100644 index 0000000000..b923200a16 --- /dev/null +++ b/src/checkout/index.ts @@ -0,0 +1 @@ +export { default as CheckoutApp } from "./CheckoutApp"; diff --git a/src/checkout/views/OrderConfirmation/View.tsx b/src/checkout/views/OrderConfirmation/View.tsx index d2f1d51658..9a3a26e84b 100644 --- a/src/checkout/views/OrderConfirmation/View.tsx +++ b/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 = ({ diff --git a/src/checkout/views/Review/View.tsx b/src/checkout/views/Review/View.tsx index 52f248a45f..9e7f17b7dc 100644 --- a/src/checkout/views/Review/View.tsx +++ b/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"; diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx index 93de79b0f2..872b2b067a 100644 --- a/src/components/Breadcrumbs/index.tsx +++ b/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 { diff --git a/src/components/EmptyCart.tsx b/src/components/EmptyCart.tsx index 8badba62ec..4da5fe9983 100644 --- a/src/components/EmptyCart.tsx +++ b/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<{}> = () => ( diff --git a/src/components/MainMenu/MainMenu.tsx b/src/components/MainMenu/MainMenu.tsx index 38adf2ab2f..5fd4fb3d35 100644 --- a/src/components/MainMenu/MainMenu.tsx +++ b/src/components/MainMenu/MainMenu.tsx @@ -1,6 +1,6 @@ import { mediumScreen, - smallScreen + smallScreen, } from "../../globalStyles/scss/variables.scss"; import "./scss/index.scss"; @@ -18,16 +18,16 @@ import { Online, OverlayContext, OverlayTheme, - OverlayType + OverlayType, } from ".."; -import { maybe } from "../../core/utils"; import { accountUrl, addressBookUrl, baseUrl, orderHistoryUrl, - paymentOptionsUrl -} from "../../routes"; + paymentOptionsUrl, +} from "../../app/routes"; +import { maybe } from "../../core/utils"; import { CartContext } from "../CartProvider/context"; import NavDropdown from "./NavDropdown"; import { TypedMainMenuQuery } from "./queries"; diff --git a/src/components/MobileNav/NavList.tsx b/src/components/MobileNav/NavList.tsx index a23f3c9265..6169e7d0ee 100644 --- a/src/components/MobileNav/NavList.tsx +++ b/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"; diff --git a/src/components/OverlayManager/Cart/Cart.tsx b/src/components/OverlayManager/Cart/Cart.tsx index c544f69867..2a63204046 100644 --- a/src/components/OverlayManager/Cart/Cart.tsx +++ b/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"; diff --git a/src/components/OverlayManager/Login/RegisterForm.tsx b/src/components/OverlayManager/Login/RegisterForm.tsx index f4476cb2cd..72ed7f3f09 100644 --- a/src/components/OverlayManager/Login/RegisterForm.tsx +++ b/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 } ); diff --git a/src/components/OverlayManager/Search/Search.tsx b/src/components/OverlayManager/Search/Search.tsx index 50dd366aaf..242b5f02e6 100644 --- a/src/components/OverlayManager/Search/Search.tsx +++ b/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"; diff --git a/src/components/PasswordResetForm/index.tsx b/src/components/PasswordResetForm/index.tsx index 3c74fbac36..e600eb3a3a 100644 --- a/src/components/PasswordResetForm/index.tsx +++ b/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 = () => (
diff --git a/src/core/SEO/Homepage/structuredData.tsx b/src/core/SEO/Homepage/structuredData.tsx index 4abdab1a5a..a7b7a59fe2 100644 --- a/src/core/SEO/Homepage/structuredData.tsx +++ b/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({ diff --git a/src/index.tsx b/src/index.tsx index b0952d48b9..ea403ce951 100644 --- a/src/index.tsx +++ b/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"; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx deleted file mode 100644 index 3c099008f3..0000000000 --- a/src/routes/Routes.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from "react"; -import { Route, Switch } from "react-router-dom"; - -import { CheckoutLogin, NotFound } from "../components"; -import UserAccount, { - baseUrl as userAccountBaseUrl, - userOrderDetailsUrl, -} 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"; - -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/`; - -export const Routes: React.FC = () => ( - - - - - - - - - - - - - - - - - - - - - -); - -export default Routes; diff --git a/src/routes/index.ts b/src/routes/index.ts deleted file mode 100644 index 59810db762..0000000000 --- a/src/routes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Routes"; -export { default as Routes } from "./Routes"; diff --git a/src/userAccount/views/OrderDetails/Page.tsx b/src/userAccount/views/OrderDetails/Page.tsx index 8f51f27bfe..3d2f868376 100644 --- a/src/userAccount/views/OrderDetails/Page.tsx +++ b/src/userAccount/views/OrderDetails/Page.tsx @@ -11,7 +11,7 @@ import { OrderByToken_orderByToken_lines, } from "./types/OrderByToken"; -import { orderHistoryUrl } from "../../../routes"; +import { orderHistoryUrl } from "../../../app/routes"; const extractOrderLines = ( lines: Array diff --git a/src/views/Account/Account.tsx b/src/views/Account/Account.tsx index f862fd3732..5087bee906 100644 --- a/src/views/Account/Account.tsx +++ b/src/views/Account/Account.tsx @@ -13,8 +13,8 @@ import { addressBookUrl, baseUrl, orderHistoryUrl, - paymentOptionsUrl -} from "../../routes"; + paymentOptionsUrl, +} from "../../app/routes"; import { AccountMenu, AccountMenuMobile } from "@components/molecules"; import { AccountTab, OrdersHistory } from "@components/views"; diff --git a/src/views/Cart/Page.tsx b/src/views/Cart/Page.tsx index 2f61e8c646..eb7a69086c 100644 --- a/src/views/Cart/Page.tsx +++ b/src/views/Cart/Page.tsx @@ -7,6 +7,7 @@ import { Link } from "react-router-dom"; import { TaxedMoney } from "@components/containers"; import { useUserDetails } from "@sdk/react"; +import { checkoutLoginUrl } from "../../app/routes"; import { CheckoutContextInterface } from "../../checkout/context"; import { baseUrl as checkoutUrl } from "../../checkout/routes"; import { Button, CartTable, EmptyCart, Loader } from "../../components"; @@ -19,7 +20,6 @@ import { import { OverlayContextInterface } from "../../components/Overlay/context"; import { getShop_shop } from "../../components/ShopProvider/types/getShop"; import { maybe } from "../../core/utils"; -import { checkoutLoginUrl } from "../../routes"; import { TypedProductVariantsQuery } from "../Product/queries"; interface PageProps { diff --git a/src/views/OrderConfirmation/View.tsx b/src/views/OrderConfirmation/View.tsx index 55ad3334de..1544f0c8f6 100644 --- a/src/views/OrderConfirmation/View.tsx +++ b/src/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"; const View: React.FC = ({ history: { From 13b1155ecd9d35ee5bb2eb5f0a8a3cccf92ad5d5 Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Wed, 26 Feb 2020 13:16:12 +0100 Subject: [PATCH 2/3] Change imports of paths to routing components --- src/app/routes/AppRoutes.tsx | 60 +++++++------------ .../routes/CheckoutRouteDispatcher.tsx | 22 ++++--- src/checkout/routes/CheckoutRoutes.tsx | 21 +++---- 3 files changed, 37 insertions(+), 66 deletions(-) diff --git a/src/app/routes/AppRoutes.tsx b/src/app/routes/AppRoutes.tsx index a6ac29563d..31bedad71f 100644 --- a/src/app/routes/AppRoutes.tsx +++ b/src/app/routes/AppRoutes.tsx @@ -2,10 +2,7 @@ import * as React from "react"; import { Route, Switch } from "react-router-dom"; import { CheckoutLogin, NotFound } from "../../components"; -import UserAccount, { - baseUrl as userAccountBaseUrl, - userOrderDetailsUrl, -} from "../../userAccount/routes"; +import UserAccount, * as accountPaths from "../../userAccount/routes"; import { OrderDetails } from "../../userAccount/views"; import { Account, AccountConfirm } from "../../views/Account"; import { ArticlePage } from "../../views/Article"; @@ -19,45 +16,28 @@ import { SearchPage } from "../../views/Search"; import { PasswordReset } from "../../@next/components/views"; -import { - accountConfirmUrl, - accountUrl, - addressBookUrl, - baseUrl, - cartUrl, - categoryUrl, - checkoutLoginUrl, - collectionUrl, - guestOrderDetailsUrl, - orderConfirmationUrl, - orderHistoryUrl, - pageUrl, - passwordResetUrl, - paymentOptionsUrl, - productUrl, - searchUrl, -} from "./paths"; +import * as paths from "./paths"; export const Routes: React.FC = () => ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + ); diff --git a/src/checkout/routes/CheckoutRouteDispatcher.tsx b/src/checkout/routes/CheckoutRouteDispatcher.tsx index c392d26016..48e9877d94 100644 --- a/src/checkout/routes/CheckoutRouteDispatcher.tsx +++ b/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; + return ; case CheckoutStep.ShippingAddress: - return ; + return ( + + ); case CheckoutStep.Review: - return ; + return ; case CheckoutStep.Payment: - return ; + return ; case CheckoutStep.ShippingOption: - return ; + return ( + + ); } }; diff --git a/src/checkout/routes/CheckoutRoutes.tsx b/src/checkout/routes/CheckoutRoutes.tsx index c9f0218534..5149405e1a 100644 --- a/src/checkout/routes/CheckoutRoutes.tsx +++ b/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 = () => ( - - - - - - + + + + + + ); From 5bcb09ef280e80568265c7071d4e1c732b0c1167 Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Wed, 26 Feb 2020 14:28:43 +0100 Subject: [PATCH 3/3] Fix lack of log out notification --- src/@sdk/auth.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/@sdk/auth.ts b/src/@sdk/auth.ts index aae7be8c7a..3c5a9b265a 100644 --- a/src/@sdk/auth.ts +++ b/src/@sdk/auth.ts @@ -24,6 +24,7 @@ export function removeAuthToken() { export function clearStorage(): void { localStorage.clear(); + dispatchEvent(authEvent); } interface ResponseError extends ErrorResponse {