(feature): clone objects and refactoring

src/ClientApp/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-redux-template",
+  "name": "react-redux",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/ClientApp/src/components/SideWidgets/Categories.tsx

@@ -9,12 +9,17 @@ export interface ICategory {
 }
 
 interface ICategories {
+  totalPages: number,
+  currentPage: number,
   items?: ICategory []
 }
 
-const Categories: FC<ICategories> = ({
-  items = []
-}) => {
+export interface ICategoriesComponent extends ICategories {}
+
+const Categories: FC<ICategoriesComponent> = (props) => {
+
+  const { items = [] } = props
+
   const middleIndex = Math.ceil(items.length / 2)
 
   const firstHalf = items.splice(0, middleIndex)

src/ClientApp/src/functions/cloneObject.ts

@@ -0,0 +1,10 @@
+const cloneObject = <T>(obj : T) => {
+  const json = JSON.stringify(obj)
+  const newObj: T = JSON.parse(json)
+
+  return newObj
+}
+
+export {
+  cloneObject
+}

src/ClientApp/src/functions/index.ts

@@ -1,10 +1,14 @@
 import { dateFormat, timeFormat } from './dateTimeFormat'
 import { findRoutes } from './findRoutes'
 import { getKeyValue } from './getKeyValue'
+import { cloneObject } from './cloneObject'
+import { isSuccessStatusCode } from './isSuccessStatusCode'
 
 export {
   getKeyValue,
   dateFormat,
   timeFormat,
-  findRoutes
+  findRoutes,
+  cloneObject,
+  isSuccessStatusCode
 }

src/ClientApp/src/functions/isSuccessStatusCode.ts

@@ -0,0 +1,7 @@
+const isSuccessStatusCode = (statusCode: number) => {
+  return statusCode >= 200 && statusCode <= 299
+}
+
+export {
+  isSuccessStatusCode
+}

src/ClientApp/src/pages/Blog/Catalog/BlogItemsComponent.tsx

@@ -12,7 +12,7 @@ import { actionCreators as blogCatalogActionCreators } from '../../../store/redu
 import { Card, CardBody, CardImg, Col } from 'reactstrap'
 
 // Components
-import { IPaginationComponent, Pagination } from '../../../components/Pagination'
+import { ISSRPaginationComponent, SSRPagination } from '../../../components/Pagination'
 
 // Functions
 import { dateFormat } from '../../../functions'
@@ -46,7 +46,6 @@ export interface IBlogItem {
 }
 
 export interface IBlogItems {
-  path?: string
   totalPages?: number,
   currentPage?: number,
   items?: IBlogItem []
@@ -56,7 +55,9 @@ export interface IBlogItemsSection {
   readMore: string
 }
 
-export interface IBlogItemsComponent extends IBlogItemsSection, IBlogItems { }
+export interface IBlogItemsComponent extends IBlogItemsSection, IBlogItems {
+  path: string
+}
 
 const BlogItemsComponent: FC<IBlogItemsComponent> = (props) => {
 
@@ -65,6 +66,9 @@ const BlogItemsComponent: FC<IBlogItemsComponent> = (props) => {
   const dispatch = useDispatch()
   const navigate = useNavigate()
 
+
+
+
   return <>
     {items.map((item, index) => <Col key={index} className="lg-6 mb-3">
       <Card>
@@ -82,17 +86,20 @@ const BlogItemsComponent: FC<IBlogItemsComponent> = (props) => {
       </Card>
     </Col>)}
   
-    <Pagination {...{
+    <SSRPagination {...{
       totalPages: totalPages,
       currentPage: currentPage,
-      onClick: (nextPage) => {
-        dispatch(blogCatalogActionCreators.requestBlogCatalog({
-          currentPage: nextPage + ""
-        }))
+      // onClick: (nextPage) => {
+      //   dispatch(blogCatalogActionCreators.requestBlogCatalog({
+      //     searchParams: {
+      //       currentPage: nextPage + ""
+      //     }
+      //   }))
 
-        navigate(`${path}/${nextPage}`)
-      }
-    } as IPaginationComponent} />
+      //   navigate(`${path}/${nextPage}`)
+      // }
+      linksPath: path
+    } as ISSRPaginationComponent} />
   </>
 }
 

src/ClientApp/src/pages/Blog/Catalog/FeaturedBlogComponent.tsx

@@ -22,8 +22,7 @@ export interface IFeaturedBlogItem {
   image: IImage,
   badges: string [],
   title: string,
-  shortText?: string,
-  text?: string,
+  shortText: string,
   author: IAuthor,
   created: string,
   tags: string []
@@ -58,10 +57,11 @@ const FeaturedBlogComponent: FC<IFeaturedBlogComponent> = (props) => {
     <CardBody className="p-4">
       {item.badges.map((badge, index) => <div key={index} className="badge bg-primary bg-gradient rounded-pill mb-2">{badge}</div>)}
       
+      <div className="small text-muted">{dateFormat(item.created)}</div>
       <Link className="text-decoration-none link-dark stretched-link" to={`${path}/${currentPage}/${item.slug}`}>
         <h5 className="card-title mb-3">{item.title}</h5>
       </Link>
-      <p className="card-text mb-0" dangerouslySetInnerHTML={{ __html: item.shortText ? item.shortText : '' }}></p>
+      <p className="card-text mb-0" dangerouslySetInnerHTML={{ __html: item.shortText }}></p>
     </CardBody>
     <CardFooter className="p-4 pt-0 bg-transparent border-top-0">
       <div className="d-flex align-items-end justify-content-between">

src/ClientApp/src/pages/Blog/Catalog/index.tsx

@@ -8,8 +8,8 @@ import { ApplicationState } from '../../../store'
 
 // Reducers
 import { actionCreators as blogCatalogActionCreators } from '../../../store/reducers/BlogCatalog'
-import { actionCreators as blogFeaturedActionCreators } from '../../../store/reducers/BlogFeatured'
 import { actionCreators as blogCategoriesActionCreators  } from '../../../store/reducers/BlogCategories'
+import { actionCreators as blogFeaturedActionCreators } from '../../../store/reducers/BlogFeatured'
 
 // Reactstrap
 import { Col, Container, Row } from 'reactstrap'
@@ -17,11 +17,12 @@ import { Col, Container, Row } from 'reactstrap'
 // Components
 import { TitleSection, ITitleSection } from './TitleComponent'
 import { FeaturedBlogComponent, IFeaturedBlogComponent, IFeaturedBlogSection } from './FeaturedBlogComponent'
-import { BlogItemsComponent, IBlogItemsSection } from './BlogItemsComponent'
+import { BlogItemsComponent, IBlogItemsComponent, IBlogItemsSection } from './BlogItemsComponent'
 import { Categories, Empty, Search } from '../../../components/SideWidgets'
 
 // Interfaces
 import { IHeader } from '../../../interfaces'
+import { cloneObject } from '../../../functions'
 
 export interface IBlogCatalogPage {
   header: IHeader,
@@ -38,23 +39,40 @@ const BlogCatalog : FC<IBlogCatalogComponent> = () => {
   const dispatch = useDispatch()
 
   const { content, blogCatalog, blogCategories, blogFeatured } = useSelector((state: ApplicationState) => state)
-  const {header, titleSection, featuredBlogSection } = content.blogCatalog
 
-  // update categories slugs
-  blogCategories.items = blogCategories.items.map(item => {
-    item.href = `${location.pathname.split('/').slice(0, 2).join('/')}/${item.href}`
-    return item
-  })
+  const { dateFormat, timeFormat } = content.localization
+
+  const { header, titleSection, blogItemsSection, featuredBlogSection } = content.blogCatalog
+
+  useEffect(() => {
+    dispatch(blogFeaturedActionCreators.requestBlogFeatured())
+    dispatch(blogCategoriesActionCreators.requestBlogCategories())
+  }, [])
 
   useEffect(() => {
     dispatch(blogCatalogActionCreators.requestBlogCatalog({
       searchParams: {
-        currentPage: params?.page ? params.page : "1"
+        category: params?.category,
+        currentPage: params?.page
       }
     }))
-    dispatch(blogFeaturedActionCreators.requestBlogFeatured())
-    dispatch(blogCategoriesActionCreators.requestBlogCategories())
-  }, [])
+  }, [params.category, params.page])
+
+  const updateBlogCategories = () => {
+    const newBlogCategoies = cloneObject(blogCategories)
+
+    newBlogCategoies.items = newBlogCategoies.items.map(item => {
+      item.href = `${location.pathname.split('/').slice(0, 2).join('/')}/${item.href}`
+      return item
+    })
+
+    return newBlogCategoies
+  }
+
+  const updateBlogLinks = () => {
+    return location.pathname.split('/').slice(0, 3).join('/')
+  }
+  
 
   const blogItem = blogFeatured?.items[0]
 
@@ -70,12 +88,16 @@ const BlogCatalog : FC<IBlogCatalogComponent> = () => {
             featuredBlogSection
           } as IFeaturedBlogComponent} />
           <Row>
-            <BlogItemsComponent path={location.pathname} {...blogCatalog} readMore={''} />
+            <BlogItemsComponent {...{
+              path: updateBlogLinks(),
+              ...blogCatalog,
+              ...blogItemsSection
+            } as IBlogItemsComponent }/>
           </Row>
         </Col>
         <Col lg="3">
           <Search />
-          <Categories {...blogCategories} />
+          <Categories {...updateBlogCategories()} />
           <Empty/>
         </Col>
       </Row>

src/ClientApp/src/pages/Blog/Item/CommentsComponent.tsx

@@ -21,13 +21,18 @@ export interface IComment {
   responses?: IComment []
 }
 
+export interface IComments {
+  path?: string
+  totalPages?: number,
+  currentPage?: number,
+  items?: IComment []
+}
+
 export interface ICommentsSection {
   leaveComment: string
 }
 
-export interface ICommentsComponent extends ICommentsSection {
-  items?: IComment []
-}
+export interface ICommentsComponent extends ICommentsSection, IComments { }
 
 const CommentsComponent: FC<ICommentsComponent> = (props) => {
   

src/ClientApp/src/pages/Blog/Item/index.tsx

@@ -59,8 +59,8 @@ const BlogItem : FC<IBlogItemComponent> = () => {
   const params = useParams()
   const dispatch = useDispatch()
 
-  const { content, blogItem } = useSelector((state: ApplicationState) => state)
-  const page = content?.blogItem
+  const { content, blogItem, comments } = useSelector((state: ApplicationState) => state)
+  const { titleSection, commentsSection } = content.blogItem
 
   useEffect(() => {
     if(params?.slug)
@@ -73,7 +73,7 @@ const BlogItem : FC<IBlogItemComponent> = () => {
 
   const blogItemTitle: ITitleComponent = {
     title: blogItem?.title,
-    text: page?.titleSection?.text,
+    text: titleSection?.text,
     badges: blogItem?.badges,
     image: blogItem?.image
   }
@@ -94,8 +94,8 @@ const BlogItem : FC<IBlogItemComponent> = () => {
         </article>
 
         <CommentsComponent {...{
-          ...page?.commentsSection,
-          //items: blogItem?.comments
+          ...commentsSection,
+          ...comments
         } as ICommentsComponent} />
       </Col>
 

src/ClientApp/src/pages/Home/FeaturedBlogsSection.tsx

@@ -23,28 +23,38 @@ export interface IFeaturedBlogItem {
   image: IImage,
   badges: string [],
   title: string,
-  shortText?: string,
-  text?: string,
+  shortText: string,
   author: IAuthor,
   created: string,
   tags: string []
 
-  readTime?: number,
+  readTime: number,
   likes?: number
 }
 
 export interface IFeaturedBlogsSection {
   title: string,
-  text?: string
+  text: string,
+  readTime: string
 }
 
-interface IFeaturedBlogsFull extends IFeaturedBlogsSection {
+export interface IFeaturedBlogsFull extends IFeaturedBlogsSection {
   items?: IFeaturedBlogItem []
 }
 
 const FeaturedBlogsSection: FC<IFeaturedBlogsFull> = (props) => {
     
-  const { title, text = "", items = [] } = props
+  const { title, text, items = [] } = props
+
+  const readTimeString = (itemCreated: string, itemReadTime: number) : string => {
+    let { readTime } = props
+
+    if(readTime && itemCreated && itemReadTime)
+      readTime = readTime?.replace('{date}', dateFormat(itemCreated))
+        .replace('{readTime}', `${itemReadTime}`)
+      
+    return readTime
+  }
 
   return <section className="py-5">
     <Container fluid className="px-5 my-5">
@@ -65,7 +75,7 @@ const FeaturedBlogsSection: FC<IFeaturedBlogsFull> = (props) => {
               <Link className="text-decoration-none link-dark stretched-link" to="#!">
                 <h5 className="card-title mb-3">{item.title}</h5>
               </Link>
-              <p className="card-text mb-0" dangerouslySetInnerHTML={{ __html: text ? text : '' }}></p>
+              <p className="card-text mb-0" dangerouslySetInnerHTML={{ __html: item.shortText }}></p>
             </CardBody>
             <CardFooter className="p-4 pt-0 bg-transparent border-top-0">
               <div className="d-flex align-items-end justify-content-between">
@@ -73,7 +83,7 @@ const FeaturedBlogsSection: FC<IFeaturedBlogsFull> = (props) => {
                   <img className="rounded-circle me-3" {...item.author.image} />
                   <div className="small">
                     <div className="fw-bold">{item.author.nickName}</div>
-                    <div className="text-muted">{dateFormat(item.created)} &middot; {item.readTime}</div>
+                    <div className="text-muted" dangerouslySetInnerHTML={{ __html: readTimeString(item.created, item.readTime)}}></div>
                   </div>
                 </div>
               </div>

src/ClientApp/src/pages/Home/index.tsx

@@ -13,7 +13,7 @@ import { IHeader } from '../../interfaces'
 import { TitleSection, ITitleSection } from './TitleSection'
 import { FeaturesSection, IFeaturesSection } from './FeaturesSection'
 import { TestimonialsSection, ITestimonialsSection } from './TestimonialsSection'
-import { FeaturedBlogsSection, IFeaturedBlogsSection } from './FeaturedBlogsSection'
+import { FeaturedBlogsSection, IFeaturedBlogsFull, IFeaturedBlogsSection } from './FeaturedBlogsSection'
 import { CallToActionSection, ICallToActionSection } from './CallToActionSection'
 
 
@@ -47,7 +47,9 @@ const Home : FC<IHomePageComponent> = () => {
       <TitleSection {...titleSection} />
       <FeaturesSection {...featuresSection} />
       <TestimonialsSection {...testimonialsSection} />
-      <FeaturedBlogsSection items={blogFeatured?.items} {...featuredBlogsSection} />
+      <FeaturedBlogsSection  {...{
+        items: blogFeatured?.items,
+        ...featuredBlogsSection} as IFeaturedBlogsFull} />
       <CallToActionSection {...callToActionSection} />
     </>
   }

src/ClientApp/src/pages/Shop/Catalog/ShopItemsSection.tsx

@@ -113,7 +113,7 @@ const ShopItemsSection: FC<IShopItemComponent> = (props) => {
 
       //   navigate(`${path}/${nextPage}`)
       // }
-      linksPath: path.split('/').slice(0, 3).join('/')
+      linksPath: path
     } as ISSRPaginationComponent} />
   </>
 }

src/ClientApp/src/pages/Shop/Catalog/index.tsx

@@ -9,6 +9,7 @@ import { ApplicationState } from '../../../store'
 // Reducers
 import { actionCreators as shopCatalogActionCreators } from '../../../store/reducers/ShopCatalog'
 import { actionCreators as shopCategoriesActionCreators  } from '../../../store/reducers/ShopCategories'
+import { actionCreators as shopFeaturedActionCreators } from '../../../store/reducers/ShopFeatured'
 
 // Reactstrap
 import { Col, Container, Row } from 'reactstrap'
@@ -20,6 +21,7 @@ import { Categories, Empty, Search } from '../../../components/SideWidgets'
 
 // Interfaces
 import { IHeader } from '../../../interfaces'
+import { cloneObject } from '../../../functions'
 
 export interface IShopCatalogPage {
   header: IHeader,
@@ -36,14 +38,14 @@ const ShopCatalog : FC<IShopCatalogComponent> = () => {
 
   const { content, shopCatalog, shopCategories } = useSelector((state: ApplicationState) => state)
 
-  const { currencySymbol } = content.localization
+  const { dateFormat, timeFormat, currencySymbol } = content.localization
   const { header, titleSection, shopItemsSection } = content.shopCatalog
 
-  // update categories slugs
-  shopCategories.items = shopCategories.items.map(item => {
-    item.href = `${location.pathname.split('/').slice(0, 2).join('/')}/${item.href}`
-    return item
-  })
+  useEffect(() => {
+
+    dispatch(shopCategoriesActionCreators.requestShopCategories())
+    dispatch(shopFeaturedActionCreators.requestShopFeatured())
+  }, [])
 
   useEffect(() => {
     dispatch(shopCatalogActionCreators.requestShopCatalog({
@@ -52,8 +54,22 @@ const ShopCatalog : FC<IShopCatalogComponent> = () => {
         currentPage: params?.page
       }
     }))
-    dispatch(shopCategoriesActionCreators.requestShopCategories())
-  }, [])
+  }, [params.category, params.page])
+
+  const updateShopCategories = () => {
+    const newShopCategoies = cloneObject(shopCategories)
+
+    newShopCategoies.items = newShopCategoies.items.map(item => {
+      item.href = `${location.pathname.split('/').slice(0, 2).join('/')}/${item.href}`
+      return item
+    })
+
+    return newShopCategoies
+  }
+
+  const updateShopLinks = () => {
+    return location.pathname.split('/').slice(0, 3).join('/')
+  }
 
   return <>
     <TitleSection {...titleSection} />
@@ -64,7 +80,7 @@ const ShopCatalog : FC<IShopCatalogComponent> = () => {
           <Row>
             <ShopItemsSection {...{
               currencySymbol,
-              path: location.pathname,
+              path: updateShopLinks(),
               ...shopItemsSection,
               ...shopCatalog
             } as IShopItemComponent} />
@@ -72,7 +88,7 @@ const ShopCatalog : FC<IShopCatalogComponent> = () => {
         </Col>
         <Col lg="3">
           <Search />
-          <Categories {...shopCategories} />
+          <Categories {...updateShopCategories()}  />
           <Empty/>
         </Col>
       </Row>

src/ClientApp/src/pages/Shop/Item/CommentsComponent.tsx

@@ -0,0 +1,77 @@
+import React, { FC } from 'react'
+import { Card, CardBody } from 'reactstrap'
+
+
+interface IImage {
+  src: string,
+  alt: string
+}
+
+interface IAuthor {
+  id: string,
+  image?: IImage
+
+  nickName: string
+}
+
+
+export interface IComment {
+  author: IAuthor,
+  comment: string,
+  responses?: IComment []
+}
+
+export interface IComments {
+  path?: string
+  totalPages?: number,
+  currentPage?: number,
+  items?: IComment []
+}
+
+export interface ICommentsSection {
+  leaveComment: string
+}
+
+export interface ICommentsComponent extends ICommentsSection, IComments { }
+
+const CommentsComponent: FC<ICommentsComponent> = (props) => {
+  
+  const { leaveComment, items = [] } = props
+
+  return <section className="mb-5">
+    <Card className="card bg-light">
+      <CardBody className="card-body">
+        <form className="mb-4">           
+          <textarea className="form-control" rows={3} placeholder={leaveComment}></textarea>
+        </form>
+
+        {items.map((comment, index) => <div key={index} className={`d-flex ${index < items.length - 1 ?  'mb-4' : ''}`}>
+          <div className="flex-shrink-0">
+            <img className="rounded-circle"  {...comment.author.image} />
+          </div>
+          <div className="ms-3">
+            <div className="fw-bold">{comment.author.nickName}</div>
+            {comment.comment}
+          
+            {comment.responses? comment.responses.map((response, index) => <div key={index} className="d-flex mt-4">
+              <div className="flex-shrink-0">
+                <img className="rounded-circle" {...response.author.image} />
+              </div>
+              <div className="ms-3">
+                <div className="fw-bold">{response.author.nickName}</div>
+                {response.comment}
+              </div>
+            </div>) : ''}
+          </div>
+        </div>)}
+
+        
+      </CardBody>
+    </Card>
+  </section>
+
+}
+
+export {
+  CommentsComponent
+}

src/ClientApp/src/pages/Shop/Item/RelatedProducts.tsx

@@ -25,7 +25,7 @@ interface IAuthor {
 }
 
 
-interface IRelatedProduct {
+export interface IRelatedProduct {
   id: string,
   slug: string,
   image: IImage,

src/ClientApp/src/pages/Shop/Item/index.tsx

@@ -16,6 +16,7 @@ import { IRelatedProductsComponent, IRelatedProductsSection, RelatedProducts } f
 
 
 import { IHeader } from '../../../interfaces'
+import { CommentsComponent, ICommentsComponent, ICommentsSection } from './CommentsComponent'
 
 interface IImage {
   src: string,
@@ -59,14 +60,11 @@ interface IProductSection {
   addToCart: string
 }
 
-
-
-
-
 export interface IShopItemPage {
   header: IHeader,
   productSection: IProductSection
-  relatedProductsSection: IRelatedProductsSection
+  relatedProductsSection: IRelatedProductsSection,
+  commentsSection: ICommentsSection
 }
 
 export interface IShopItemComponent extends IShopItemPage {}
@@ -75,7 +73,10 @@ const ShopItem : FC<IShopItemComponent> = () => {
   const params = useParams()
   const dispatch = useDispatch()
 
-  const { content, shopItem } = useSelector((state: ApplicationState) => state)
+  const { content, shopItem, comments } = useSelector((state: ApplicationState) => state)
+
+
+  const { commentsSection } = content.shopItem
 
   const {
     currencySymbol = ""
@@ -129,6 +130,12 @@ const ShopItem : FC<IShopItemComponent> = () => {
     <RelatedProducts {...{
 
     } as IRelatedProductsComponent} />
+
+
+    <CommentsComponent {...{
+      ...commentsSection,
+      ...comments
+    } as ICommentsComponent} />
   </>
 }
 

src/ClientApp/src/pages/Signin/index.tsx

@@ -9,6 +9,7 @@ import { ApplicationState } from "../../store"
 
 import './scss/style.scss'
 import { IHeader } from "../../interfaces"
+import { Post } from "../../restClient"
 
 interface IStateProp {
   [key: string]: string;
@@ -28,6 +29,7 @@ interface ILink {
   target: string,
   anchorText: string
 }
+
 export interface ISigninPage {
   header: IHeader,
 
@@ -47,14 +49,7 @@ const Signin : FC<ISigninComponent> = () => {
   const dispatch = useDispatch()
   const { content } = useSelector((state: ApplicationState) => state)
   
-  const {
-    title,
-    email,
-    password,
-    dontHaveAnAccount,
-    signUpLink,
-    submit
-  } = content.signIn
+  const { title, email, password, dontHaveAnAccount, signUpLink, submit } = content.signIn
 
   const [state, hookState] = useState<IState>({
     username: '',
@@ -74,7 +69,15 @@ const Signin : FC<ISigninComponent> = () => {
   }
 
   const postSignIn = () => {
-
+    Post<Promise<any>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_ACCOUNT}`, { account: 'Authenticate' }, {
+      username: state.username,
+      password: state.password
+    }).then(response => response)
+      .then((data) => {
+        if(data) {
+          console.log(data)
+        }
+      })
   }
 
   return <Container className="container">

src/ClientApp/src/restClient.ts

@@ -1,16 +1,44 @@
 import axios from "axios"
 import { IParams } from "./interfaces"
 
-
-
-
-interface FetchData {
+export interface FetchResult<T> {
   status: number,
-  text: any
+  data?: T
 }
 
-const Post = () => {
+const Post = async <T>(apiUrl: string, pathParams?: IParams, data?: any) : Promise<FetchResult<T>> => {
+  const url = new URL(apiUrl)
 
+  if(pathParams) {
+    Object.keys(pathParams).forEach(key => {
+      if (typeof(pathParams[key]) !== undefined) {
+        url.pathname += `/${pathParams[key]}`
+      }
+    })
+  }
+
+  const requestParams = {
+    method: 'POST',
+    headers: { 'accept': 'application/json', 'content-type': 'application/json' },
+    data
+  }
+
+  const fetchData = await axios(url.toString(), requestParams)
+    .then(async fetchData => {
+      return {
+        status: fetchData.status,
+        data: fetchData.data as T
+      }
+    })
+    .catch(err => {
+      console.log(err)
+      
+      return {
+        status: err.status
+      }
+    })
+ 
+  return fetchData
 }
 
 const Get = async <T>(apiUrl: string, pathParams?: IParams, searchParams?: IParams): Promise<T | null> => {

src/ClientApp/src/store/index.ts

@@ -6,6 +6,7 @@ import * as BlogItem from './reducers/BlogItem'
 import * as Counter from './reducers/Counter'
 import * as Header from './reducers/Header'
 
+import * as Comments from './reducers/Comments'
 import * as Content from './reducers/Content'
 
 import * as ShopCatalog from './reducers/ShopCatalog'
@@ -24,6 +25,7 @@ export interface ApplicationState {
   blogFeatured: BlogFeatured.BlogFeaturedState
   blogItem: BlogItem.BlogItemState
 
+  comments: Comments.CommentsState
   content: Content.ContentState
 
   counter: Counter.CounterState
@@ -48,6 +50,7 @@ export const reducers = {
   blogFeatured: BlogFeatured.reducer,
   blogItem: BlogItem.reducer,
 
+  comments: Comments.reducer,
   content: Content.reducer,
 
   counter: Counter.reducer,

src/ClientApp/src/store/reducers/BlogCatalog.ts

@@ -6,20 +6,21 @@ import { IPagination, IParams, IRequest, IResponse } from '../../interfaces'
 import { IBlogItem } from '../../pages/Blog/Catalog/BlogItemsComponent'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
 interface IGetBlogcatalogPathParams extends IParams {}
 
-interface IGeBlogCatalogSearchParams extends IParams {}
-
-interface IGetBlogCatalogRequestModel extends IRequest<IGetBlogcatalogPathParams, IGeBlogCatalogSearchParams> {
+interface IGeBlogCatalogSearchParams extends IParams {
   category?: string,
   searchText?: string,
   currentPage?: string,
   itemsPerPage?: string
 }
 
+interface IGetBlogCatalogRequestModel extends IRequest<IGetBlogcatalogPathParams, IGeBlogCatalogSearchParams> { }
+
 // Response
 interface IGetBlogCatalogResponseModel extends IPagination<IBlogItem>, IResponse { }
 
@@ -38,28 +39,7 @@ interface ReceiveAction extends IGetBlogCatalogResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestBlogCatalog: (props?: IGetBlogCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-    
-    const locale = process.env.REACT_APP_LOCALE
-
-    const searchParams = {...props?.searchParams, locale}
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<IGetBlogCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...data })
-      })
-
-    dispatch({ type: 'REQUEST_BLOG_CATALOG' })
-  }
-}
-
-const unloadedState: BlogCatalogState = {
+const mockData: IGetBlogCatalogResponseModel = {
   totalPages: 100,
   currentPage: 1,
   items: [
@@ -72,8 +52,7 @@ const unloadedState: BlogCatalogState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
-      text: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -96,8 +75,7 @@ const unloadedState: BlogCatalogState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
-      text: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -120,8 +98,7 @@ const unloadedState: BlogCatalogState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
-      text: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -144,8 +121,7 @@ const unloadedState: BlogCatalogState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
-      text: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -159,7 +135,32 @@ const unloadedState: BlogCatalogState = {
     
       likes: 0
     }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestBlogCatalog: (props?: IGetBlogCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_BLOG_CATALOG' })
+
+    const locale = process.env.REACT_APP_LOCALE
+    const searchParams = {...props?.searchParams, locale}
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<IGetBlogCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...data })
+      })
+  }
+}
+
+const unloadedState: BlogCatalogState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/BlogCategories.ts

@@ -6,6 +6,7 @@ import { IPagination, IParams, IRequest, IResponse } from '../../interfaces'
 import { ICategory } from '../../components/SideWidgets/Categories'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
@@ -33,15 +34,28 @@ interface ReceiveAction extends IGetBlogCategoriesResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
+const mockData: IGetBlogCategoriesResponseModel  = {
+  totalPages: 1,
+  currentPage: 1,
+  items: [
+    { href: 'default', anchorText: "Default" },
+    { href: 'software', anchorText: "Software" },
+    { href: 'hardware', anchorText: "Hardware" }
+  ]
+}
+
 export const actionCreators = {
   requestBlogCategories: (props?: IGetBlogCategoriesRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_BLOG_CATEGORIES' })
 
     const locale = process.env.REACT_APP_LOCALE
-
     const searchParams = {...props?.searchParams, locale}
 
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      console.log(mockData)
+      dispatch({ type: 'RECEIVE_BLOG_CATEGORIES', ...cloneObject(mockData) })
       return
+    }
 
     Get<Promise<IGetBlogCategoriesResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_CATEGORYITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
       .then(response => response)
@@ -49,19 +63,11 @@ export const actionCreators = {
         if(data)
           dispatch({ type: 'RECEIVE_BLOG_CATEGORIES', ...data })
       })
-
-    dispatch({ type: 'REQUEST_BLOG_CATEGORIES' })
   }
 }
 
 const unloadedState: BlogCategoriesState = {
-  totalPages: 1,
-  currentPage: 1,
-  items: [
-    { href: 'default', anchorText: "Default" },
-    { href: 'software', anchorText: "Software" },
-    { href: 'hardware', anchorText: "Hardware" }
-  ],
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/BlogFeatured.ts

@@ -6,6 +6,7 @@ import { IParams, IRequest, IResponse } from '../../interfaces'
 import { IFeaturedBlogItem } from '../../pages/Blog/Catalog/FeaturedBlogComponent'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
@@ -36,28 +37,7 @@ interface ReceiveAction extends IGetBlogFeaturedResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestBlogFeatured: (props?: IGetBlogFeaturedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    const locale = process.env.REACT_APP_LOCALE
-
-    const searchParams = {...props?.searchParams, locale}
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<IGetBlogFeaturedResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS_FEAUTERED}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_BLOG_FEATURED', ...data })
-      })
-
-    dispatch({ type: 'REQUEST_BLOG_FEATURED' })
-  }
-}
-
-const unloadedState: BlogFeaturedState = {
+const mockData: IGetBlogFeaturedResponseModel = {
   items: [
     {
       id: "",
@@ -68,7 +48,7 @@ const unloadedState: BlogFeaturedState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -92,7 +72,7 @@ const unloadedState: BlogFeaturedState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -116,7 +96,7 @@ const unloadedState: BlogFeaturedState = {
         alt: "..."
       },
       title: "Lorem ipsum",
-      shortText: "",
+      shortText: "This is a blog short text...",
       author: {
         id: "",
         nickName: "Admin",
@@ -131,7 +111,32 @@ const unloadedState: BlogFeaturedState = {
       readTime: 10,
       likes: 0
     }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestBlogFeatured: (props?: IGetBlogFeaturedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_BLOG_FEATURED' })
+
+    const locale = process.env.REACT_APP_LOCALE
+    const searchParams = {...props?.searchParams, locale}
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_BLOG_FEATURED', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<IGetBlogFeaturedResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS_FEAUTERED}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_BLOG_FEATURED', ...data })
+      })
+  }
+}
+
+const unloadedState: BlogFeaturedState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/BlogItem.ts

@@ -6,6 +6,7 @@ import { IParams, IRequest, IResponse } from '../../interfaces'
 import { IBlogItem } from '../../pages/Blog/Item'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
@@ -35,28 +36,7 @@ interface ReceiveAction extends IGetBlogItemResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestBlogItem: (props?: IGetBlogItemRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    const locale = process.env.REACT_APP_LOCALE
-
-    const searchParams = {...props?.searchParams, locale}
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<IGetBlogItemResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEM}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_BLOG_ITEM', ...data })
-      })
-
-    // dispatch({ type: 'REQUEST_BLOG_ITEM', slug: props.slug })
-  }
-}
-
-const unloadedState: BlogItemState = {
+const mockData: IGetBlogItemResponseModel = {
   id: "",
   slug: "demo-post",
   image: {
@@ -84,8 +64,32 @@ const unloadedState: BlogItemState = {
     }
   },
   created:  new Date().toString(),
-  tags: [ "react", "redux", "webapi" ],
-  
+  tags: [ "react", "redux", "webapi" ]
+}
+
+export const actionCreators = {
+  requestBlogItem: (props?: IGetBlogItemRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_BLOG_ITEM' })
+
+    const locale = process.env.REACT_APP_LOCALE
+    const searchParams = {...props?.searchParams, locale}
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_BLOG_ITEM', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<IGetBlogItemResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEM}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_BLOG_ITEM', ...data })
+      })
+  }
+}
+
+const unloadedState: BlogItemState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/Comments.ts

@@ -7,6 +7,7 @@ import { IPagination, IParams, IRequest, IResponse } from '../../interfaces'
 import { IComment } from '../../pages/Blog/Item/CommentsComponent'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 // Request
 interface IGetCommentsPathParams extends IParams { }
@@ -32,26 +33,7 @@ interface ReceiveAction extends IGetCommentsResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestComments: (props?: IGetCommentsRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    /*
-      Get<Promise<IGetBlogCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...data })
-      })
-
-      dispatch({ type: 'REQUEST_BLOG_CATALOG' })
-      */
-  }
-}
-
-const unloadedState: CommentsState = {
+const mockData: IGetCommentsResponseModel = {
   totalPages: 100,
   currentPage: 1,
   items: [
@@ -102,9 +84,32 @@ const unloadedState: CommentsState = {
       },
       comment: "When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence."
     }
-  
-  ],
+  ]
+}
 
+export const actionCreators = {
+  requestComments: (props?: IGetCommentsRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_COMMENTS', ...cloneObject(mockData) })
+      return
+    }
+
+    /*
+      Get<Promise<IGetBlogCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_BLOGITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_BLOG_CATALOG', ...data })
+      })
+
+      dispatch({ type: 'REQUEST_BLOG_CATALOG' })
+      */
+  }
+}
+
+const unloadedState: CommentsState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/Content.ts

@@ -27,6 +27,7 @@ import { IShopCheckoutPage } from '../../pages/Shop/Checkout'
 
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
@@ -92,25 +93,7 @@ interface ReceiveAction extends IGetContentResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction;
 
-export const actionCreators = {
-  requestContent: (props?: IGetContentRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<IGetContentResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_CONTENT}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
-      .then(response => response)
-      .then((data) => {
-        if(data) {
-          dispatch({ type: 'RECEIVE_CONTENT', ...data })
-        }
-      })
-
-    dispatch({ type: 'REQUEST_CONTENT' })
-  }
-}
-
-const unloadedState: ContentState = {
+const mockData: IGetContentResponseModel = {
   siteName: "Contoso",
   siteUrl: "https://contoso.com",
 
@@ -238,7 +221,9 @@ const unloadedState: ContentState = {
       ]
     },
     featuredBlogsSection: {
-      title: "Featured blogs"
+      title: "Featured blogs",
+      text: "Chek our best blog posts",
+      readTime: `${ReservedWords.date} &middot; Time to read: ${ReservedWords.readTime} min`
     },
     callToActionSection: {
       title: "New products, delivered to you.",
@@ -287,6 +272,9 @@ const unloadedState: ContentState = {
     relatedProductsSection: {
       title: "Related products",
       addToCart: "Add to cart"
+    },
+    commentsSection: {
+      leaveComment: "Join the discussion and leave a comment!"
     }
   },
 
@@ -552,8 +540,30 @@ const unloadedState: ContentState = {
     submit: {
       title: "Sing up"
     }
-  },
+  }
+}
 
+export const actionCreators = {
+  requestContent: (props?: IGetContentRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_CONTENT' })
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_CONTENT', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<IGetContentResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_CONTENT}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
+      .then(response => response)
+      .then((data) => {
+        if(data) {
+          dispatch({ type: 'RECEIVE_CONTENT', ...data })
+        }
+      })
+  }
+}
+
+const unloadedState: ContentState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/ShopCatalog.ts

@@ -6,6 +6,7 @@ import { IPagination, IParams, IRequest, IResponse } from '../../interfaces'
 import { IShopItem } from '../../pages/Shop/Catalog/ShopItemsSection'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Request
@@ -23,7 +24,6 @@ interface GetShopCatalogRequestModel extends IRequest<IGetShopcatalogPathParams,
 // Response
 interface GetShopCatalogResponseModel extends IPagination<IShopItem>, IResponse {}
 
-
 export interface ShopCatalogState extends GetShopCatalogResponseModel {
   isLoading: boolean
 }
@@ -38,28 +38,7 @@ interface ReceiveAction extends GetShopCatalogResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestShopCatalog: (props?: GetShopCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    const locale = process.env.REACT_APP_LOCALE
-
-    const searchParams = { ...props?.searchParams, locale }
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<GetShopCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_SITEID}/${process.env.REACT_APP_SHOPITEMS}`, props?.pathParams, searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_SHOP_CATALOG', ...data })
-      })
-    
-    dispatch({ type: 'REQUEST_SHOP_CATALOG' })
-  }
-}
-
-const unloadedState: ShopCatalogState = {
+const mockData: GetShopCatalogResponseModel = {
   totalPages: 100,
   currentPage: 1,
   items: [
@@ -159,7 +138,32 @@ const unloadedState: ShopCatalogState = {
       price: 20,
       newPrice: 10
     }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestShopCatalog: (props?: GetShopCatalogRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_SHOP_CATALOG' })
+
+    const locale = process.env.REACT_APP_LOCALE
+    const searchParams = { ...props?.searchParams, locale }
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_SHOP_CATALOG', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<GetShopCatalogResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_SITEID}/${process.env.REACT_APP_SHOPITEMS}`, props?.pathParams, searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_SHOP_CATALOG', ...data })
+      })
+  }
+}
+
+const unloadedState: ShopCatalogState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/ShopCategories.ts

@@ -6,6 +6,7 @@ import { IPagination, IParams, IRequest, IResponse } from '../../interfaces'
 import { ICategory } from '../../components/SideWidgets/Categories'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 // Request
 interface GetShopCategoriesPathParams extends IParams { }
@@ -33,31 +34,36 @@ interface ReceiveAction extends GetShopCategoriesResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestShopCategories: (props?: GetShopCategoriesRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-    
-    Get<Promise<GetShopCategoriesResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_CATEGORYITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_SHOP_CATEGORIES', ...data })
-      })
-
-    dispatch({ type: 'REQUEST_SHOP_CATEGORIES' })
-  }
-}
-
-const unloadedState: ShopCategoriesState = {
+const mockData: GetShopCategoriesResponseModel  = {
   totalPages: 1,
   currentPage: 1,
   items: [
     { href: 'default', anchorText: "Default" },
     { href: 'software', anchorText: "Software" },
     { href: 'hardware', anchorText: "Hardware" }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestShopCategories: (props?: GetShopCategoriesRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_SHOP_CATEGORIES' })
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_SHOP_CATEGORIES', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<GetShopCategoriesResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_CATEGORYITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_SHOP_CATEGORIES', ...data })
+      })
+  }
+}
+
+const unloadedState: ShopCategoriesState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/ShopFeatured.ts

@@ -3,10 +3,11 @@ import { AppThunkAction } from '../'
 
 // Interfaces
 import { IParams, IRequest, IResponse } from '../../interfaces'
-import { IRelatedProduct } from '../../pages/Shop/Item/RelatedProducts'
+import { IRelatedProduct, IRelatedProducts } from '../../pages/Shop/Item/RelatedProducts'
 
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 // Request
 interface IGetShopFeaturedSearchParams extends IParams { }
@@ -35,24 +36,7 @@ interface ReceiveAction extends IGetShopFeaturedResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestShopFeatured: (props?: IGetShopFeaturedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<IGetShopFeaturedResponseModel>>('https://localhost:7151/api/ShopFeatured', props?.pathParams, props?.searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_SHOP_FEATURED', ...data })
-      })
-
-    dispatch({ type: 'REQUEST_SHOP_FEATURED' })
-  }
-}
-
-const unloadedState: ShopFeaturedState = {
+const mockData: IGetShopFeaturedResponseModel = {
   items: [
     {
       id: '',
@@ -78,7 +62,30 @@ const unloadedState: ShopFeaturedState = {
       price: 20,
       newPrice: 10
     }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestShopFeatured: (props?: IGetShopFeaturedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_SHOP_FEATURED', ...cloneObject(mockData) })
+      return
+    }
+    
+    Get<Promise<IGetShopFeaturedResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_SHOPITEMS}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_SHOP_FEATURED', ...data })
+      })
+
+    dispatch({ type: 'REQUEST_SHOP_FEATURED' })
+  }
+}
+
+const unloadedState: ShopFeaturedState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/ShopItem.ts

@@ -6,6 +6,7 @@ import { IParams, IRequest, IResponse } from '../../interfaces'
 import { IShopItem } from '../../pages/Shop/Item'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 
 // Reuest
@@ -36,24 +37,7 @@ interface ReceiveAction extends GetShopItemResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestShopItem: (props?: GetShopItemRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-
-    Get<Promise<GetShopItemResponseModel>>('https://localhost:7151/api/ShopItem', props?.pathParams, props?.searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_SHOP_ITEM', ...data })
-      })
-
-    // dispatch({ type: 'REQUEST_SHOP_ITEM', slug: props.slug })
-  }
-}
-
-const unloadedState: ShopItemState = {
+const mockData: GetShopItemResponseModel = {
   id: "",
   slug: "demo-post",
   image: {
@@ -85,58 +69,29 @@ const unloadedState: ShopItemState = {
   price: 20,
   newPrice: 10,
 
-  quantity: 10,
-  
-  // comments: [
-  //   {
-  //     author: {
-  //       id: "",
-  //       nickName: "Commenter Name 1",
-  //       image: {
-  //         src: `${process.env.REACT_APP_FRONTEND}/Image/50x50/ced4da/6c757d`,
-  //         alt: "..."
-  //       }
-  //     },
-  //     comment: "If you're going to lead a space frontier, it has to be government; it'll never be private enterprise. Because the space frontier is dangerous, and it's expensive, and it has unquantified risks.",
-  
-  //     responses: [
-  //       {
-  //         author: {
-  //           id: "",
-  //           nickName: "Commenter Name 4",
-  //           image: {
-  //             src: `${process.env.REACT_APP_FRONTEND}/Image/50x50/ced4da/6c757d`,
-  //             alt: "..."
-  //           }
-  //         },
-  //         comment: "And under those conditions, you cannot establish a capital-market evaluation of that enterprise. You can't get investors."
-  //       },
-  //       {
-  //         author: {
-  //           id: "",
-  //           nickName: "Commenter Name 3",
-  //           image: {
-  //             src: `${process.env.REACT_APP_FRONTEND}/Image/50x50/ced4da/6c757d`,
-  //             alt: "..."
-  //           }
-  //         },
-  //         comment: "When you put money directly to a problem, it makes a good headline."
-  //       }
-  //     ]
-  //   },
-  //   {
-  //     author: {
-  //       id: "",
-  //       nickName: "Commenter Name 2",
-  //       image: {
-  //         src: `${process.env.REACT_APP_FRONTEND}/Image/50x50/ced4da/6c757d`,
-  //         alt: "..."
-  //       }
-  //     },
-  //     comment: "When I look at the universe and all the ways the universe wants to kill us, I find it hard to reconcile that with statements of beneficence."
-  //   }
-  
-  // ],
+  quantity: 10
+}
+
+export const actionCreators = {
+  requestShopItem: (props?: GetShopItemRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_SHOP_ITEM' })
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_SHOP_ITEM', ...cloneObject(mockData) })
+      return
+    }
+
+    Get<Promise<GetShopItemResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_SHOPITEM}/${process.env.REACT_APP_SITEID}`, props?.pathParams, props?.searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_SHOP_ITEM', ...data })
+      })
+  }
+}
+
+const unloadedState: ShopItemState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/ClientApp/src/store/reducers/ShopRelated.ts

@@ -2,9 +2,10 @@ import { Action, Reducer } from 'redux'
 import { AppThunkAction } from '../'
 
 import { IParams, IRequest, IResponse } from '../../interfaces'
-import { IRelatedProduct } from '../../pages/Shop/Item/RelatedProducts'
+import { IRelatedProduct, IRelatedProducts } from '../../pages/Shop/Item/RelatedProducts'
 
 import { Get } from '../../restClient'
+import { cloneObject } from '../../functions'
 
 // Resquest
 interface IGetShopRelatedPathParams extends IParams {}
@@ -33,24 +34,7 @@ interface ReceiveAction extends IGetShopRelatedResponseModel {
 
 type KnownAction = RequestAction | ReceiveAction
 
-export const actionCreators = {
-  requestShopRelated: (props?: IGetShopRelatedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
-
-    if(process.env.REACT_APP_LOCAL_ONLY == 'Y')
-      return
-    
-    Get<Promise<IGetShopRelatedResponseModel>>('https://localhost:7151/api/ShopRelated', props?.pathParams, props?.searchParams)
-      .then(response => response)
-      .then(data => {
-        if(data)
-          dispatch({ type: 'RECEIVE_SHOP_RELATED', ...data })
-      })
-
-    dispatch({ type: 'REQUEST_SHOP_RELATED' })
-  }
-}
-
-const unloadedState: ShopRelatedState = {
+const mockData: IGetShopRelatedResponseModel = {
   items: [
     {
       id: '',
@@ -148,7 +132,29 @@ const unloadedState: ShopRelatedState = {
       price: 20,
       newPrice: 10
     }
-  ],
+  ]
+}
+
+export const actionCreators = {
+  requestShopRelated: (props?: IGetShopRelatedRequestModel): AppThunkAction<KnownAction> => (dispatch, getState) => {
+    dispatch({ type: 'REQUEST_SHOP_RELATED' })
+
+    if(process.env.REACT_APP_LOCAL_ONLY == 'Y') {
+      dispatch({ type: 'RECEIVE_SHOP_RELATED', ...cloneObject(mockData) })
+      return
+    }
+    
+    Get<Promise<IGetShopRelatedResponseModel>>(`${process.env.REACT_APP_API}/${process.env.REACT_APP_SITEID}/${process.env.REACT_APP_SHOPITEMS}`, props?.pathParams, props?.searchParams)
+      .then(response => response)
+      .then(data => {
+        if(data)
+          dispatch({ type: 'RECEIVE_SHOP_RELATED', ...data })
+      })
+  }
+}
+
+const unloadedState: ShopRelatedState = {
+  ...cloneObject(mockData),
   isLoading: false
 }
 

src/docker-compose.override.yml

@@ -15,6 +15,8 @@ services:
     volumes:
       - ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
       - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro
+    depends_on:
+      - weatherforecast
     networks:
       - "my-network"
 
@@ -28,10 +30,65 @@ services:
     volumes:
       - ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
       - ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro
+    depends_on:
+      - placement
+      - redis
+      - mongo
     networks:
       - "my-network"
 
+  weatherforecast-dapr:
+    image: "daprio/daprd:edge"
+    command: [
+      "./daprd",
+      "-app-id", "weatherforecast",
+      "-placement-host-address", "placement:50006",
+      "-components-path", "/components"
+    ]
+    volumes:
+      - "./docker-compose/dapr/components/:/components"
+    depends_on:
+      - weatherforecast
+    network_mode: "service:weatherforecast"
 
+  ############################
+  # Dapr dashboard
+  # https://github.com/dapr/dashboard/pull/217
+  ############################
+  dashboard:
+    image: daprio/dashboard:latest
+    ports:
+      - "8080:8080"
+    depends_on:
+      - placement
+      - redis
+    networks:
+      - "my-network"
+
+  ############################
+  # Dapr placement service
+  ############################
+  placement:
+    image: "daprio/dapr"
+    command: ["./placement", "-port", "50006"]
+    ports:
+      - "50006:50006"
+    networks:
+      - "my-network"
+
+  ############################
+  # Redis state store
+  ############################
+  redis:
+    image: "redis:alpine"
+    ports:
+      - "6380:6379"
+    networks:
+      - "my-network"
+  
+  ############################
+  # MongoDB
+  ############################
   mongo:
     image: mongo
     restart: always
@@ -41,10 +98,13 @@ services:
       MONGO_INITDB_ROOT_USERNAME: root
       MONGO_INITDB_ROOT_PASSWORD: example
     volumes:
-     - ./docker-compose/mongo/data/db:/data/db
+      - ./docker-compose/mongo/data/db:/data/db
     networks:
       - "my-network"
 
+  ############################
+  # Mongo Express
+  ############################
   mongo-express:
     image: mongo-express
     restart: always

src/docker-compose/mongo/data/db/WiredTiger.turtle

@@ -3,4 +3,4 @@ WiredTiger 10.0.2: (December 21, 2021)
 WiredTiger version
 major=10,minor=0,patch=2
 file:WiredTiger.wt
-access_pattern_hint=none,allocation_size=4KB,app_metadata=,assert=(commit_timestamp=none,durable_timestamp=none,read_timestamp=none,write_timestamp=off),block_allocation=best,block_compressor=,cache_resident=false,checksum=on,collator=,columns=,dictionary=0,encryption=(keyid=,name=),format=btree,huffman_key=,huffman_value=,id=0,ignore_in_memory_cache_size=false,internal_item_max=0,internal_key_max=0,internal_key_truncate=true,internal_page_max=4KB,key_format=S,key_gap=10,leaf_item_max=0,leaf_key_max=0,leaf_page_max=32KB,leaf_value_max=0,log=(enabled=true),memory_page_image_max=0,memory_page_max=5MB,os_cache_dirty_max=0,os_cache_max=0,prefix_compression=false,prefix_compression_min=4,readonly=false,split_deepen_min_child=0,split_deepen_per_child=0,split_pct=90,tiered_object=false,tiered_storage=(auth_token=,bucket=,bucket_prefix=,cache_directory=,local_retention=300,name=,object_target_size=0),value_format=S,verbose=[],version=(major=1,minor=1),write_timestamp_usage=none,checkpoint=(WiredTigerCheckpoint.126190=(addr="018381e452c7a52b8481e4d7b9659f8581e46348db2e808080e3023fc0e3010fc0",order=126190,time=1680809094,size=81920,newest_start_durable_ts=0,oldest_start_ts=0,newest_txn=1524,newest_stop_durable_ts=0,newest_stop_ts=-1,newest_stop_txn=-11,prepare=0,write_gen=379335,run_write_gen=377166)),checkpoint_backup_info=,checkpoint_lsn=(78,597248)
+access_pattern_hint=none,allocation_size=4KB,app_metadata=,assert=(commit_timestamp=none,durable_timestamp=none,read_timestamp=none,write_timestamp=off),block_allocation=best,block_compressor=,cache_resident=false,checksum=on,collator=,columns=,dictionary=0,encryption=(keyid=,name=),format=btree,huffman_key=,huffman_value=,id=0,ignore_in_memory_cache_size=false,internal_item_max=0,internal_key_max=0,internal_key_truncate=true,internal_page_max=4KB,key_format=S,key_gap=10,leaf_item_max=0,leaf_key_max=0,leaf_page_max=32KB,leaf_value_max=0,log=(enabled=true),memory_page_image_max=0,memory_page_max=5MB,os_cache_dirty_max=0,os_cache_max=0,prefix_compression=false,prefix_compression_min=4,readonly=false,split_deepen_min_child=0,split_deepen_per_child=0,split_pct=90,tiered_object=false,tiered_storage=(auth_token=,bucket=,bucket_prefix=,cache_directory=,local_retention=300,name=,object_target_size=0),value_format=S,verbose=[],version=(major=1,minor=1),write_timestamp_usage=none,checkpoint=(WiredTigerCheckpoint.127717=(addr="019681e4fb9f7e379f81e4f489d9b8a081e4070e71ea808080e301ffc0e3010fc0",order=127717,time=1681378661,size=81920,newest_start_durable_ts=0,oldest_start_ts=0,newest_txn=188,newest_stop_durable_ts=0,newest_stop_ts=-1,newest_stop_txn=-11,prepare=0,write_gen=383947,run_write_gen=383679)),checkpoint_backup_info=,checkpoint_lsn=(82,75904)