Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anthhub/yew-train-ticket
my yew app using hooks
https://github.com/anthhub/yew-train-ticket
Last synced: 3 months ago
JSON representation
my yew app using hooks
- Host: GitHub
- URL: https://github.com/anthhub/yew-train-ticket
- Owner: anthhub
- License: apache-2.0
- Created: 2021-02-23T08:58:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-05T03:17:55.000Z (over 3 years ago)
- Last Synced: 2024-04-10T01:54:36.466Z (7 months ago)
- Language: Rust
- Size: 905 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-APACHE
Awesome Lists containing this project
- awesome-yew - yew-train-ticket - A Rust WebAssembly [Webapp](http://118.190.37.169:8002) example basing Yew newest hooks and functional API, the code style is extremely like React Function Component. (Projects)
README
# yew-train-ticket
A Rust WebAssembly Websit example to buy train ticket using yew hooks.
## Snapshot
You can visit in the website online [yew-train-ticket](http://118.190.37.169:8002)
## Code example
- Define Store and Action
``` rust
#[derive(Clone, Debug, PartialEq)]
pub struct StoreModel {
pub from: String,
pub to: String,
pub local_time: DateTime,
pub is_high_speed: bool,
pub date_selector_visible: bool,
pub city_selector_visible: bool,
pub is_selecting_from: bool,
}
pub enum Action {
ExchangeFromTo,
ToggleHighSpeed,
ToggleDateSelectorVisible,
ToggleCitySelectorVisible,
SelectDate(DateTime),
SelectFrom(String),
SelectTo(String),
SetIsSelectingFrom(bool),
}
```
- A simple Function Component using use_context hooks
``` rust
#[derive(Properties, Clone, PartialEq)]
pub struct Props {
pub onexchange: Callback,
pub onclickto: Callback,
pub onclickfrom: Callback,
}
#[function_component(Journey)]
pub fn journey(props: &Props) -> Html {
let ctx = use_context::>().expect("no ctx found");
let StoreModel { to, from, .. } = &**ctx;
let Props { onexchange, onclickto, onclickfrom } = &props;
return html! {
{"<>"}
};
}
```
> use_state, use_effect_with_deps, use_reducer_with_init hooks is used in other code.
- Fetch and Deserialize
``` rust
#[derive(Debug, Serialize, Deserialize)]
pub struct SearchCityResult {
pub result: Vec,
pub searchKey: String,
}
impl SearchCityResult {
pub fn new() -> SearchCityResult {
SearchCityResult {
result: vec![],
searchKey: "".to_string(),
}
}
}
#[derive(Debug, Serialize, Deserialize)]
pub struct SearchResult {
pub key: String,
pub display: String,
}
pub async fn search_city_list(search_word: String) -> SearchCityResult {
let base_url = "http://118.190.37.169:7000";
let url = format!("{}/api/search?key={}", base_url, search_word);
let json = Fetch::get(url).await;
match json {
Ok(json) => json.into_serde().unwrap(),
Err(_) => SearchCityResult::new(),
}
}
```
## Backend
The websit backend is powered by actix-web. [actix-train-ticket](https://github.com/anthhub/actix-train-ticket)
### web api
- http://118.190.37.169:7000/api/cities -- list cities of China
- http://118.190.37.169:7000/api/search?key=上海 -- list cities of China
## How to use it
```sh
npm install
```
### develop
```sh
# Builds the project and opens it in a new browser tab. Auto-reloads when the project changes.
npm start
```
### release
```sh
# Builds the project and places it into the `dist` folder.
npm run build
```