Untitled

import React, {useState} from 'react';
import {FlatList, ScrollView, View, Text, Image} from 'react-native';
import {movieData} from '../data/MovieData';
import {styles} from '../styles/main';
import {Icon} from 'react-native-elements';
import {MovieComponentsHorizontal} from '../components/MovieComponentsHorizontal';
export default function HomeScreenJSX() {
  const [rating, setRating] = useState([]);
  const [viewer, setViewer] = useState([]);
  function compareRating(a, b) {
    const ratingA = a.rating;
    const ratingB = b.rating;
    if (ratingA > ratingB) {
      return -1;
    } else if (ratingA < ratingB) {
      return 1;
    } else {
      return 0;
    }
  }
  function compareViewers(a, b) {
    const viewersA = a.viewers;
    const viewersB = b.viewers;

    if (viewersA > viewersB) {
      return -1;
    } else if (viewersA < viewersB) {
      return 1;
    } else {
      return 0;
    }
  }
  useState(() => {
    const sortedRating = [...movieData].sort(compareRating);
    const sortedViewer = [...movieData].sort(compareViewers);

    setRating(sortedRating);
    setViewer(sortedViewer);
  }, [movieData]);
  return (
    <View style={{flex: 1}}>
      <FlatList
        data={rating}
        keyExtractor={item => item.id}
        contentContainerStyle={{padding: 8, margin: 10}}
        scrollEnabled={true}
        renderItem={({item}) => {
          return (
            <View style={styles.dataContainer}>
              <Image
                style={styles.movieImageVertical}
                source={{uri: item.imageLink}}
              />
              <View
                style={[
                  styles.flatListContainer,
                  // {
                  //   backgroundColor:
                  //     item.rating === 3
                  //       ? 'red'
                  //       : item.rating === 4
                  //       ? 'blue'
                  //       : item.rating === 5
                  //       ? 'green'
                  //       : null,
                  // },
                ]}>
                <Text style={styles.textTitle}>✏️{item.title}</Text>
                <Text style={styles.textTitle}>📅{item.year}</Text>
                <Text>
                  👑
                  {item.rating === 5 ? (
                    <Image
                      source={require('../assets/images/five-stars.png')}
                      style={styles.ratingImage}
                    />
                  ) : item.rating === 4 ? (
                    <Image
                      source={require('../assets/images/four-stars.png')}
                      style={styles.ratingImage}
                    />
                  ) : item.rating === 3 ? (
                    <Image
                      source={require('../assets/images/three-stars.png')}
                      style={styles.ratingImage}
                    />
                  ) : item.rating === 2 ? (
                    <Image
                      source={require('../assets/images/two-stars.png')}
                      style={styles.ratingImage}
                    />
                  ) : (
                    <Image
                      source={require('../assets/images/star.png')}
                      style={styles.ratingImage}
                    />
                  )}
                </Text>
              </View>
            </View>
          );
        }}
        ListHeaderComponent={
          <View>
            <View style={styles.mainCategoryContainer}>
              <View style={styles.categoryContainer}>
                <Text style={styles.categoryText}>Most Viewed</Text>
              </View>
            </View>
            <FlatList
              horizontal
              data={viewer}
              keyExtractor={item => item.id}
              renderItem={({item}) => {
                return (
                  <MovieComponentsHorizontal
                    image={item.imageLink}
                    title={item.title}
                    viewers={item.viewers}
                  />
                );
              }}
            />
            <View style={styles.mainCategoryContainer}>
              <View style={styles.categoryContainer}>
                <Text style={styles.categoryText}>Recommend</Text>
              </View>
            </View>
          </View>
        }
        ListFooterComponent={
          <View>
            <Text>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo qui
              velit corporis ex omnis earum magni repellendus fugiat nihil, nisi
              in modi expedita consectetur minima rem optio consequatur pariatur
              recusandae?
            </Text>
          </View>
        }
      />
    </View>
  );
}