diff --git a/TokanPages.ClientApp/src/Api/Request/Paths/index.ts b/TokanPages.ClientApp/src/Api/Request/Paths/index.ts
index a9374f402..8a56cc0d8 100644
--- a/TokanPages.ClientApp/src/Api/Request/Paths/index.ts
+++ b/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`;
diff --git a/TokanPages.ClientApp/src/Api/Request/index.ts b/TokanPages.ClientApp/src/Api/Request/index.ts
index e5067fc16..1c36639fd 100644
--- a/TokanPages.ClientApp/src/Api/Request/index.ts
+++ b/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,
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx b/TokanPages.ClientApp/src/Pages/DocumentsPage/AboutPage/index.tsx
new file mode 100644
index 000000000..2138bb131
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+ >
+ );
+};
diff --git a/TokanPages.ClientApp/src/Pages/DocumentsPage/index.ts b/TokanPages.ClientApp/src/Pages/DocumentsPage/index.ts
index f74ad3dc9..f69a46c8d 100644
--- a/TokanPages.ClientApp/src/Pages/DocumentsPage/index.ts
+++ b/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";
diff --git a/TokanPages.ClientApp/src/Pages/index.ts b/TokanPages.ClientApp/src/Pages/index.ts
index 96f320e1c..767d68ea7 100644
--- a/TokanPages.ClientApp/src/Pages/index.ts
+++ b/TokanPages.ClientApp/src/Pages/index.ts
@@ -18,6 +18,7 @@ export {
GuitarPage,
PhotographyPage,
ShowcasePage,
+ AboutPage,
StoryPage,
PolicyPage,
TermsPage,
diff --git a/TokanPages.ClientApp/src/Store/Actions/Content/contentDocument.ts b/TokanPages.ClientApp/src/Store/Actions/Content/contentDocument.ts
index e0c28cd73..e93113dd3 100644
--- a/TokanPages.ClientApp/src/Store/Actions/Content/contentDocument.ts
+++ b/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,6 +101,7 @@ 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;
@@ -99,7 +109,7 @@ 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 => (dispatch, getState) => {
@@ -138,6 +148,24 @@ export const ContentDocumentAction = {
url: GET_TERMS_CONTENT,
});
},
+ getAbout: (): ApplicationAction => (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 => (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 => (dispatch, getState) => {
const content = getState().contentDocument.contentBicycle?.content;
const languageId = getState().applicationLanguage.id;
diff --git a/TokanPages.ClientApp/src/Store/Defaults/Content/contentDocument.ts b/TokanPages.ClientApp/src/Store/Defaults/Content/contentDocument.ts
index 34009de56..6d6b5dbe6 100644
--- a/TokanPages.ClientApp/src/Store/Defaults/Content/contentDocument.ts
+++ b/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,
diff --git a/TokanPages.ClientApp/src/Store/Reducers/Content/contentDocument.ts b/TokanPages.ClientApp/src/Store/Reducers/Content/contentDocument.ts
index 9b818ce4c..789b7b205 100644
--- a/TokanPages.ClientApp/src/Store/Reducers/Content/contentDocument.ts
+++ b/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 = (
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,
diff --git a/TokanPages.ClientApp/src/Store/States/Content/contentDocument.ts b/TokanPages.ClientApp/src/Store/States/Content/contentDocument.ts
index 7993eabb3..21f463c10 100644
--- a/TokanPages.ClientApp/src/Store/States/Content/contentDocument.ts
+++ b/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;
}
diff --git a/TokanPages.ClientApp/src/routes.tsx b/TokanPages.ClientApp/src/routes.tsx
index ec9437819..e00d21f13 100644
--- a/TokanPages.ClientApp/src/routes.tsx
+++ b/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: },
- { componentPath: "/about", componentPage: },
+ { componentPath: "/about", componentPage: },
+ { componentPath: "/story", componentPage: },
{ componentPath: "/articles", componentPage: },
{ componentPath: "/showcase", componentPage: },
{ componentPath: "/bicycle", componentPage: },