david.d_almeida
/
MovieFinder
forked from lucas.delanier/MovieFinder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redux and watch late screen

Browse Source
lucas_api
Lucas Delanier 2 years ago
parent 4ef93425cc
commit 8660bfb01d
14 changed files with 347 additions and 57 deletions
Show Stats Download Patch File Download Diff File

4
App.tsx
Unescape View File

@ -6,6 +6,8 @@ import Navigation from './navigation';
import {View, Text, ScrollView, FlatList} from "react-native";
import {useEffect, useState} from "react";
import * as React from "react";
import {Provider} from "react-redux";
import store from "./redux/store"
export default function App() {
const isLoadingComplete = useCachedResources();
@ -16,10 +18,12 @@ export default function App() {
return null;
} else {
return (
<Provider store={store}>
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
</Provider>
);
}
}

8
components/Movie.tsx
Unescape View File

@ -1,4 +1,4 @@
import apiTMBD from "../api/tmdb";
class Movie {
id: string
@ -6,16 +6,12 @@ class Movie {
poster_path: string
runtime: number
vote_average: number
director: string | undefined
constructor(id: string, original_title: string, poster_path: string, runtime: number, vote_average: number, director: string | undefined) {
constructor(id: string, original_title: string, poster_path: string, runtime: number, vote_average: number) {
this.id = id;
this.original_title = original_title;
this.poster_path = poster_path;
this.runtime = runtime;
this.vote_average = vote_average;
this.director = director;
}

2
components/MovieList.tsx
Unescape View File

@ -2,7 +2,7 @@ import {useEffect, useState} from "react";
import {FlatList, View} from "react-native";
import {ListWidget} from "./ListWidget";
import axios from "axios";
import apiTMBD from "../api/tmdb";
import apiTMBD from "../services/tmdb";
interface idMovie {

208
package-lock.json generated
Unescape View File

@ -18,6 +18,7 @@
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0",
"@reacticons/ionicons": "^6.0.4",
"@reduxjs/toolkit": "^1.9.2",
"axios": "^1.3.0",
"expo": "~47.0.12",
"expo-asset": "~8.7.0",
@ -38,6 +39,8 @@
"react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0",
"react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41"
},
"devDependencies": {
@ -5422,6 +5425,29 @@
"resolved": "https://registry.npmjs.org/@reacticons/ionicons/-/ionicons-6.0.4.tgz",
"integrity": "sha512-FN4/D6a/kS2dEMwVltAGCKiYArDESGW1fgsV2bgz2ZHFAlmBF7o2p7Ckr+clOHzIEg1odWm+gdc+DBtYc80ENQ=="
},
"node_modules/@reduxjs/toolkit": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.2.tgz",
"integrity": "sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==",
"dependencies": {
"immer": "^9.0.16",
"redux": "^4.2.0",
"redux-thunk": "^2.4.2",
"reselect": "^4.1.7"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18",
"react-redux": "^7.2.1 || ^8.0.2"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@segment/loosely-validate-event": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@ -5531,6 +5557,15 @@
"@types/node": "*"
}
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/istanbul-lib-coverage": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@ -5572,8 +5607,7 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/qs": {
"version": "6.9.7",
@ -5584,7 +5618,6 @@
"version": "18.0.27",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -5603,8 +5636,7 @@
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/stack-utils": {
"version": "2.0.1",
@ -5612,6 +5644,11 @@
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
"dev": true
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
},
"node_modules/@types/yargs": {
"version": "15.0.15",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
@ -7443,8 +7480,7 @@
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"node_modules/dag-map": {
"version": "1.0.2",
@ -9205,6 +9241,14 @@
"node": ">= 8"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hosted-git-info": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@ -9367,6 +9411,15 @@
"node": ">=4.0"
}
},
"node_modules/immer": {
"version": "9.0.19",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
"integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@ -14990,6 +15043,49 @@
"async-limiter": "~1.0.0"
}
},
"node_modules/react-redux": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
"dependencies": {
"@babel/runtime": "^7.12.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"peerDependencies": {
"@types/react": "^16.8 || ^17.0 || ^18.0",
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-redux/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/react-refresh": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@ -15192,6 +15288,22 @@
"node": ">= 4"
}
},
"node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/redux-thunk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
"integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
"peerDependencies": {
"redux": "^4"
}
},
"node_modules/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -21689,6 +21801,17 @@
"resolved": "https://registry.npmjs.org/@reacticons/ionicons/-/ionicons-6.0.4.tgz",
"integrity": "sha512-FN4/D6a/kS2dEMwVltAGCKiYArDESGW1fgsV2bgz2ZHFAlmBF7o2p7Ckr+clOHzIEg1odWm+gdc+DBtYc80ENQ=="
},
"@reduxjs/toolkit": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.2.tgz",
"integrity": "sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==",
"requires": {
"immer": "^9.0.16",
"redux": "^4.2.0",
"redux-thunk": "^2.4.2",
"reselect": "^4.1.7"
}
},
"@segment/loosely-validate-event": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@ -21795,6 +21918,15 @@
"@types/node": "*"
}
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/istanbul-lib-coverage": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@ -21836,8 +21968,7 @@
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/qs": {
"version": "6.9.7",
@ -21848,7 +21979,6 @@
"version": "18.0.27",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -21867,8 +21997,7 @@
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/stack-utils": {
"version": "2.0.1",
@ -21876,6 +22005,11 @@
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
"dev": true
},
"@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
},
"@types/yargs": {
"version": "15.0.15",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
@ -23307,8 +23441,7 @@
"csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"dag-map": {
"version": "1.0.2",
@ -24632,6 +24765,14 @@
}
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@ -24748,6 +24889,11 @@
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
"integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
},
"immer": {
"version": "9.0.19",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz",
"integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ=="
},
"import-fresh": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@ -29072,6 +29218,26 @@
"styleq": "^0.1.2"
}
},
"react-redux": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
"requires": {
"@babel/runtime": "^7.12.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"dependencies": {
"react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
}
}
},
"react-refresh": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@ -29229,6 +29395,20 @@
"tslib": "^2.0.1"
}
},
"redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"redux-thunk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
"integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
"requires": {}
},
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

3
package.json
Unescape View File

@ -23,6 +23,7 @@
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0",
"@reacticons/ionicons": "^6.0.4",
"@reduxjs/toolkit": "^1.9.2",
"axios": "^1.3.0",
"expo": "~47.0.12",
"expo-asset": "~8.7.0",
@ -43,6 +44,8 @@
"react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0",
"react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41"
},
"devDependencies": {

10
redux/actions/actionGetTrendingMovie.ts
Unescape View File

@ -0,0 +1,10 @@
import {FETCH_TRENDINGMOVIE} from '../constants';
import Movie from "../../components/Movie";
export const setTrendingMovieList = (trendingList: Movie[])=> {
return {
type: FETCH_TRENDINGMOVIE,
payload: trendingList,
};
}

1
redux/constants.ts
Unescape View File

@ -0,0 +1 @@
export const FETCH_TRENDINGMOVIE : string = "FETCH_TRENDINGMOVIE";

19
redux/reducers/appReducer.ts
Unescape View File

@ -0,0 +1,19 @@
import {FETCH_TRENDINGMOVIE} from "../constants";
const initialState = {
trendingMovies : [],
favoriteMovies : [],
watchLaterMovies : [],
}
// @ts-ignore
export default appReducer = (state = initialState, action)=> {
switch (action.type){
case FETCH_TRENDINGMOVIE:
// @ts-ignore
return {...state, trendingMovies: action.payload};
default:
return state;
}
}

0
redux/reducers/appReducers.ts
Unescape View File

0
redux/store.ts
Unescape View File

14
redux/store.tsx
Unescape View File

@ -0,0 +1,14 @@
import { configureStore } from '@reduxjs/toolkit'
import appReducer from "./reducers/appReducer";
const reducer = {
appReducer: appReducer,
}
const store= configureStore({
// @ts-ignore
reducer,
},);
export default store;

2
screens/FavoriteScreen.tsx
Unescape View File

@ -20,7 +20,7 @@ export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favor
<Image
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"stretch"}}
/>
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
<View style={{height:40, width:'90%', backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
<TextInput style={{width:'100%', height:40, marginHorizontal:20}} ></TextInput>
</View>
<FlatList

86
screens/WatchLaterScreen.tsx
Unescape View File

@ -4,11 +4,13 @@ import {BadgeFilm} from "./HomeScreen";
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
import { faClock} from "@fortawesome/free-solid-svg-icons";
import LinearGradient from 'react-native-linear-gradient';
import {RootTabScreenProps} from "../types.js";
import {RootTabScreenProps} from "../types";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useDispatch, useSelector} from "react-redux";
import {useEffect} from "react";
import {getTrendingMovieList} from "../services/api";
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
const insets = useSafeAreaInsets();
const styles = StyleSheet.create({
container: {
flex: 1,
@ -35,6 +37,23 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
},
});
// @ts-ignore
const nList = useSelector(state => state.appReducer.trendingMovies);
const dispatch = useDispatch();
useEffect(()=>{
const loadTrendingMovie = async () => {
// @ts-ignore
await dispatch(getTrendingMovieList());
};
loadTrendingMovie();
}, [dispatch]);
return (
<SafeAreaView style={styles.container}>
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
@ -45,23 +64,14 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
<Image
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"stretch"}}
/>
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
<View style={{height:40, width:'90%', backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
<TextInput style={{width:'100%', height:40, marginHorizontal:20}} ></TextInput>
</View>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
data={nList}
renderItem={({item}) => <ListWidget name={item.original_title}
imageURL={`https://image.tmdb.org/t/p/w500/${item.poster_path}`}
runtime={item.runtime} director={item.director}></ListWidget>}
/>
</SafeAreaView>
);
@ -70,13 +80,25 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
type ListWidgetProps = {
name : String
imageURL: string
name: String
runtime: number
director: string
}
export function ListWidget(props: ListWidgetProps) {
const insets = useSafeAreaInsets();
function formatTime(time: number) {
console.log(time);
const hours = Math.floor(time / 60);
const minutes = time % 60;
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
}
const styles = StyleSheet.create({
filmCard: {
width: 70,
@ -87,17 +109,35 @@ export function ListWidget(props: ListWidgetProps) {
},
});
return (
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
<View style={{
height: 100,
borderRadius: 20,
justifyContent: "flex-start",
flexDirection: 'row',
paddingHorizontal: 20,
marginVertical: 5
}}>
<Image
style={styles.filmCard}
source={{
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
uri: props.imageURL,
}}
/>
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
<Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
<Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
<View style={{marginVertical:10}}>
<View style={{
height: 100,
borderRadius: 20,
justifyContent: "flex-start",
flexDirection: 'column',
paddingLeft: 10
}}>
<Text numberOfLines={1} style={{
color: "white",
fontWeight: "bold",
fontSize: 25,
paddingRight: 50
}}>{props.name}</Text>
<Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.runtime)}</Text>
<View style={{marginVertical: 10}}>
<BadgeFilm name={"Science-Ficton"}/>
</View>
</View>

23
services/api.tsx
Unescape View File

@ -0,0 +1,23 @@
import Config from "../constants/config";
import Movie from "../components/Movie";
import {setTrendingMovieList} from "../redux/actions/actionGetTrendingMovie";
export const getTrendingMovieList = () =>{
// @ts-ignore
return async dispatch => {
try {
const trendingMoviePromise = await fetch(Config.base_url + "trending/all/day?api_key=" + Config.api_key);
const trendingListJson = await trendingMoviePromise.json();
console.log('json----------',trendingListJson);
// @ts-ignore
const trendingList: Movie[] = trendingListJson.results.map(elt => new Movie(elt["id"],elt["original_title"],elt["poster_path"], elt["runtime"],elt["vote_average"]));
dispatch(setTrendingMovieList(trendingList));
} catch (error) {
console.log('Error----------',error);
}
}
}
Write Preview
Loading…
Cancel
Save