Enable favouriting statuses

This commit is contained in:
Nat 2021-05-22 11:26:10 -03:00
parent 05981e9711
commit 1cc44eae7f
3 changed files with 101 additions and 40 deletions

View File

@ -4,17 +4,17 @@ import {
Text,
View,
Dimensions,
TouchableWithoutFeedback
TouchableOpacity
} from "react-native";
import { activeOrNot } from "src/interface/interactions";
const PostActionJsx = (props) => {
return (
<TouchableWithoutFeedback
onPress = { props.callback }>
<TouchableOpacity
onPress = { props.onPress }>
<Image
source = {
activeOrNot(props.state[props.field], props.pack)
activeOrNot(props.active, props.pack)
}
style = {
[
@ -22,18 +22,11 @@ const PostActionJsx = (props) => {
props.last ? styles.lastIcon : {}
]
} />
</TouchableWithoutFeedback>
</TouchableOpacity>
)
}
const PostActionBarJsx = (props) => {
let [state, setState] = useState({
favourited: props.favourited,
commenting: false,
reblogged: props.reblogged,
bookmarked: false
});
const icons = {
heart: {
active: require("assets/eva-icons/post-actions/heart-active.png"),
@ -53,33 +46,21 @@ const PostActionBarJsx = (props) => {
<PostActionJsx
field = "favourited"
pack = { icons.heart }
state = { state }
callback = {
() => {
setState({ ...state, favourited: !state.favourited });
}
} />
active = { props.favourited }
onPress = { props.onFavourite } />
<PostActionJsx
field = "reblogged"
pack = { icons.reblog }
state = { state }
callback = {
() => {
setState({ ...state, reblogged: !state.reblogged });
}
} />
reblogged = { props.reblogged }
onPress = { props.onReblog }/>
<PostActionJsx
field = "bookmarked"
pack = { icons.bookmark }
last = { true }
state = { state }
callback = {
() => {
setState({ ...state, bookmarked: !state.bookmarked });
}
} />
bookmarked = { props.bookmarked }
onPress = { props.onBookmark } />
</View>
)
}

View File

@ -8,7 +8,10 @@ import {
ScrollView,
} from "react-native";
import { pluralize, timeToAge} from "src/interface/rendering"
import { pluralize, timeToAge } from "src/interface/rendering"
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as requests from "src/requests";
import PostActionBarJsx from "src/components/posts/post-action-bar";
@ -46,6 +49,20 @@ function getDimensionsPromises(uris) {
}));
}
function handleFavouriteFactory(state, setState) {
return async () => {
const newStatus = await requests.favouriteStatus(
state.instance,
state.data.id,
state.accessToken
);
setState({...state,
data: newStatus,
});
};
}
const PostImageJsx = (props) => {
return <Image
source = { { uri: props.uri } }
@ -54,7 +71,6 @@ const PostImageJsx = (props) => {
flex: 1,
width: SCREEN_WIDTH,
height: getAutoHeight(props.width, props.height, SCREEN_WIDTH),
// objectFit: "cover"
}
} />
};
@ -120,7 +136,10 @@ export const RawPostJsx = (props) => {
}
<PostActionBarJsx
favourited = { props.data.favourited }
reblogged = { props.data.reblogged } />
reblogged = { props.data.reblogged }
bookmarked = { false }
onFavourite = { props.onFavourite }
onBookmark = { props.onBookmark } />
<View style = { styles.caption }>
<Text>
<Text style = { styles.strong }>
@ -156,25 +175,65 @@ export const PostByDataJsx = (props) => {
let [state, setState] = useState({
loaded: false,
data: props.data,
dimensions: []
});
useEffect(() => {
Promise.all(getDimensionsPromises(props.data.media_attachments))
.then(dimensions => {
setState({
dimensions: dimensions,
loaded: true
let instance, accessToken;
AsyncStorage
.multiGet([
"@user_instance",
"@user_token",
])
.then(([instancePair, tokenPair]) => {
instance = instancePair[1];
accessToken = JSON.parse(tokenPair[1]).access_token;
})
.then(() =>
Promise.all(
getDimensionsPromises(props.data.media_attachments)
)
)
.then(dimensions => {
setState({...state,
dimensions: dimensions,
instance,
accessToken,
loaded: true
});
});
});
}, []);
const _handleFavourite = async () => {
let newStatus;
if (!state.data.favourited) {
newStatus = await requests.favouriteStatus(
state.instance,
state.data.id,
state.accessToken
);
} else {
newStatus = await requests.unfavouriteStatus(
state.instance,
state.data.id,
state.accessToken
);
}
setState({...state,
data: newStatus,
});
};
return (
<View>
{ state.loaded ?
<RawPostJsx
data = { props.data }
data = { state.data }
dimensions = { state.dimensions }
onFavourite = { _handleFavourite }
navigation = { props.navigation }/>
: <View></View> }
</View>

View File

@ -52,6 +52,17 @@ export async function postForm(url, data, token = false) {
return resp;
}
export async function post(url, token = false) {
const resp = await fetch(url, {
method: "POST",
headers: token
? { "Authorization": `Bearer ${token}`, }
: {},
});
return resp;
}
export async function get(url, token = false, data = false) {
let completeURL;
if (data) {
@ -86,6 +97,16 @@ export async function fetchStatusContext(domain, id, token) {
return resp.json();
}
export async function favouriteStatus(domain, id, token) {
const resp = await post(`https://${domain}/api/v1/statuses/${id}/favourite`, token);
return resp.json();
}
export async function unfavouriteStatus(domain, id, token) {
const resp = await post(`https://${domain}/api/v1/statuses/${id}/unfavourite`, token);
return resp.json();
}
export async function fetchFollowing(domain, id, token) {
const resp = await get(`https://${domain}/api/v1/accounts/${id}/following`, token);
return resp.json();