Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Inbox for Trello. A super simple React Native app: https://sourdough.dev/crafting-your-own-tools
import axios from 'axios'; // yarn add axios
import React, { useState } from 'react';
import {
View,
StatusBar,
TextInput,
ToastAndroid,
Text,
TouchableHighlight,
TouchableOpacity
} from 'react-native';
// Config Settings
const TRELLO_API_URL = 'https://api.trello.com/1';
const TRELLO_BOARD_ID = ''; // Grab the ID from your board, just add .json to the end of the URL
const TRELLO_API_KEY = '';
const TRELLO_API_TOKEN = '';
// Support LISTS
const LIST_NAME_INBOX = 'Inbox';
const LIST_NAME_THIS_WEEK = 'This Week';
const LIST_NAME_TODAY = 'Today';
const DEFAULT_LIST_NAME = LIST_NAME_INBOX;
const App = () => {
const [cardText, setCardText] = useState<string|undefined>(undefined);
const [selectedListName, setSelectedListName] = useState<string>(DEFAULT_LIST_NAME);
return (
<View style={{ backgroundColor: "black", flex: 1, flexDirection: "column" }}>
<StatusBar backgroundColor="black" barStyle="light-content" />
<View style={{ flex: 1, flexDirection: "column", paddingTop: 20, justifyContent: "space-between" }}>
<View style={{ flex: 3, flexDirection: "row" }}/>
<View style={{ flex: 1, flexDirection: "row", paddingLeft: 12, paddingTop: 10 }}>
<View style={{paddingHorizontal: 8, paddingLeft: 5}}>
<TouchableOpacity
style={{alignItems: "center"}}
onPress={() => { setSelectedListName(LIST_NAME_INBOX) }}
>
<Text style={{color: (selectedListName == LIST_NAME_INBOX ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_INBOX}</Text>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: 8}}>
<TouchableOpacity
style={{alignItems: "center"}}
onPress={() => { setSelectedListName(LIST_NAME_THIS_WEEK) }}
>
<Text style={{color: (selectedListName == LIST_NAME_THIS_WEEK ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_THIS_WEEK}</Text>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: 8}}>
<TouchableOpacity
style={{alignItems: "center"}}
onPress={() => { setSelectedListName(LIST_NAME_TODAY) }}
>
<Text style={{color: (selectedListName == LIST_NAME_TODAY ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_TODAY}</Text>
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 10, flexDirection: "row", marginTop: 2 }}>
<TextInput
style={{height: 50, fontSize: 24, color: "white", paddingLeft: 18, marginTop: 10}}
placeholder="Add a new card"
placeholderTextColor={"#717171"}
value={cardText}
onChangeText={(cardText: string) => (setCardText(cardText))}
onSubmitEditing={() => (createCard(cardText, selectedListName), setCardText(undefined), setSelectedListName(DEFAULT_LIST_NAME))}
/>
</View>
</View>
</View>
);
};
function createCard(card: string|undefined, listName: string): void {
axios.get(
`${TRELLO_API_URL}/boards/${TRELLO_BOARD_ID}?lists=open&list_fields=name&fields=name,desc&key=${TRELLO_API_KEY}&token=${TRELLO_API_TOKEN}`,
).then((response: any) => {
response.data["lists"].forEach((list: any) => {
if (list["name"] == listName) {
axios.post(`${TRELLO_API_URL}/cards`, {
"key": TRELLO_API_KEY,
"token": TRELLO_API_TOKEN,
"name": card,
"idList": list["id"]
}).then((): any => {
ToastAndroid.show(`Card added to ${listName}`, ToastAndroid.SHORT);
}).catch((): any => {
ToastAndroid.show('Unable to add card', ToastAndroid.SHORT);
})
}
});
}).catch(() => {
ToastAndroid.show('Unable to fetch Trello lists', ToastAndroid.SHORT);
})
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.