iceholidays-frontend 0.5.0 → 0.7.0

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/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/AboutUsPage.tsx

@@ -26,12 +26,12 @@ const AboutUsPage = React.FC = () => (
           <Col span={24}>
             <img src="/iceholidays-assets/images/about_us2.png"/>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>The Signature Tours was born from a passion for redefining travel. We believe that journeys should be more than just trips—they should be transformative experiences, filled with moments that leave an indelible mark on the soul. Catering to discerning travelers who seek more than the ordinary, The Signature Tours crafts bespoke journeys that combine sophistication, cultural immersion, and unparalleled quality. </p>
             <p>Our story begins with a vision: to create journeys that linger in the heart long after the traveler returns home. Each itinerary we design reflects our dedication to perfection. From the charm of boutique accommodations nestled in picturesque landscapes to handpicked cultural experiences that unveil the soul of a destination, every detail is thoughtfully considered to ensure your journey is as seamless as it is extraordinary.</p>
             <p>At The Signature Tours, we embrace the philosophy of the S-Tours experience—where every moment is a masterpiece. Imagine strolling through the cobblestone streets of a quaint village, savoring the aroma of freshly baked bread as locals welcome you with warm smiles. </p>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>Picture yourself standing atop a majestic mountain at sunrise,the golden hues of the horizon reflecting the sense of awe within you. These are the kinds of moments we strive to create—authentic, meaningful, and unforgettable.</p>
             <p>But our commitment goes beyond premium and comfort. It’s about forging connections—with places, cultures, and people. It’s about stepping into a story, whether it’s exploring ancient ruins with a seasoned archaeologist, learning the art of wine making from a passionate vintner, or sharing laughter with a local family over a home-cooked meal.</p>
             <p>At The Signature Tours, every journey is an invitation to step out of the ordinary and into a world of wonder. We’re not just about travel; we’re about creating memories that stay with you forever. This is our promise, and this is what we call the S-Tours philosophy where we deliver S-Class Journeys, Signature Memories. Because every journey should be as unique as your signature.</p>
@@ -80,10 +80,10 @@ const AboutUsPage = React.FC = () => (
             <p>We have acquired recognition and certificates such as:</p>
           </div>
         </Col>
-        <Col xs={24} sm={24} lg={8}>
+        <Col xs={24} sm={24} md={12} lg={8}>
             <img src="/iceholidays-assets/images/certificate1.png"/>
         </Col>
-        <Col xs={24} sm={24} lg={8}>
+        <Col xs={24} sm={24} md={12} lg={8}>
             <img src="/iceholidays-assets/images/certificate2.png"/>
         </Col>
       </Row>

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