Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atiladefreitas/blog-app-react-native
https://github.com/atiladefreitas/blog-app-react-native
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/atiladefreitas/blog-app-react-native
- Owner: atiladefreitas
- Created: 2022-06-14T17:30:40.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-22T00:53:09.000Z (over 2 years ago)
- Last Synced: 2023-03-05T07:24:50.370Z (almost 2 years ago)
- Language: TypeScript
- Size: 1.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Blog App
An awesome React Native project: by Átila de Freitas
Table of Contents
## About The Project
Application developed in React Native focusing on the use of the Styled Components library to create visual components, as well as consume external API and add new functionality with state manipulation.
The application was build in Expo CLI for some reasons. The fast enviroment building and setting up is one of them.
In this application you can:
- Search for a specific title or post's body content;
- Delete a post;
- Favorite a post;
### Built With
- [React Native](https://reactnative.dev/)
- [Expo CLI](https://docs.expo.dev/workflow/expo-cli/)
- [Styled Components](https://styled-components.com/)
## Getting Started
### Prerequisites
For run the application you need the following tools:
- npm
```sh
npm install npm@latest -g
```
- Expo
```sh
npm install -g expo-cli
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/atiladefreitas/blog-rn.git
```
2. Install NPM packages
```sh
npm install
```
or
```sh
yarn install
```
## Usage & Function walkthrough
This application was developed for study and contains some simple features of interaction with the API.
- Fetching data from API
_For this, useEffect Hook was used and an new state was created in `newPosts`, working like an local storage_
```javascript
useEffect(() => {
const fetchPosts = () => {
fetch(`${apiURL}/posts`)
.then((response) => response.json())
.then((json) => {
const newPosts = [
...json.map((post: any) => {
return {
id: post.id,
body: post.body,
title: post.title,
userId: post.userId,
favorite: false,
};
}),
];
setOriginalData(newPosts);
setPosts(newPosts);
});
};
fetchPosts();
}, []);
```
- Deleting Post
_The API being consumed is an Fake API, so, all `DELETE` requisition will return `error 200`, for handle with this, I created an simple `if else` statement for deleted the specific post localy_
```javascript
const handleDeletePost = async (id: any) => {
await fetch(`${apiURL}/posts/${id}`, {
method: "DELETE",
})
.then((response) => {
if (response.status !== 200) {
return;
} else {
setPosts(
posts.filter((post) => {
return post.id !== id;
})
);
}
})
.catch((error) => {
console.log(error.message);
});
};
```
## Contact
