iceholidays-frontend 0.6.0 → 0.8.0

data/app/javascript/react/components/Testimonials.tsx

@@ -7,6 +7,9 @@ import RibbonSection from "./shared/RibbonSection";
 import TestimonialsApi from "../../api-services/testimonials-api.service";
 import { Testimonial } from "../../interfaces/testimonial.interface";
 import createDOMPurify from 'dompurify'
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 
 const DOMPurify = createDOMPurify(window)
 
@@ -50,11 +53,11 @@ export default class Testimonials extends React.Component {
                     <div className="tour">
                       <img src="/iceholidays-assets/images/logomark.png" className="st-logo"/>
                       <div>
-                        <span> {review.tour} </span>
+                        <span> {review.title} </span>
                       </div>
                     </div>
                     <div className="comment">
-                      <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(review.comment) }} />
+                      <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{review.comment}</Markdown>
                     </div>
                     <div className="author">
                       <Icon path={mdiFountainPenTip} size={1} className="author-icon" />

data/app/javascript/react/components/shared/LocationDropdown.tsx

@@ -8,10 +8,11 @@ import { mdiFilterVariant } from "@mdi/js";
 const LocationDropdown = (
   props: {
     locations:Location[];
+    initialValue:string;
     selectLocation;
   }
 ) => {
-  const { locations } = props;
+  const { locations, initialValue } = props;
 
   return (
     <div className="location-dropdown">
@@ -20,6 +21,7 @@ const LocationDropdown = (
           suffixIcon={<Icon path={mdiFilterVariant} size="18px" />}
           variant="borderless"
           defaultValue="china"
+          value={initialValue}
           options={locations.map((location) => ({label: location.name, value: location.id}))}
           dropdownStyle={{padding: "15px 20px", borderRadius: "20px", boxShadow: "0px 3.08px 16.47px 0px #00000040"}}
           optionRender={(option) => (

data/app/javascript/react/index.js

@@ -1,6 +1,7 @@
 
 import App from "./App"
 import ReactComponent from "./application"
+import MainFooter from "./layouts/MainFooter"
 
 
-ReactComponent.setup({App})
+ReactComponent.setup({App, MainFooter})

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

@@ -1,44 +1,52 @@
 import { Col, Flex, notification, Row, Space } from "antd";
 import React from "react";
-import { Link } from "react-router-dom";
 import LocationsApi from "../../api-services/locations-api.service";
 import { Country } from "../../interfaces/country.interface";
 
 
-const menus = [
-  {
-    label: "Home",
-    link: "/app"
-  },
-  {
-    label: "pdpa",
-    link: "/app"
-  },
-  {
-    label: "about us",
-    link: "/app/about-us"
-  },
-  {
-    label: "privacy policy",
-    link: "/app"
-  },
-  {
-    label: "contact us",
-    link: "/app/contact-us"
-  },
-  {
-    label: "terms & conditions",
-    link: "/app"
-  },
-]
+interface IMainFooterProps {
+  PDPA:string;
+  PRIVACY:string;
+  TNC:string;
+}
 
-export default class MainFooter extends React.Component {
+export default class MainFooter extends React.Component<IMainFooterProps> {
   api = new LocationsApi;
 
   state = {
     countries: []
   }
 
+  menus = [
+    {
+      label: "Home",
+      link: "/app"
+    },
+    {
+      label: "pdpa",
+      link: this.props.PDPA,
+      target: "_blank"
+    },
+    {
+      label: "about us",
+      link: "/app/about-us"
+    },
+    {
+      label: "privacy policy",
+      link: this.props.PRIVACY,
+      target: "_blank"
+    },
+    {
+      label: "contact us",
+      link: "/app/contact-us"
+    },
+    {
+      label: "terms & conditions",
+      link: this.props.TNC,
+      target: "_blank"
+    },
+  ]
+
   componentDidMount() {
     this.api.getCountries()
       .then(locationsData => {
@@ -58,7 +66,7 @@ export default class MainFooter extends React.Component {
               <div className="link-group-title">Countries</div>
               <div className="link-group-items">
                 {
-                  this.state.countries.map((country: Country)=> <Link key={country.id} to={`/app/listing?keyword=${country.name}`}>{country.name}</Link> )
+                  this.state.countries.map((country: Country)=> <a key={country.id} href={`/app/listing?location_id=${country.id}`} target="_self"> {country.name} </a> )
                 }
               </div>
             </Space>
@@ -67,7 +75,7 @@ export default class MainFooter extends React.Component {
             <Space direction="vertical">
               <div className="link-group-items">
                 {
-                  menus.map(menu =>  <Link to={menu.link}>{menu.label}</Link>)
+                  this.menus.map((menu, index) =><a key={index} target={menu.target} href={menu.link}> {menu.label} </a>)
                 }
               </div>
             </Space>
@@ -76,13 +84,13 @@ export default class MainFooter extends React.Component {
             <Space direction="vertical" align="center">
               <Flex vertical gap="20px" align="center">
                 <div className="link-group-title">Contact Us</div>
-                <div><Link to="/app/contact-agents">contact agents</Link></div>
+                <div><a href="/app/contact-agents">contact agents</a></div>
                 <div className="link-group-title">Follow us on</div>
                 <Flex gap={20} justify="space-between">  
-                  <img src="/iceholidays-assets/images/social/ico_fb.png"/>
-                  <img src="/iceholidays-assets/images/social/ico_twitter.png"/>
-                  <img src="/iceholidays-assets/images/social/ico_yt.png"/>
-                  <img src="/iceholidays-assets/images/social/ico_ig.png"/>
+                  <a target="_blank" href="https://www.facebook.com/thesignaturetour"><img src="/iceholidays-assets/images/social/ico_fb.png"/></a>
+                  <a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_twitter.png"/></a>
+                  <a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_yt.png"/></a>
+                  <a target="_blank" href="https://www.instagram.com/thesignaturetours"><img src="/iceholidays-assets/images/social/ico_ig.png"/></a>
                 </Flex>
               </Flex>
             </Space>

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/layouts/MainLayout.tsx

@@ -13,7 +13,7 @@ const MainLayout = () => {
       <Content>
         <Outlet/>
       </Content>
-      <MainFooter/>
+      {/* <MainFooter/>  */}
     </Layout>
   )
 };

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);