iceholidays-frontend 0.6.0 → 0.7.0

data/app/javascript/react/layouts/MainHeader.tsx

@@ -1,9 +1,10 @@
 import { mdiFileDownload, mdiMenu } from "@mdi/js";
 import Icon from "@mdi/react";
-import { Button, Drawer, Menu } from "antd";
+import { Button, Drawer, Menu, notification } from "antd";
 import React, { useState } from "react";
 import type { MenuProps } from 'antd';
 import { Link, useLocation, useMatch } from "react-router-dom";
+import BrochueApi from "../../api-services/brochure-api.service";
 
 type MenuItem = Required<MenuProps>['items'][number];
 
@@ -40,44 +41,91 @@ const items: MenuItem[] = [
   },
 ]
 
-const MainHeader = () => {
-  const [open, setOpen] = useState(false);
-  const location = useLocation();
-  const activeUrlKey = location.pathname.split("/").pop() || "app";
-  const [current, setCurrent] = useState(activeUrlKey);
 
-  const onClick: MenuProps['onClick'] = (e) => {
-    setCurrent(e.key);
-    setOpen(false);
-  };
+function withLocation(Component) {
+  return props => <Component {...props} location={useLocation()} />;
+}
+
+class MainHeader extends React.Component <{location}> {
+  brochureApi = new BrochueApi;
+
+  state = {
+    open: false,
+    current: "",
+  }
+
+  constructor(props:any){
+    super(props);
+  }
+
+
+  componentDidMount() {
+    this.setLocation();
+  }
+
+
+  downloadBrochure = () => {
+    this.brochureApi.getBrochure()
+      .then((brochureUrl:any) => {
+        // const blob = brochureUrl.blob();
+        // const blobURL = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        a.href = brochureUrl;
+        a.setAttribute('style', "display: none");
+
+        a.download = "Brochure";
+        document.body.appendChild(a);
+        a.click();
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while getting brochure.'});
+      });
+
+  }
 
-  const showDrawer = () => {
-    setOpen(true);
-  };
 
-  const onClose = () => {
-    setOpen(false);
+  private setLocation(){
+    const location = this.props.location
+    const activeUrlKey = location.pathname.split("/").pop() || "app";
+    this.setState({current: activeUrlKey});
+  }
+
+
+  onClick: MenuProps['onClick'] = (e) => {
+    this.setState({open: false, current: e.key})
   };
-  
-  return (
-    <div id="main-header">
-      <Menu mode="horizontal" items={items} onClick={onClick} selectedKeys={[current]} className="nav-menu"/>
 
-      <a href="/app"><img src="/iceholidays-assets/images/logo_mobile.png" className="logo logo_mobile"/></a>
+  showDrawer() {
+    this.setState({open: true});
+  };
 
-      <div id="nav-buttons">
-        <Button id="get-brochure" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+  onClose() {
+    this.setState({open: false});
+  };
 
-        <Button id="toggle-menu" type="primary" onClick={showDrawer}>
-          <Icon path={mdiMenu} size="25px" />
-        </Button>
+  render(){
+    const {open, current } = this.state;
+    return (
+      <div id="main-header">
+        <Menu mode="horizontal" items={items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu"/>
+  
+        <a href="/app"><img src="/iceholidays-assets/images/logo_mobile.png" className="logo logo_mobile"/></a>
+  
+        <div id="nav-buttons">
+        <Button onClick={this.downloadBrochure} id="get-brochure" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+  
+          <Button id="toggle-menu" type="primary" onClick={()=>this.showDrawer()}>
+            <Icon path={mdiMenu} size="25px" />
+          </Button>
+        </div>
+  
+        <Drawer title={null} onClose={()=>this.onClose()} open={open} id="nav-drawer">
+          <Menu items={items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
+        </Drawer>
       </div>
-
-      <Drawer title={null} onClose={onClose} open={open} id="nav-drawer">
-        <Menu items={items} onClick={onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
-      </Drawer>
-    </div>
-  )
+    )
+  }
+  
 }
 
-export default MainHeader;
+export default withLocation(MainHeader);

data/app/javascript/react/pages/BlogPage.tsx

@@ -1,81 +1,97 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
-import { Button, Card, Col, Row, Space } from "antd";
+import { Button, Card, Col, notification, Row, Space } from "antd";
 import FilterPills from "../widgets/FilterPills";
-import { Link } from "react-router-dom";
+import PostsApi from "../../api-services/posts-api.service";
+import { Blog } from "../../interfaces/blog.interface";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 const { Meta } = Card;
 
 const bannerPath = '/iceholidays-assets/images/blog.png';
-const breadcrumbs = [
-  { title: 'Home' },
-  { title: 'Blog' }
+const _breadcrumbs = [
+  { title: <a href="/app">Home</a> },
+  { title: <a href="/app/blog">Blog</a> }
 ] 
 
-const types = [ "News", "Blogs" ];
-const blogs = [
-  {
-    id: 1,
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-  {
-    id: 2,
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-  {
-    id: 3,
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-]
+const types = [ {type: "News", label: "News"},{type: "Blogs", label:"Blogs"} ];
 
-const setFilter = (selectedFilter) => {
-  console.log("set filter", selectedFilter)
-}
 
+export default class BlogPage extends React.Component {
+  postsApi = new PostsApi;
 
-const BlogPage = React.FC = () => (
-  <div id="blog-page">
-    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+  state = {
+    blogs: [],
+    breadcrumbs: _breadcrumbs,
+    searchParamsObj: {type: "", year: "", month: ""},
+  }
 
-    <div id="blog-page_body">
-      <Space size={12} direction="vertical">
-        <FilterPills items={types} allOption={true} initialValue={{keyword: "", year: "", month: ""}} selectFilter={(selected)=>setFilter(selected)}></FilterPills>
-      </Space>
+  componentDidMount() {
+    this.postsApi.getBlogs()
+      .then(blogsData => {
+        this.setState({blogs: blogsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading blogs.'});
+      });
+  }
 
-      <div id="blogs">
-        <Row wrap gutter={20}>
-          {
-            blogs.map(blog => (
-              <Col key={blog.id} span={8}>
-                <Link to={`/app/blog/${blog.id}`}>
-                  <Card
-                    hoverable
-                    cover={<img alt="example" src={blog.cover} />}
-                  >
-                    <Meta title={blog.title} description={
-                      <>
-                        <span>{blog.info}</span>
-                        <p>{blog.summary}</p>
-                        <Button color="primary" variant="outlined" block>阅读更多</Button>
-                      </>
-                    } />
-                  </Card>
-                </Link>
-              </Col>
-            ))
-          }
-        </Row>
+  setFilter = (selectedFilter) => {
+    const {breadcrumbs} = this.state;
+    breadcrumbs[2] = {title: this.searchParamsToText()};
+
+    const allHasValues = Object.entries(selectedFilter).every(o => o[1] != "" && o[1] != null);
+    if(allHasValues){
+      breadcrumbs[1] = {title: <span>Search results</span>};
+    }
+    this.setState({searchParamsObj: selectedFilter, breadcrumbs})
+  }
+
+
+  searchParamsToText() {
+    var {type, year, month} = this.state.searchParamsObj;
+    const monthYear = (month || year) && `${month} ${year}`;
+    const text = [type, monthYear].filter(val => val).join(", ");
+    return <span>{ text } </span>
+  }
+
+  render(){
+    const {blogs, breadcrumbs, searchParamsObj} = this.state;
+    return (
+      <div id="blog-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+
+        <div id="blog-page_body">
+          <Space size={12} direction="vertical">
+          <FilterPills items={types} bindValue="type" allOption={true} initialValue={searchParamsObj} selectFilter={(selected)=>this.setFilter(selected)}></FilterPills>
+          </Space>
+
+          <div id="blogs">
+            <Row wrap gutter={20}>
+              {
+                blogs.map((blog:Blog) => (
+                  <Col key={blog.id} span={8}>
+                    <Card cover={<img alt={blog.title} src={blog.thumbnail} />}>
+                        <Meta title={blog.title} description={
+                          <>
+                            {/* <span>{blog.info}</span> */}
+                            <div className="preview-content">
+                              <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{blog.content}</Markdown>
+                            </div>
+
+                            <Button className="view-blog" href={`/app/blog/${blog.id}`} type="link" color="primary" variant="outlined" block>阅读更多</Button>
+                          </>
+                        } />
+                    </Card>
+                  </Col>
+                ))
+              }
+            </Row>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-);
+    )
+  }
 
-export default BlogPage;
+}

data/app/javascript/react/pages/BlogShowPage.tsx

@@ -1,43 +1,58 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
+import PostsApi from "../../api-services/posts-api.service";
+import { useParams } from "react-router-dom";
+import { notification } from "antd";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 
 const bannerPath = '/iceholidays-assets/images/blog.png';
-const breadcrumbs = [
+const _breadcrumbs = [
   { title: 'Home' },
   { title: 'Blog' },
-  { title: '从斯里兰卡到马尔代夫' },
 ] 
 
-const types = [ "News", "Blogs" ];
-const blogs = [
-  {
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-  {
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-  {
-    cover: "/iceholidays-assets/images/blog1.png",
-    title: "旅游的意义：探索世界与内心的旅程",
-    info: "未分类 / 发表评论 / 2024年11月22日",
-    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
-  },
-]
-
-const BlogShowPage = React.FC = () => (
-  <div id="blog-show-page">
-    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
-
-    <div id="blog-page_body">
-      
-    </div>
-  </div>
-);
-
-export default BlogShowPage;
+function withParams(Component) {
+  return props => <Component {...props} params={useParams()} />;
+}
+
+class BlogShowPage extends React.Component <{params;}>  {
+  postsApi = new PostsApi;
+
+  state = {
+    breadcrumbs: _breadcrumbs,
+    blog: {title: "", thumbnail: "", content: ""},
+  }
+
+  componentDidMount() {
+    this.postsApi.getBlog(this.props.params.id)
+      .then(blogData => {
+        var breadcrumbs = this.state.breadcrumbs;
+        breadcrumbs.push({title: blogData.title});
+        this.setState({blog: blogData, breadcrumbs})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading blog.'});
+      });
+  }
+
+
+  render(){
+    const {blog} = this.state;
+    return (
+      <div id="blog-show-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={this.state.breadcrumbs} title="Blog"/>
+
+        <div id="blog-show-page_body">
+          <h1>{blog.title}</h1>
+          <img src={blog.thumbnail}/>
+          <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{blog.content}</Markdown>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+export default withParams(BlogShowPage);

data/app/javascript/react/pages/ListingPage.tsx

@@ -12,6 +12,11 @@ import { Itinerary } from "../../interfaces/itinerary.interface";
 
 import createDOMPurify from 'dompurify'
 import LocationDropdown from "../components/shared/LocationDropdown";
+import ReactMarkdown from "react-markdown";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 const DOMPurify = createDOMPurify(window)
 
@@ -38,7 +43,7 @@ class ListingPage extends React.Component <{searchParams}> {
 
   state = {
     countries: [],
-    selectedCountry: {cities: []},
+    selectedCountry: {name: "", cities: []},
     searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
     itineraries: [],
     location: {name: "", cover: ""},
@@ -56,15 +61,22 @@ class ListingPage extends React.Component <{searchParams}> {
   }
 
   componentDidMount() {
+    this.setSearchParamsObj();
+
     this.locationsApi.getCountries()
       .then(locationsData => {
-        this.setState({countries: locationsData, selectedCountry: locationsData[0]})
+        var selectedCountry = locationsData[0];
+        const searchParams = this.state.searchParamsObj;
+        if(searchParams.location_id){
+          const country = locationsData.find(loc => loc.id == searchParams.location_id);
+          if(country) selectedCountry = country;
+        } 
+        this.setState({countries: locationsData, selectedCountry})
+        this.getItineraries(searchParams, true);
       })
       .catch(error => {
         notification.error({ message: 'An error occured while loading countries.'});
       });
-
-      this.setSearchParamsObj();
     
   }
 
@@ -74,19 +86,18 @@ class ListingPage extends React.Component <{searchParams}> {
     searchParams.keys().forEach(key => {
       searchParamsObj[key] = searchParams.get(key);
     });
-
-    this.setState({searchParamsObj});
-
-    const locationId = searchParamsObj.location_id;
-    if(locationId) this.getLocation(locationId);
-
-    this.getItineraries(searchParamsObj);
+    
+    const {breadcrumbs} = this.state;
+    breadcrumbs[1] = {title: this.searchParamsToText()};
+    this.setState({searchParamsObj, breadcrumbs});
   }
 
 
   searchParamsToText() {
     var {keyword, year, month} = this.state.searchParamsObj;
-    return <span>{ this.state.location?.name || keyword}{`${month && `, ${month}`} ${year}`} </span>
+    const monthYear = (month || year) && `${month} ${year}`;
+    const text = [(this.state.location?.name || keyword), monthYear].filter(val => val).join(", ");
+    return <span>{ text } </span>
   }
 
   getLocation(locationId){
@@ -109,7 +120,17 @@ class ListingPage extends React.Component <{searchParams}> {
       });
   }
 
-  getItineraries(searchParams){
+  getItineraries(searchParams, init = false){
+    const locationId = searchParams.location_id;
+    const storedSearchParamsStr = localStorage.getItem("searchParams");
+    if(storedSearchParamsStr != null){
+      const storedSearchParams = JSON.parse(storedSearchParamsStr);
+      const storedLocationId = storedSearchParams.location_id;
+      if(locationId != storedLocationId || (init && locationId)) this.getLocation(locationId);
+    }else{
+      if(locationId) this.getLocation(locationId);
+    }
+
     this.seriesApi.getItineraries(searchParams)
     .then(itinerariesData => {
         this.setBreadcrumbs();
@@ -118,13 +139,16 @@ class ListingPage extends React.Component <{searchParams}> {
       .catch(error => {
         notification.error({ message: 'An error occured while loading itineraries.'});
       });
+    
+
+    localStorage.setItem("searchParams", JSON.stringify(searchParams));
   }
 
   setBreadcrumbs(){
     var breadcrumbs = this.state.breadcrumbs;
     if(breadcrumbs.length > 1){
       const {keyword, ...noKeyword} = this.state.searchParamsObj;
-      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "");
+      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "" && o[1] != null);
       if(allHasValues){
         const searchResultsCrumb = {title: <span>Search results</span>};
         if(breadcrumbs.length > 2){
@@ -153,7 +177,7 @@ class ListingPage extends React.Component <{searchParams}> {
     if(selectedCountry){
       const searchParamsObj = this.state.searchParamsObj;
       searchParamsObj.location_id = selectedCountry.id;
-      this.getLocation(selectedCountry.id);
+      // this.getLocation(selectedCountry.id);
 
       this.setState({selectedCountry, searchParamsObj});
       this.getItineraries(searchParamsObj);
@@ -170,7 +194,7 @@ class ListingPage extends React.Component <{searchParams}> {
         <div id="listing-page_header"> 
           <Flex vertical gap={10}>
             <h1>{this.searchParamsToText()}</h1>
-            <LocationDropdown locations={countries} selectLocation={this.selectCountry}/>
+            <LocationDropdown initialValue={selectedCountry.name} locations={countries} selectLocation={this.selectCountry}/>
           </Flex>
         </div>
       </Headline>
@@ -254,13 +278,13 @@ class ListingPage extends React.Component <{searchParams}> {
               </Flex>
             </div>
             </>
-          ) : <h1 id="no-tours-found">Not tour package is found.</h1>
+          ) : <h1 id="no-tours-found">No tour package is found.</h1>
         }
 
       </div>
 
       <Modal title="Description" open={this.state.descriptionModalOpen} onCancel={()=>this.closeModal("descriptionModalOpen")} footer={null} width={1000} centered className="tour_details_description">
-        <div className="pre-wrap">{ <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(descriptionData) }} /> }</div>
+        <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{descriptionData}</Markdown>
       </Modal>
 
       <Modal title="Itinerary" open={this.state.itineraryModalOpen} onCancel={()=>this.closeModal("itineraryModalOpen")} footer={null} width={1000} centered  className="tour_details_itinerary">