Use useReducer to forceUpdate the view when Whiskies deep object changes
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
parent
e6616356a2
commit
7377c316db
@ -1,5 +1,5 @@
|
|||||||
import { StatusBar } from 'expo-status-bar';
|
import { StatusBar } from 'expo-status-bar';
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useReducer } from 'react';
|
||||||
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||||
import { request, GraphQLClient, gql } from 'graphql-request';
|
import { request, GraphQLClient, gql } from 'graphql-request';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
@ -90,8 +90,54 @@ export default function App() {
|
|||||||
[lastSearch, setLastSearch] = useState<string>(""),
|
[lastSearch, setLastSearch] = useState<string>(""),
|
||||||
[activeWhisky, setActiveWhisky] = useState<string>("");
|
[activeWhisky, setActiveWhisky] = useState<string>("");
|
||||||
|
|
||||||
|
const [, forceUpdate] = useReducer(x => x + 1, 0);
|
||||||
|
|
||||||
|
const updateWhisky = (code : string) => {
|
||||||
|
const query = gql` {
|
||||||
|
Whisky(code: "${code}") {
|
||||||
|
inventories {
|
||||||
|
location {
|
||||||
|
code
|
||||||
|
address
|
||||||
|
city
|
||||||
|
phone
|
||||||
|
longitude
|
||||||
|
latitude
|
||||||
|
}
|
||||||
|
quantity
|
||||||
|
updated
|
||||||
|
}
|
||||||
|
code
|
||||||
|
size
|
||||||
|
description
|
||||||
|
updated
|
||||||
|
quantity
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
||||||
|
client.request(query)
|
||||||
|
.then(data => {
|
||||||
|
for (let i = 0; i < whiskies.length; i++) {
|
||||||
|
if (whiskies[i].code == data.Whisky.code) {
|
||||||
|
whiskies[i] = data.Whisky;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setWhiskies(whiskies);
|
||||||
|
forceUpdate();
|
||||||
|
})
|
||||||
|
.catch (error => {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const onPress = (code : string) => {
|
const onPress = (code : string) => {
|
||||||
setActiveWhisky(code == activeWhisky ? "" : code);
|
if (code == activeWhisky) {
|
||||||
|
setActiveWhisky("");
|
||||||
|
} else {
|
||||||
|
setActiveWhisky(code);
|
||||||
|
updateWhisky(code);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const items = whiskies ? whiskies
|
const items = whiskies ? whiskies
|
||||||
@ -109,28 +155,6 @@ export default function App() {
|
|||||||
);
|
);
|
||||||
}) : [];
|
}) : [];
|
||||||
|
|
||||||
const query = gql` {
|
|
||||||
Whiskies {
|
|
||||||
code
|
|
||||||
description
|
|
||||||
price
|
|
||||||
size
|
|
||||||
lastSeen
|
|
||||||
inventories {
|
|
||||||
location {
|
|
||||||
code
|
|
||||||
address
|
|
||||||
city
|
|
||||||
phone
|
|
||||||
longitude
|
|
||||||
latitude
|
|
||||||
}
|
|
||||||
quantity
|
|
||||||
updated
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}`;
|
|
||||||
|
|
||||||
const submitSearch = () => {
|
const submitSearch = () => {
|
||||||
if (search.trim() == "") {
|
if (search.trim() == "") {
|
||||||
setWhiskies([]);
|
setWhiskies([]);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user