How to use sessions.setSessionData method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

MovieFullDesc.js

Source: MovieFullDesc.js Github

copy
1import React, { useState, useEffect } from "react";
2import {
3  StyleSheet,
4  Text,
5  View,
6  Image,
7  Dimensions,
8  ScrollView,
9  Button,
10  SafeAreaView,
11} from "react-native";
12import { Ionicons } from "@expo/vector-icons";
13import Spinner from "../components/Spinner";
14import Calendar from "../components/Calendar";
15import axios from "axios";
16
17import moment from "moment";
18
19const { width: screenWidth } = Dimensions.get("window");
20const MovieFullDesc = ({ navigation }) => {
21  const [sessionData, setSessionData] = useState([]);
22  const [loading, setLoading] = useState(false);
23  const [startDate, setStartDate] = useState();
24  const [activeBtn, setActiveBtn] = useState("");
25  const [chosenTime, setChosenTime] = useState("");
26  //Api Request for sessions
27  const apiCallPosters = async () => {
28    try {
29      setLoading(true);
30      const result = await axios(
31        `https://kinosakartvelo.ge/admin-panel/api/v1/sessions`
32      );
33      setSessionData(result.data.data);
34      setLoading(false);
35    } catch (error) {
36      setLoading(false);
37      console.log(error);
38    }
39  };
40
41  const activeBtnHandler = (index, time) => {
42    setActiveBtn(index);
43    setChosenTime(time);
44    if (activeBtn === index) {
45      setActiveBtn("");
46      setChosenTime("");
47    }
48  };
49
50  useEffect(() => {
51    apiCallPosters();
52  }, []);
53
54  //Reset Time  when change calendar day
55  useEffect(() => {
56    setChosenTime("");
57  }, [startDate]);
58
59  //Get item from Navigation
60  let item = navigation.getParam("item");
61
62  return (
63    <>
64      {loading && <Spinner />}
65      {!loading && (
66        <SafeAreaView>
67          <ScrollView>
68            <View style={styles.container}>
69              <Image
70                style={styles.Image}
71                source={{
72                  uri: `https://kinosakartvelo.ge/admin-panel/images/posters/${item.imgLandscape}`,
73                }}
74              />
75            </View>
76            <View>
77              <Text style={styles.genreCont}>
78                {item.Genre.map((genre) => genre + ", ")}
79              </Text>
80            </View>
81            <View>
82              <View style={styles.imdbCont}>
83                <Text style={styles.genre}>
84                  {item.GEO.title.slice(0, 15)}...
85                </Text>
86                <Text style={styles.imdb}>
87                  <Ionicons name="play" size={32} color="orange" /> {item.IMDB}
88                  IMDB
89                </Text>
90              </View>
91              <Text style={styles.description}>{item.GEO.description}</Text>
92            </View>
93
94            <Calendar startDate={startDate} setStartDate={setStartDate} />
95
96            <View>
97              <View
98                style={{
99                  display: "flex",
100                  flexWrap: "wrap",
101                  flexDirection: "row",
102                  justifyContent: "flex-start",
103                  alignItems: "flex-start",
104                  marginVertical: 20,
105                }}
106              >
107                {sessionData.Time !== "" ? (
108                  sessionData.map((session, index) => {
109                    if (
110                      session.Date ===
111                      moment(startDate).utc().local().format("DD.MM.YYYY")
112                    ) {
113                      return (
114                        <SafeAreaView
115                          style={styles.btnContainer}
116                          key={session.Sessions_ID}
117                        >
118                          <View style={styles.timeBtn}>
119                            <Button
120                              onPress={activeBtnHandler.bind(
121                                null,
122                                index,
123                                session.Time
124                              )}
125                              color={activeBtn === index ? "red" : null}
126                              title={session.Time}
127                            />
128                          </View>
129                        </SafeAreaView>
130                      );
131                    }
132                  })
133                ) : (
134                  <Text>No Movie</Text>
135                )}
136              </View>
137
138              <Text>არჩეული დრო: {chosenTime}</Text>
139            </View>
140            <View style={{ marginTop: 10 }}>
141              <Button
142                disabled={chosenTime ? false : true}
143                onPress={() =>
144                  navigation.navigate("Hall", {
145                    time: chosenTime,
146                    date: startDate,
147                  })
148                }
149                title="Next"
150              />
151            </View>
152          </ScrollView>
153        </SafeAreaView>
154      )}
155    </>
156  );
157};
158
159const styles = StyleSheet.create({
160  container: {
161    alignItems: "center",
162  },
163  Image: {
164    marginTop: -70,
165    width: 400,
166    height: 350,
167    borderRadius: 5,
168    resizeMode: "contain",
169  },
170  genreCont: {
171    paddingLeft: 10,
172  },
173  genre: {
174    fontSize: 21,
175    fontWeight: "bold",
176    paddingLeft: 10,
177  },
178  imdbCont: {
179    marginTop: 10,
180    width: screenWidth,
181    flex: 1,
182    flexDirection: "row",
183    justifyContent: "space-between",
184  },
185
186  imdb: {
187    fontSize: 21,
188    alignItems: "center",
189    justifyContent: "center",
190    paddingRight: 10,
191  },
192  description: {
193    textAlign: "center",
194    paddingHorizontal: 20,
195    marginTop: 15,
196    fontSize: 15,
197  },
198  btnContainer: {
199    padding: 5,
200  },
201  btnActive: {
202    backgroundColor: "red",
203  },
204  timeBtn: {
205    flexShrink: 1,
206    width: 70,
207  },
208});
209
210MovieFullDesc.navigationOptions = ({ navigation }) => {
211  let item = navigation.getParam("item");
212  return {
213    headerTitle: item.GEO.title,
214  };
215};
216
217export default MovieFullDesc;
218
Full Screen

MovieListFull.js

Source: MovieListFull.js Github

copy
1import React, { useEffect, useState } from 'react';
2import DatePicker from 'react-datepicker';
3import 'react-datepicker/dist/react-datepicker.css';
4import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
6import SearchBar from './SearchBar/SearchBar';
7import Loader from '../Loader/Loader';
8import MovieListSingle from './MovieListSingle/MovieListSingle';
9import $ from 'jquery';
10import jQuery from 'jquery';
11import starOn from '../../images/rate/star-on.svg';
12import starOff from '../../images/rate/star-off.svg';
13import { useTranslation } from 'react-i18next';
14import axios from 'axios';
15
16const MovieListFull = ({ language="Georgia", getStartDateFromMovieList, getMovieId }) => {
17  const [startDate, setStartDate] = useState(new Date());
18  const [searchTerm, setSearchTerm] = useState('');
19  const [movieListData, setMovieListData] = useState([]);
20  const [loading, setLoading] = useState(false);
21  const [selectValue, setSelectValue] = useState(''); //ჟანრები
22  const [sessionData, setSessionData] = useState([]);
23  const [backUpMovies, setBackUpMovies] = useState([]);
24  const [filteredResults, setFilteredResults] = useState([]);
25  const { t } = useTranslation();
26
27  const selectHandle = (e) => {
28    setSelectValue(e.target.value);
29  };
30
31  // send startDate to MovieFull component
32  useEffect(() => {
33    getStartDateFromMovieList(startDate);
34  }, [startDate]);
35
36  //ჟანრების ასარჩევი ფუნქცია
37  const handleChange = (e) => {
38    setSearchTerm(e.target.value);
39  };
40
41  //ყველა ფილმის რექვესთი
42  const apiCallMovieList = async () => {
43    try {
44      setLoading(true);
45      const result = await axios(
46        `https://kinosakartvelo.ge/admin-panel/api/v1/posters`
47      );
48
49      setMovieListData(result.data.data);
50      setBackUpMovies(result.data.data);
51      setStartDate(new Date());
52      setLoading(false);
53    } catch (error) {
54      setLoading(false);
55      console.log(error);
56    }
57  };
58
59  // imdb request
60  const apiCallIMDB = async () => {
61    try {
62      setLoading(true);
63      const result = await axios(
64        `https://kinosakartvelo.ge/admin-panel/api/v1/posters?IMDB[gt]=5`
65      );
66      setMovieListData(result.data.data);
67
68      setLoading(false);
69    } catch (error) {
70      setLoading(false);
71      console.log(error);
72    }
73  };
74
75  //კალენდარის თარიღის მიხედვით ფილმები
76  useEffect(() => {
77    setFilteredResults(
78      sessionData.filter(
79        (session) =>
80          session.Date ===
81          startDate
82            .toLocaleString('en-GB', { hour12: false })
83            .slice(0, 10)
84            .split('/')
85            .join('.')
86      )
87    );
88    {
89    }
90  }, [startDate, sessionData]);
91
92  //სესსიის რექვესთი
93  const apiCallSessions = async () => {
94    try {
95      setLoading(true);
96      const result = await axios(
97        `https://kinosakartvelo.ge/admin-panel/api/v1/sessions`
98      );
99      setSessionData(result.data.data);
100      setStartDate(new Date());
101      setLoading(false);
102    } catch (error) {
103      setLoading(false);
104      console.log(error);
105    }
106  };
107
108  useEffect(() => {
109    apiCallMovieList();
110    apiCallSessions();
111  }, []);
112
113  useEffect(() => {
114    apiCallMovieList();
115  }, [selectValue == 'All']);
116
117  //Filter Functions
118
119  const allMovies = () => {
120    setMovieListData(backUpMovies);
121  };
122
123  //ჟანრების მიხედვით ფილტრაცია
124  useEffect(() => {
125    let newArr = backUpMovies.filter((movie) => {
126      return movie.Genre.filter((genre) => genre == selectValue) == selectValue;
127    });
128
129    setMovieListData(newArr);
130  }, [selectValue]);
131
132  //ფილტრი, ფილმის სტატუსის მიხედვით: "პრემიერა"
133  const premiereFilter = () => {
134    let newArr = backUpMovies.filter((item) => {
135      return item.movieStatus === 'premiera';
136    });
137    setMovieListData(newArr);
138  };
139
140  //ფილტრი, ფილმის სტატუსის მიხედვით: "ახლა კინოში"
141  const nowInCinema = () => {
142    setMovieListData(backUpMovies.filter((item) => item.movieStatus === 'now'));
143  };
144
145  //ფილტრი, ფილმის სტატუსის მიხედვით: "მალე კინოში"
146  const comingSoon = () => {
147    setMovieListData(
148      backUpMovies.filter((item) => item.movieStatus === 'soon')
149    );
150  };
151
152  //ფილმების ძებნა
153
154  useEffect(() => {
155    const results = backUpMovies.filter((person) =>
156      language === 'Georgia'
157        ? person.GEO.title.toLowerCase().includes(searchTerm)
158        : language === 'United_Kingdom'
159        ? person.EN.title.toLowerCase().includes(searchTerm)
160        : person.RU.title.toLowerCase().includes(searchTerm)
161    );
162    setMovieListData(results);
163  }, [searchTerm]);
164
165  // **** jQuery ****
166
167  useEffect(() => {
168    /*  jQuery Raty - A Star Rating Plugin  */
169    (function ($) {
170      var methods = {
171        init: function (settings) {
172          return this.each(function () {
173            methods.destroy.call(this);
174
175            this.opt = $.extend(true, {}, $.fn.raty.defaults, settings);
176
177            var that = $(this),
178              inits = ['number', 'readOnly', 'score', 'scoreName'];
179
180            methods._callback.call(this, inits);
181
182            if (this.opt.precision) {
183              methods._adjustPrecision.call(this);
184            }
185
186            this.opt.number = methods._between(
187              this.opt.number,
188              0,
189              this.opt.numberMax
190            );
191
192            this.opt.path = this.opt.path || '';
193
194            if (
195              this.opt.path &&
196              this.opt.path.charAt(this.opt.path.length - 1) !== '/'
197            ) {
198              this.opt.path += '/';
199            }
200
201            this.stars = methods._createStars.call(this);
202            this.score = methods._createScore.call(this);
203
204            methods._apply.call(this, this.opt.score);
205
206            var space = this.opt.space ? 4 : 0,
207              width =
208                this.opt.width ||
209                this.opt.number * this.opt.size + this.opt.number * space;
210
211            if (this.opt.cancel) {
212              this.cancel = methods._createCancel.call(this);
213
214              width += this.opt.size + space;
215            }
216
217            if (this.opt.readOnly) {
218              methods._lock.call(this);
219            } else {
220              that.css('cursor', 'pointer');
221              methods._binds.call(this);
222            }
223
224            if (this.opt.width !== false) {
225              that.css('width', width);
226            }
227
228            methods._target.call(this, this.opt.score);
229
230            that.data({ settings: this.opt, raty: true });
231          });
232        },
233        _adjustPrecision: function () {
234          this.opt.targetType = 'score';
235          this.opt.half = true;
236        },
237        _apply: function (score) {
238          if (score && score > 0) {
239            score = methods._between(score, 0, this.opt.number);
240            this.score.val(score);
241          }
242
243          methods._fill.call(this, score);
244
245          if (score) {
246            methods._roundStars.call(this, score);
247          }
248        },
249        _between: function (value, min, max) {
250          return Math.min(Math.max(parseFloat(value), min), max);
251        },
252        _binds: function () {
253          if (this.cancel) {
254            methods._bindCancel.call(this);
255          }
256
257          methods._bindClick.call(this);
258          methods._bindOut.call(this);
259          methods._bindOver.call(this);
260        },
261        _bindCancel: function () {
262          methods._bindClickCancel.call(this);
263          methods._bindOutCancel.call(this);
264          methods._bindOverCancel.call(this);
265        },
266        _bindClick: function () {
267          var self = this,
268            that = $(self);
269
270          self.stars.on('click.raty', function (evt) {
271            self.score.val(
272              self.opt.half || self.opt.precision
273                ? that.data('score')
274                : this.alt
275            );
276
277            if (self.opt.click) {
278              self.opt.click.call(self, parseFloat(self.score.val()), evt);
279            }
280          });
281        },
282        _bindClickCancel: function () {
283          var self = this;
284
285          self.cancel.on('click.raty', function (evt) {
286            self.score.removeAttr('value');
287
288            if (self.opt.click) {
289              self.opt.click.call(self, null, evt);
290            }
291          });
292        },
293        _bindOut: function () {
294          var self = this;
295
296          $(this).on('mouseleave.raty', function (evt) {
297            var score = parseFloat(self.score.val()) || undefined;
298
299            methods._apply.call(self, score);
300            methods._target.call(self, score, evt);
301
302            if (self.opt.mouseout) {
303              self.opt.mouseout.call(self, score, evt);
304            }
305          });
306        },
307        _bindOutCancel: function () {
308          var self = this;
309
310          self.cancel.on('mouseleave.raty', function (evt) {
311            $(this).attr('src', self.opt.path + self.opt.cancelOff);
312
313            if (self.opt.mouseout) {
314              self.opt.mouseout.call(self, self.score.val() || null, evt);
315            }
316          });
317        },
318        _bindOverCancel: function () {
319          var self = this;
320
321          self.cancel.on('mouseover.raty', function (evt) {
322            $(this).attr('src', self.opt.path + self.opt.cancelOn);
323
324            self.stars.attr('src', self.opt.path + self.opt.starOff);
325
326            methods._target.call(self, null, evt);
327
328            if (self.opt.mouseover) {
329              self.opt.mouseover.call(self, null);
330            }
331          });
332        },
333        _bindOver: function () {
334          var self = this,
335            that = $(self),
336            action = self.opt.half ? 'mousemove.raty' : 'mouseover.raty';
337
338          self.stars.on(action, function (evt) {
339            var score = parseInt(this.alt, 10);
340
341            if (self.opt.half) {
342              var position = parseFloat(
343                  (evt.pageX - $(this).offset().left) / self.opt.size
344                ),
345                plus = position > 0.5 ? 1 : 0.5;
346
347              score = score - 1 + plus;
348
349              methods._fill.call(self, score);
350
351              if (self.opt.precision) {
352                score = score - plus + position;
353              }
354
355              methods._roundStars.call(self, score);
356
357              that.data('score', score);
358            } else {
359              methods._fill.call(self, score);
360            }
361
362            methods._target.call(self, score, evt);
363
364            if (self.opt.mouseover) {
365              self.opt.mouseover.call(self, score, evt);
366            }
367          });
368        },
369        _callback: function (options) {
370          for (var i in options) {
371            if (typeof this.opt[options[i]] === 'function') {
372              this.opt[options[i]] = this.opt[options[i]].call(this);
373            }
374          }
375        },
376        _createCancel: function () {
377          var that = $(this),
378            icon = this.opt.path + this.opt.cancelOff,
379            cancel = $('<img />', {
380              src: icon,
381              alt: 'x',
382              title: this.opt.cancelHint,
383              class: 'raty-cancel',
384            });
385
386          if (this.opt.cancelPlace == 'left') {
387            that.prepend('&#160;').prepend(cancel);
388          } else {
389            that.append('&#160;').append(cancel);
390          }
391
392          return cancel;
393        },
394        _createScore: function () {
395          return $('<input />', {
396            type: 'hidden',
397            name: this.opt.scoreName,
398          }).appendTo(this);
399        },
400        _createStars: function () {
401          var that = $(this);
402
403          for (var i = 1; i <= this.opt.number; i++) {
404            var title = methods._getHint.call(this, i),
405              icon =
406                this.opt.score && this.opt.score >= i ? 'starOn' : 'starOff';
407
408            icon = this.opt.path + this.opt[icon];
409
410            $('<img />', { src: icon, alt: i, title: title }).appendTo(this);
411
412            if (this.opt.space) {
413              that.append(i < this.opt.number ? '&#160;' : '');
414            }
415          }
416
417          return that.children('img');
418        },
419        _error: function (message) {
420          $(this).html(message);
421
422          $.error(message);
423        },
424        _fill: function (score) {
425          var self = this,
426            hash = 0;
427
428          for (var i = 1; i <= self.stars.length; i++) {
429            var star = self.stars.eq(i - 1),
430              select = self.opt.single ? i == score : i <= score;
431
432            if (self.opt.iconRange && self.opt.iconRange.length > hash) {
433              var irange = self.opt.iconRange[hash],
434                on = irange.on || self.opt.starOn,
435                off = irange.off || self.opt.starOff,
436                icon = select ? on : off;
437
438              if (i <= irange.range) {
439                star.attr('src', self.opt.path + icon);
440              }
441
442              if (i == irange.range) {
443                hash++;
444              }
445            } else {
446              var icon = select ? 'starOn' : 'starOff';
447
448              star.attr('src', this.opt.path + this.opt[icon]);
449            }
450          }
451        },
452        _getHint: function (score) {
453          var hint = this.opt.hints[score - 1];
454          return hint === '' ? '' : hint || score;
455        },
456        _lock: function () {
457          var score = parseInt(this.score.val(), 10), // TODO: 3.1 >> [['1'], ['2'], ['3', '.1', '.2']]
458            hint = score
459              ? methods._getHint.call(this, score)
460              : this.opt.noRatedMsg;
461
462          $(this).data('readonly', true).css('cursor', '').attr('title', hint);
463
464          this.score.attr('readonly', 'readonly');
465          this.stars.attr('title', hint);
466
467          if (this.cancel) {
468            this.cancel.hide();
469          }
470        },
471        _roundStars: function (score) {
472          var rest = (score - Math.floor(score)).toFixed(2);
473
474          if (rest > this.opt.round.down) {
475            var icon = 'starOn'; // Up:   [x.76 .. x.99]
476
477            if (this.opt.halfShow && rest < this.opt.round.up) {
478              // Half: [x.26 .. x.75]
479              icon = 'starHalf';
480            } else if (rest < this.opt.round.full) {
481              // Down: [x.00 .. x.5]
482              icon = 'starOff';
483            }
484
485            this.stars
486              .eq(Math.ceil(score) - 1)
487              .attr('src', this.opt.path + this.opt[icon]);
488          } // Full down: [x.00 .. x.25]
489        },
490        _target: function (score, evt) {
491          if (this.opt.target) {
492            var target = $(this.opt.target);
493
494            if (target.length === 0) {
495              methods._error.call(this, 'Target selector invalid or missing!');
496            }
497
498            if (this.opt.targetFormat.indexOf('{score}') < 0) {
499              methods._error.call(this, 'Template "{score}" missing!');
500            }
501
502            var mouseover = evt && evt.type == 'mouseover';
503
504            if (score === undefined) {
505              score = this.opt.targetText;
506            } else if (score === null) {
507              score = mouseover ? this.opt.cancelHint : this.opt.targetText;
508            } else {
509              if (this.opt.targetType == 'hint') {
510                score = methods._getHint.call(this, Math.ceil(score));
511              } else if (this.opt.precision) {
512                score = parseFloat(score).toFixed(1);
513              }
514
515              if (!mouseover && !this.opt.targetKeep) {
516                score = this.opt.targetText;
517              }
518            }
519
520            if (score) {
521              score = this.opt.targetFormat
522                .toString()
523                .replace('{score}', score);
524            }
525
526            if (target.is(':input')) {
527              target.val(score);
528            } else {
529              target.html(score);
530            }
531          }
532        },
533        _unlock: function () {
534          $(this)
535            .data('readonly', false)
536            .css('cursor', 'pointer')
537            .removeAttr('title');
538
539          this.score.removeAttr('readonly', 'readonly');
540
541          for (var i = 0; i < this.opt.number; i++) {
542            this.stars.eq(i).attr('title', methods._getHint.call(this, i + 1));
543          }
544
545          if (this.cancel) {
546            this.cancel.css('display', '');
547          }
548        },
549        cancel: function (click) {
550          return this.each(function () {
551            if ($(this).data('readonly') !== true) {
552              methods[click ? 'click' : 'score'].call(this, null);
553              this.score.removeAttr('value');
554            }
555          });
556        },
557        click: function (score) {
558          return $(this).each(function () {
559            if ($(this).data('readonly') !== true) {
560              methods._apply.call(this, score);
561
562              if (!this.opt.click) {
563                methods._error.call(
564                  this,
565                  'You must add the "click: function(score, evt) { }" callback.'
566                );
567              }
568
569              this.opt.click.call(this, score, $.Event('click'));
570
571              methods._target.call(this, score);
572            }
573          });
574        },
575        destroy: function () {
576          return $(this).each(function () {
577            var that = $(this),
578              raw = that.data('raw');
579
580            if (raw) {
581              that
582                .off('.raty')
583                .empty()
584                .css({ cursor: raw.style.cursor, width: raw.style.width })
585                .removeData('readonly');
586            } else {
587              that.data('raw', that.clone()[0]);
588            }
589          });
590        },
591        getScore: function () {
592          var score = [],
593            value;
594
595          $(this).each(function () {
596            value = this.score.val();
597
598            score.push(value ? parseFloat(value) : undefined);
599          });
600
601          return score.length > 1 ? score : score[0];
602        },
603        readOnly: function (readonly) {
604          return this.each(function () {
605            var that = $(this);
606
607            if (that.data('readonly') !== readonly) {
608              if (readonly) {
609                that.off('.raty').children('img').off('.raty');
610
611                methods._lock.call(this);
612              } else {
613                methods._binds.call(this);
614                methods._unlock.call(this);
615              }
616
617              that.data('readonly', readonly);
618            }
619          });
620        },
621        reload: function () {
622          return methods.set.call(this, {});
623        },
624        score: function () {
625          return arguments.length
626            ? methods.setScore.apply(this, arguments)
627            : methods.getScore.call(this);
628        },
629        set: function (settings) {
630          return this.each(function () {
631            var that = $(this),
632              actual = that.data('settings'),
633              news = $.extend({}, actual, settings);
634
635            that.raty(news);
636          });
637        },
638        setScore: function (score) {
639          return $(this).each(function () {
640            if ($(this).data('readonly') !== true) {
641              methods._apply.call(this, score);
642              methods._target.call(this, score);
643            }
644          });
645        },
646      };
647
648      $.fn.raty = function (method) {
649        if (methods[method]) {
650          return methods[method].apply(
651            this,
652            Array.prototype.slice.call(arguments, 1)
653          );
654        } else if (typeof method === 'object' || !method) {
655          return methods.init.apply(this, arguments);
656        } else {
657          $.error('Method ' + method + ' does not exist!');
658        }
659      };
660
661      $.fn.raty.defaults = {
662        cancel: false,
663        cancelHint: 'Cancel this rating!',
664        cancelOff: 'cancel-off.png',
665        cancelOn: 'cancel-on.png',
666        cancelPlace: 'left',
667        click: undefined,
668        half: false,
669        halfShow: true,
670        hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
671        iconRange: undefined,
672        mouseout: undefined,
673        mouseover: undefined,
674        noRatedMsg: 'Not rated yet!',
675        number: 5,
676        numberMax: 20,
677        path: '',
678        precision: false,
679        readOnly: false,
680        round: { down: 0.25, full: 0.6, up: 0.76 },
681        score: undefined,
682        scoreName: 'score',
683        single: false,
684        size: 16,
685        space: true,
686        starHalf: 'star-half.png',
687        starOff: 'star-off.png',
688        starOn: 'star-on.png',
689        target: undefined,
690        targetFormat: '{score}',
691        targetKeep: false,
692        targetText: '',
693        targetType: 'hint',
694        width: undefined,
695      };
696    })(jQuery);
697  }, [movieListData, filteredResults]);
698
699  useEffect(() => {
700    //3. Rating scrore init
701    //Rating star
702    $('.score').raty({
703      width: 130,
704      score: 0,
705      starOff: starOff,
706      starOn: starOn,
707    });
708
709    //4. Sorting by category
710    // sorting function
711    $('.tags__item').click(function (e) {
712      //prevent the default behaviour of the link
713      e.preventDefault();
714
715      //active sorted item
716      $('.tags__item').removeClass('item-active');
717      $(this).addClass('item-active');
718
719      var filter = $(this).attr('data-filter');
720
721      //show all the list items(this is needed to get the hidden ones shown)
722      $('.movie--preview').show();
723      $('.pagination').show();
724
725      /*using the :not attribute and the filter class in it we are selecting
726                              only the list items that don't have that class and hide them '*/
727      if (filter.toLowerCase() !== 'all') {
728        $('.movie--preview:not(.' + filter + ')').hide();
729        //Show pagination on filter = all;
730        $('.pagination').hide();
731      }
732    });
733
734    //5. Toggle function for additional content
735    //toggle timetable show
736    $('.movie__show-btn').click(function (ev) {
737      ev.preventDefault();
738
739      $(this).parents('.movie--preview').find('.time-select').slideToggle(500);
740    });
741
742    $('.time-select__item').click(function () {
743      $('.time-select__item').removeClass('active');
744      $(this).addClass('active');
745    });
746  }, [filteredResults]);
747
748  // console.log(genre);
749
750  return (
751    <>
752      {loading && <Loader />}
753      <React.Fragment>
754        {/* Search bar */}
755        <SearchBar
756          handleChange={handleChange}
757          searchTerm={searchTerm}
758          setSearchTerm={setSearchTerm}
759        />
760
761        {/* Main content */}
762        <section className='container'>
763          <div className='col-sm-12'>
764            <h2 className='page-heading'>{t('movieListFull-title')}</h2>
765            <div className='select-area'>
766              <form className='select' method='get'></form>
767              {/* <i class='far fa-calendar-alt'></i> */}
768              {/* <FontAwesomeIcon icon='calendar-alt' /> */}
769              <div className='customCalendarIcon'>
770                <FontAwesomeIcon icon={faCalendarAlt} size='lg' />
771              </div>
772              {/* <div className="datepicker">
773              <span className="datepicker__marker"><i className="fa fa-calendar" />{t('movieListFull-date')}</span>
774              <input type="text" id="datepicker" defaultValue="03/10/2014" className="datepicker__input" />
775            </div> */}
776              <DatePicker
777                dateFormat='dd/MM/yyyy'
778                selected={startDate}
779                onChange={(date) => setStartDate(date)}
780                minDate={new Date()}
781                placeholderText={new Date()
782                  .toLocaleString('en-GB', { hour12: false })
783                  .slice(0, 10)
784                  .split('-')
785                  .reverse()
786                  .join('/')}
787              />
788
789              <div className='genres-on-movieList'>
790                {t('movieListFull-genre')}:
791              </div>
792              <form className='select select--film-category'>
793                <select
794                  onChange={(e) => selectHandle(e)}
795                  name='select_item'
796                  className='select__sort'>
797                  <option value='All'>{t('All')}</option>
798                  <option value='Animation'>{t('Animation')}</option>
799                  <option value='Biography'>{t('Biography')}</option>
800                  <option value='Crime'>{t('Crime')}</option>
801                  <option value='Documentary'>{t('Documentary')}</option>
802                  <option value='Drama'>{t('Drama')}</option>
803                  <option value='Adult'>{t('Adult')}</option>
804                  <option value='Western'>{t('Western')}</option>
805                  <option value='History'>{t('History')}</option>
806                  <option value='Comedy'>{t('Comedy')}</option>
807                  <option value='Romance'>{t('Romance')}</option>
808                  <option value='Musical'>{t('Musical')}</option>
809                  <option value='Short'>{t('Short')}</option>
810                  <option value='Mystery'>{t('Mystery')}</option>
811                  <option value='Music'>{t('Music')}</option>
812                  <option value='Action'>{t('Action')}</option>
813                  <option value='War'>{t('War')}</option>
814                  <option value='Family'>{t('Family')}</option>
815                  <option value='Horror'>{t('Horror')}</option>
816                  <option value='TVSeries'>{t('TVSeries')}</option>
817                  <option value='Sport'>{t('Sport')}</option>
818                  <option value='Thriller'>{t('Thriller')}</option>
819                  <option value='Fantasy'>{t('Fantasy')}</option>
820                  <option value='Anime'>{t('Anime')}</option>
821                </select>
822              </form>
823            </div>
824
825            <div className='tags-area'>
826              <div className='tags tags--unmarked'>
827                <span className='tags__label'>{t('movieListFull-sort')}:</span>
828                <ul>
829                  <li className='item-wrap'>
830                    <a
831                      onClick={allMovies}
832                      href='#'
833                      className='tags__item item-active'
834                      data-filter='all'>
835                      {t('movieListFull-li1')}
836                    </a>
837                  </li>
838                  <li className='item-wrap' onClick={() => apiCallIMDB()}>
839                    <a href='#' className='tags__item' data-filter='release'>
840                      {t('movieListFull-li2')}
841                    </a>
842                  </li>
843                  <li className='item-wrap' onClick={premiereFilter}>
844                    <a href='#' className='tags__item' data-filter='popularity'>
845                      {t('movieListFull-li3')}
846                    </a>
847                  </li>
848                  <li className='item-wrap' onClick={nowInCinema}>
849                    <a href='#' className='tags__item' data-filter='comments'>
850                      {t('movieListFull-li4')}
851                    </a>
852                  </li>
853                  <li className='item-wrap' onClick={comingSoon}>
854                    <a href='#' className='tags__item' data-filter='ending'>
855                      {t('movieListFull-li5')}
856                    </a>
857                  </li>
858                </ul>
859              </div>
860            </div>
861            {/* Movie preview item */}
862
863            {movieListData.length > 0 && filteredResults.length > 0 ? (
864              movieListData
865                .filter((item) =>
866                  filteredResults.find((item2) => {
867                    return item2.Movie_ID == item.movieID;
868                  })
869                )
870                .map((item) => {
871                  return (
872                    <li key={item.id}>
873                      <div className='movie some movie--full  movie--preview--new'>
874                        <MovieListSingle
875                          item={item}
876                          language={language}
877                          getMovieId={getMovieId}
878                        />
879                      </div>
880                    </li>
881                  );
882                })
883            ) : (
884              <h1 className='noMovie'>{t('movieNotFound')}</h1>
885            )}
886          </div>
887        </section>
888      </React.Fragment>
889    </>
890  );
891};
892
893export default MovieListFull;
894
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)