Change the description of the theater

Asing1001 · Nov 12, 2023 · cd7b0a6 · cd7b0a6
1 parent 827e24b
commit cd7b0a6
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 81 deletions.
diff --git a/src/app/components/theaterCard.tsx b/src/app/components/theaterCard.tsx
@@ -6,43 +6,44 @@ import SVGAVWeb from 'material-ui/svg-icons/av/web';
 import { grey500 } from 'material-ui/styles/colors';
 
 const theaterCardStyle: React.CSSProperties = {
-    marginRight: '0.5em',
-    fontSize: 'small',
-    alignItems: 'center',
-    display: 'inline-flex'
-}
+  marginRight: '0.5em',
+  fontSize: 'small',
+  alignItems: 'center',
+  display: 'inline-flex',
+};
 
 class TheaterCard extends React.PureComponent<any, any> {
-    constructor(props) {
-        super(props)
-    }
+  constructor(props) {
+    super(props);
+  }
 
-    render() {
-        let { url, distance, name, address } = this.props.theater;
-        let roomTypes = this.props.roomTypes;
-        return (
-            <div>
-                <Link style={{ color: 'inherit' }} to={`/theater/${name}`}>
-                    <h5 style={{ marginBottom: "-.2em", fontSize: "16px" }}>
-                        {name}
-                    </h5>
-                </Link>
-                <div style={{ paddingTop: '0.5em', display: 'flex', alignItems: 'center' }}>                                        
-                    {url && <a href={url}
-                        style={{ whiteSpace: 'nowrap', ...theaterCardStyle }}>
-                        <SVGAVWeb color={grey500} viewBox={'-3 0 30 24'} />
-                        網站
-                    </a>}
-                    <a href={`https://maps.google.com?q=${name}`}
-                        style={theaterCardStyle}>
-                        <SVGCommunicationLocationOn color={grey500} viewBox={'-3 0 30 24'} />{distance ? `(${distance}km)${address}` : address}
-                    </a>
-                    {roomTypes && roomTypes.length > 0 && <span className="roomType" style={theaterCardStyle}>
-                        {roomTypes.map(roomType => roomType)}
-                    </span>}
-                </div>
-            </div>
-        );
-    }
+  render() {
+    let { url, distance, name, address } = this.props.theater;
+    let roomTypes = this.props.roomTypes;
+    return (
+      <div>
+        <Link style={{ color: 'inherit' }} to={`/theater/${name}`}>
+          <h5 style={{ marginBottom: '-.2em', fontSize: '16px' }}>{name}</h5>
+        </Link>
+        <div style={{ paddingTop: '0.5em', display: 'flex', alignItems: 'center' }}>
+          {url && (
+            <a href={url} style={{ whiteSpace: 'nowrap', ...theaterCardStyle }}>
+              <SVGAVWeb color={grey500} viewBox={'-3 0 30 24'} />
+              線上購票
+            </a>
+          )}
+          <a href={`https://maps.google.com?q=${name}`} style={theaterCardStyle}>
+            <SVGCommunicationLocationOn color={grey500} viewBox={'-3 0 30 24'} />
+            {distance ? `(${distance}km)${address}` : address}
+          </a>
+          {roomTypes && roomTypes.length > 0 && (
+            <span className="roomType" style={theaterCardStyle}>
+              {roomTypes.map((roomType) => roomType)}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
 }
-export default TheaterCard;
+export default TheaterCard;
diff --git a/src/app/components/theaterDetail.tsx b/src/app/components/theaterDetail.tsx
@@ -10,6 +10,7 @@ import MovieCard from './movieCard';
 import { gql, graphql } from 'react-apollo';
 import { grey500 } from 'material-ui/styles/colors';
 import TimeList from './timeList';
+import Theater from '../../models/theater';
 
 const theaterDetailQuery = gql`
   query TheaterDetail($theaterName: String) {
@@ -61,19 +62,16 @@ const theaterDetailQuery = gql`
     };
   },
 })
-class TheaterDetail extends React.PureComponent<
-  any,
-  { selectedDate: Date; }
-> {
+class TheaterDetail extends React.PureComponent<any, { selectedDate: Date }> {
   constructor(props) {
     super(props);
     this.state = {
-      selectedDate: new Date()
-    }
+      selectedDate: new Date(),
+    };
   }
 
   isSelectedDate(date) {
-    return moment(date).isSame(this.state.selectedDate, 'date')
+    return moment(date).isSame(this.state.selectedDate, 'date');
   }
 
   getAvailableDates(schedules) {
@@ -87,8 +85,11 @@ class TheaterDetail extends React.PureComponent<
     if (loading) {
       return <LoadingIcon isLoading={loading} />;
     }
-    const theater = theaters[0];
+    const theater: Theater = theaters[0];
     document.title = `${theater.name}時刻表 | Movie Rater`;
+    document['meta'] = {
+      description: generateTheaterDescription(theater),
+    };
     const availableDates = this.getAvailableDates(theaters[0].schedules);
     return (
       <div>
@@ -98,12 +99,10 @@ class TheaterDetail extends React.PureComponent<
             {availableDates.map((date, index) => (
               <Chip
                 className="datebtn"
-                backgroundColor={
-                  this.isSelectedDate(date) ? grey500 : null
-                }
+                backgroundColor={this.isSelectedDate(date) ? grey500 : null}
                 key={index}
                 onClick={() => {
-                  this.setState({ selectedDate: moment(date).toDate() })
+                  this.setState({ selectedDate: moment(date).toDate() });
                 }}
               >
                 {moment(date).format('MM/DD')}
@@ -116,28 +115,14 @@ class TheaterDetail extends React.PureComponent<
             .slice()
             .filter(({ date }) => this.isSelectedDate(date))
             .sort(({ movie }, { movie: movie2 }) =>
-              this.props.sortFunction(
-                classifyArticle(movie),
-                classifyArticle(movie2)
-              )
+              this.props.sortFunction(classifyArticle(movie), classifyArticle(movie2))
             )
             .map((schedule: Schedule, index) => (
-              <Paper
-                zDepth={2}
-                key={index}
-                className="row no-margin"
-                style={{ marginBottom: '.5em' }}
-              >
-                <MovieCard
-                  movie={classifyArticle(schedule.movie)}
-                  roomTypes={schedule.roomTypes}
-                >
+              <Paper zDepth={2} key={index} className="row no-margin" style={{ marginBottom: '.5em' }}>
+                <MovieCard movie={classifyArticle(schedule.movie)} roomTypes={schedule.roomTypes}>
                   <TimeList
                     timesStrings={schedule.timesStrings}
-                    greyOutExpired={moment(schedule.date).isSame(
-                      moment(),
-                      'day'
-                    )}
+                    greyOutExpired={moment(schedule.date).isSame(moment(), 'day')}
                   ></TimeList>
                 </MovieCard>
               </Paper>
@@ -147,3 +132,10 @@ class TheaterDetail extends React.PureComponent<
   }
 }
 export default TheaterDetail;
+
+function generateTheaterDescription(theater: Theater) {
+  const movieNames = theater.schedules
+    ? [...new Set(theater.schedules.map(({ movie }) => movie.chineseTitle))].join('、')
+    : null;
+  return `${theater.name} · 地址:${theater.address} · 線上購票請點此 · 電影時刻表:${movieNames}`;
+}
diff --git a/src/models/theater.ts b/src/models/theater.ts
@@ -1,18 +1,20 @@
 import Location from '../models/location';
+import Schedule from './schedule';
 
 export default class Theater {
-    constructor(name = "", address = "") {
-        this.name = name;
-        this.address = address;
-    }
-    name: string
-    url?: string
-    address?: string
-    phone?: string
-    region?: string
-    subRegion?: string
-    regionIndex?: number
-    location?: Location
-    distance?: number
-    scheduleUrl?: string
-}
+  constructor(name = '', address = '') {
+    this.name = name;
+    this.address = address;
+  }
+  name: string;
+  url?: string;
+  address?: string;
+  phone?: string;
+  region?: string;
+  subRegion?: string;
+  regionIndex?: number;
+  location?: Location;
+  distance?: number;
+  scheduleUrl?: string;
+  schedules?: Schedule[];
+}