10.displayingMovies.help.md

Code generated so far

import * as React from "react";
import { View, Button, Text, FlatList, ListRenderItemInfo, Image } from "react-native";
import { NavProps } from "../helpers/alias";
import { Routes } from "../routes";
import { styles } from "../styles";
import { Movie, MovieDatabase } from "../models";

interface HomeState {
    movies: Movie[];
}

class HomeView extends React.PureComponent<NavProps, HomeState> {
    constructor(props: NavProps) {
        super(props);
        this.state = {
            movies: []
        };
    }

    public render() {
        return (
            <View style={styles.homeContainer}>
                <Text style={styles.homeText}>Home!!!</Text>
                <Button
                    onPress={this.handleTap}
                    title="Tap me up, before I go go."
                />
                <FlatList
                    style={{ flex: 1 }}
                    data={this.state.movies}
                    renderItem={this.renderMovie}
                    keyExtractor={this.getKeyForMovie}
                />
            </View>
        );
    }

    componentDidMount() {
        const config = require("../../secrets.json");

        fetch(config.urls.movies.full)
            .then(x => x.text())
            .then(x => JSON.parse(x) as MovieDatabase)
            .then(x =>
                this.setState(s => ({
                    // updating the state.
                    ...s,
                    movies: x.all
                }))
            )
            .catch(e => console.error(e));
        // that's all.
    }

    renderMovie = (x: ListRenderItemInfo<Movie>): JSX.Element => {
        return (
            <View style={{
                backgroundColor: "#cfbca6",
                borderTopLeftRadius: 16,
                borderBottomRightRadius: 16,
                minHeight: 150,
                marginVertical: 8,
                marginHorizontal: 8,
                flexDirection: "row",
                overflow: "hidden"
            }}>
                <Image source={this.database.getPosterFor(x.item)} resizeMode="cover" style={{ height: 150, width: 100 }} />
                <View style={{ height: 70, backgroundColor: "#000000aa", flex: 1, justifyContent: "center" }}>
                    <Text style={{ textAlign: "center", color: "white" }}>{x.item.title}</Text>
                </View>
            </View>
        );
    };

    getKeyForMovie = (movie: Movie, index: number) => {
        return `${movie.id}`;
    }

    handleTap = (): void => {
        this.props.navigation.push(Routes.Details);
    };
}

export { HomeView };