feat: add about page

TokanPages.ClientApp/src/Api/Request/Paths/index.ts

@@ -77,6 +77,7 @@ export const GET_UPDATE_NEWSLETTER_CONTENT = `${API_CONTENT_URI}/getContent?name
 export const GET_WRONG_PAGE_PROMPT_CONTENT = `${API_CONTENT_URI}/getContent?name=wrongPagePrompt&type=component`;
 export const GET_ACCOUNT_CONTENT = `${API_CONTENT_URI}/getContent?name=account&type=component`;
 export const GET_ARTICLE_CONTENT = `${API_CONTENT_URI}/getContent?name=article&type=component`;
+export const GET_ABOUT_CONTENT = `${API_CONTENT_URI}/getContent?name=about&type=document`;
 export const GET_STORY_CONTENT = `${API_CONTENT_URI}/getContent?name=story&type=document`;
 export const GET_TERMS_CONTENT = `${API_CONTENT_URI}/getContent?name=terms&type=document`;
 export const GET_POLICY_CONTENT = `${API_CONTENT_URI}/getContent?name=policy&type=document`;

TokanPages.ClientApp/src/Api/Request/index.ts

@@ -59,6 +59,7 @@ export {
     GET_WRONG_PAGE_PROMPT_CONTENT,
     GET_ACCOUNT_CONTENT,
     GET_ARTICLE_CONTENT,
+    GET_ABOUT_CONTENT,
     GET_STORY_CONTENT,
     GET_TERMS_CONTENT,
     GET_POLICY_CONTENT,

TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Container from "@material-ui/core/Container";
+import { ApplicationState } from "../../../Store/Configuration";
+import { Navigation, Footer } from "../../../Components/Layout";
+import { DocumentContent } from "../../../Components/Document";
+
+import {
+    ContentNavigationAction,
+    ContentFooterAction,
+    ContentDocumentAction,
+    ContentTemplatesAction,
+} from "../../../Store/Actions";
+
+export const AboutPage = (): JSX.Element => {
+    const dispatch = useDispatch();
+    const language = useSelector((state: ApplicationState) => state.applicationLanguage);
+    const document = useSelector((state: ApplicationState) => state.contentDocument);
+
+    React.useEffect(() => {
+        dispatch(ContentNavigationAction.get());
+        dispatch(ContentFooterAction.get());
+        dispatch(ContentDocumentAction.getAbout());
+        dispatch(ContentTemplatesAction.get());
+    }, [language?.id]);
+
+    const isLoading = document?.contentAbout?.isLoading ?? false;
+    const items = document?.contentAbout?.content.items ?? [];
+
+    return (
+        <>
+            <Navigation />
+            <Container>
+                <DocumentContent isLoading={isLoading} items={items} />
+            </Container>
+            <Footer />
+        </>
+    );
+};

TokanPages.ClientApp/src/Pages/DocumentsPage/index.ts

@@ -4,5 +4,6 @@ export { FootballPage } from "./FootballPage";
 export { GuitarPage } from "./GuitarPage";
 export { PhotographyPage } from "./PhotographyPage";
 export { ShowcasePage } from "./ShowcasePage";
+export { AboutPage } from "./AboutPage";
 export { StoryPage } from "./StoryPage";
 export { PolicyPage, TermsPage } from "./LegalPage";

TokanPages.ClientApp/src/Pages/index.ts

@@ -18,6 +18,7 @@ export {
     GuitarPage,
     PhotographyPage,
     ShowcasePage,
+    AboutPage,
     StoryPage,
     PolicyPage,
     TermsPage,

TokanPages.ClientApp/src/Store/Actions/Content/contentDocument.ts

@@ -11,12 +11,15 @@ import {
     GET_GUITAR_CONTENT,
     GET_PHOTOGRAPHY_CONTENT,
     GET_FOOTBALL_CONTENT,
+    GET_ABOUT_CONTENT
 } from "../../../Api/Request";
 
 export const REQUEST_POLICY = "REQUEST_POLICY_CONTENT";
 export const RECEIVE_POLICY = "RECEIVE_POLICY_CONTENT";
 export const REQUEST_TERMS = "REQUEST_TERMS_CONTENT";
 export const RECEIVE_TERMS = "RECEIVE_TERMS_CONTENT";
+export const REQUEST_ABOUT = "REQUEST_ABOUT_CONTENT";
+export const RECEIVE_ABOUT = "RECEIVE_ABOUT_CONTENT";
 export const REQUEST_STORY = "REQUEST_STORY_CONTENT";
 export const RECEIVE_STORY = "RECEIVE_STORY_CONTENT";
 export const REQUEST_SHOWCASE = "REQUEST_SHOWCASE_CONTENT";
@@ -47,6 +50,12 @@ interface RequestTerms {
 interface ReceiveTerms extends Payload {
     type: typeof RECEIVE_TERMS;
 }
+interface RequestAbout {
+    type: typeof REQUEST_ABOUT;
+}
+interface ReceiveAbout extends Payload {
+    type: typeof RECEIVE_ABOUT;
+}
 interface RequestStory {
     type: typeof REQUEST_STORY;
 }
@@ -92,14 +101,15 @@ interface ReceivePhotography extends Payload {
 
 type Policy = RequestPolicy | ReceivePolicy;
 type Terms = RequestTerms | ReceiveTerms;
+type About = RequestAbout | ReceiveAbout;
 type Story = RequestStory | ReceiveStory;
 type Showcase = RequestShowcase | ReceiveShowcase;
 type Bicycle = RequestBicycle | ReceiveBicycle;
 type Electronics = RequestElectronics | ReceiveElectronics;
 type Football = RequestFootball | ReceiveFootball;
 type Guitar = RequestGuitar | ReceiveGuitar;
 type Photography = RequestPhotography | ReceivePhotography;
-export type TKnownActions = Policy | Terms | Story | Showcase | Bicycle | Electronics | Football | Guitar | Photography;
+export type TKnownActions = Policy | Terms | About | Story | Showcase | Bicycle | Electronics | Football | Guitar | Photography;
 
 export const ContentDocumentAction = {
     getPolicy: (): ApplicationAction<TKnownActions> => (dispatch, getState) => {
@@ -138,6 +148,24 @@ export const ContentDocumentAction = {
             url: GET_TERMS_CONTENT,
         });
     },
+    getAbout: (): ApplicationAction<TKnownActions> => (dispatch, getState) => {
+        const content = getState().contentDocument.contentAbout?.content;
+        const languageId = getState().applicationLanguage.id;
+        const isContentChanged = content !== ApplicationDefault.contentDocument.contentAbout?.content;
+        const isLanguageChanged = languageId !== content?.language;
+
+        if (isContentChanged && !isLanguageChanged) {
+            return;
+        }
+
+        GetContent({
+            dispatch: dispatch,
+            state: getState,
+            request: REQUEST_ABOUT,
+            receive: RECEIVE_ABOUT,
+            url: GET_ABOUT_CONTENT,
+        });
+    },
     getStory: (): ApplicationAction<TKnownActions> => (dispatch, getState) => {
         const content = getState().contentDocument.contentTerms?.content;
         const languageId = getState().applicationLanguage.id;
@@ -174,7 +202,6 @@ export const ContentDocumentAction = {
             url: GET_SHOWCASE_CONTENT,
         });
     },
-
     getBicycle: (): ApplicationAction<TKnownActions> => (dispatch, getState) => {
         const content = getState().contentDocument.contentBicycle?.content;
         const languageId = getState().applicationLanguage.id;

TokanPages.ClientApp/src/Store/Defaults/Content/contentDocument.ts

@@ -11,6 +11,7 @@ const defaultValues = {
 export const ContentDocument: ContentDocumentState = {
     contentPolicy: defaultValues,
     contentTerms: defaultValues,
+    contentAbout: defaultValues,
     contentStory: defaultValues,
     contentShowcase: defaultValues,
     contentBicycle: defaultValues,

TokanPages.ClientApp/src/Store/Reducers/Content/contentDocument.ts

@@ -7,6 +7,8 @@ import {
     REQUEST_POLICY,
     RECEIVE_TERMS,
     REQUEST_TERMS,
+    RECEIVE_ABOUT,
+    REQUEST_ABOUT,
     REQUEST_STORY,
     RECEIVE_STORY,
     REQUEST_SHOWCASE,
@@ -64,6 +66,22 @@ export const ContentDocument: Reducer<ContentDocumentState> = (
                     content: action.payload.content,
                 },
             };
+        case REQUEST_ABOUT:
+            return {
+                ...state,
+                contentAbout: {
+                    isLoading: true,
+                    content: state.contentAbout?.content ?? fallback,
+                },
+            };
+        case RECEIVE_ABOUT:
+            return {
+                ...state,
+                contentAbout: {
+                    isLoading: false,
+                    content: action.payload.content,
+                },
+            };
         case REQUEST_STORY:
             return {
                 ...state,

TokanPages.ClientApp/src/Store/States/Content/contentDocument.ts

@@ -1,49 +1,18 @@
 import { DocumentContentDto } from "../../../Api/Models";
 
-interface ContentPolicy extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentTerms extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentStory extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentShowcase extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentBicycle extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentElectronics extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentFootball extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentGuitar extends DocumentContentDto {
-    isLoading: boolean;
-}
-
-interface ContentPhotography extends DocumentContentDto {
+interface DocumentContentProps extends DocumentContentDto {
     isLoading: boolean;
 }
 
 export interface ContentDocumentState {
-    contentPolicy?: ContentPolicy;
-    contentTerms?: ContentTerms;
-    contentStory?: ContentStory;
-    contentShowcase?: ContentShowcase;
-    contentBicycle?: ContentBicycle;
-    contentElectronics?: ContentElectronics;
-    contentFootball?: ContentFootball;
-    contentGuitar?: ContentGuitar;
-    contentPhotography?: ContentPhotography;
+    contentPolicy?: DocumentContentProps;
+    contentTerms?: DocumentContentProps;
+    contentAbout?: DocumentContentProps;
+    contentStory?: DocumentContentProps;
+    contentShowcase?: DocumentContentProps;
+    contentBicycle?: DocumentContentProps;
+    contentElectronics?: DocumentContentProps;
+    contentFootball?: DocumentContentProps;
+    contentGuitar?: DocumentContentProps;
+    contentPhotography?: DocumentContentProps;
 }

TokanPages.ClientApp/src/routes.tsx

@@ -3,6 +3,7 @@ import { Route } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
 import {
     MainPage,
+    AboutPage,
     StoryPage,
     ArticlesPage,
     TermsPage,
@@ -32,7 +33,8 @@ interface PageProps {
 
 const pages: PageProps[] = [
     { componentPath: "/", componentPage: <MainPage /> },
-    { componentPath: "/about", componentPage: <StoryPage /> },
+    { componentPath: "/about", componentPage: <AboutPage /> },
+    { componentPath: "/story", componentPage: <StoryPage /> },
     { componentPath: "/articles", componentPage: <ArticlesPage /> },
     { componentPath: "/showcase", componentPage: <ShowcasePage /> },
     { componentPath: "/bicycle", componentPage: <BicyclePage /> },