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