linly/poo-stack.rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I have no idea what I'm dong

Browse Source
This commit is contained in:
LinlyBoi
2022-12-25 21:42:46 +02:00
parent cd2092a7c9
commit 3e9a85a2a7
9 changed files with 72 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/fetching.rs
View File

@@ -1,14 +1,13 @@
use gloo::{console::log, utils::format::JsValueSerdeExt};
use common::{CommonAdmin, CommonDriver};
use std::{
error::Error,
fmt::{self, Debug, Display, Formatter},
};
use wasm_bindgen::{JsCast, JsValue};
use common::{CommonAdmin, CommonDriver};
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestMode, Response};
use yew::{html, Component, Context, Html};
use yew::props;
use yew::{html, Component, Context, Html, Properties};
//Trait to handle Future yew HTMLS
pub trait UseAble {
//Return HTML if didn't fail return error if not
@@ -17,13 +16,13 @@ pub trait UseAble {
impl UseAble for CommonDriver {
fn use_it(self) -> Result<Html, String> {
let name = self.name;
let email = self.address;
let address = self.address;
let id = self.id;
let html = html! {
<div>
<h2> { "Driver:" } </h2>
<p> { format!("Name: {}", name) } </p>
<p> { format!("Email: {}", email) } </p>
<p> { format!("Address: {}", address) } </p>
<p> { format!("ID: {}", id) } </p>
</div>
};
@@ -33,13 +32,13 @@ impl UseAble for CommonDriver {
impl UseAble for CommonAdmin {
fn use_it(self) -> Result<Html, String> {
let name = self.name;
let email = self.address;
let address = self.address;
let id = self.id;
let html = html! {
<div>
<h2> { "Admin:" } </h2>
<p> { format!("Name: {}", name) } </p>
<p> { format!("Email: {}", email) } </p>
<p> { format!("Address: {}", address) } </p>
<p> { format!("ID: {}", id) } </p>
</div>
};
@@ -48,16 +47,18 @@ impl UseAble for CommonAdmin {
}
//Wwasm bingdengen code
const DRIVER_URL: &str = "http://db.sewelam.tech/api/driver/1234";
const DRIVER_URL: &str = "http://db.sewelam.tech/api/driver/50";
const ADMIN_URL: &str = "http://db.sewelam.tech/api/admin/";
const TICKET_URL: &str = "http://db.sewelam.tech/api/ticket/";
const FUNNY_TXT_URL: &str = "https://whatthecommit.com/index.txt";
const INCORRECT_URL: &str = "http://libkyy.cf";
//Generic Msg for our states
enum Msg<T> {
pub enum Msg<T> {
SetDataFetchState(FetchState<T>),
GetData,
GetError,
}
struct RandomCommit {
pub struct RandomCommit {
commit: FetchState<String>,
}
//This trait is for all yew components
@@ -78,7 +79,7 @@ impl Component for RandomCommit {
}
Msg::GetData => {
ctx.link().send_future(async {
match fetch_commit(FUNNY_TXT_URL).await {
match fetch_url_text(FUNNY_TXT_URL).await {
Ok(commit) => Msg::SetDataFetchState(FetchState::Success(commit)),
Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
}
@@ -89,7 +90,7 @@ impl Component for RandomCommit {
}
Msg::GetError => {
ctx.link().send_future(async {
match fetch_commit(INCORRECT_URL).await {
match fetch_url_text(INCORRECT_URL).await {
Ok(commit) => Msg::SetDataFetchState(FetchState::Success(commit)),
Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
}
@@ -108,27 +109,36 @@ impl Component for RandomCommit {
<button onclick={ctx.link().callback(|_| Msg::GetData)}>
{ "Get commit msg" }
</button>
<button onclick={ctx.link().callback(|_| Msg::GetError)}>
{ "Get using incorrect URL" }
</button>
</>
},
FetchState::Fetching => html! { "Fetching" },
FetchState::Success(data) => {
html! { <> <h2> {"Commit Header:"} </h2> {data}</> }
html! { <> {data}</> }
}
FetchState::Failed(err) => html! { err },
}
}
}
//Generate Struct and implement component for driver using CommonDriver
struct Driver {
pub struct DriverComponent {
driver: FetchState<String>,
}
#[derive(Default, Properties, PartialEq)]
pub struct ApiParams {
pub entered_id: i32,
}
impl ApiParams {
pub fn new_api_thingy_with_id(id: i32) -> Self {
props! { ApiParams {
entered_id: id
}}
}
}
//implement the component for Driver using a string
impl Component for Driver {
impl Component for DriverComponent {
type Message = Msg<String>;
type Properties = ();
type Properties = ApiParams;
fn create(_ctx: &Context<Self>) -> Self {
Self {
driver: FetchState::NotFetching,
@@ -143,7 +153,7 @@ impl Component for Driver {
}
Msg::GetData => {
ctx.link().send_future(async {
match fetch_driver(DRIVER_URL).await {
match fetch_url_text(DRIVER_URL).await {
Ok(driver) => Msg::SetDataFetchState(FetchState::Success(driver)),
Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
}
@@ -154,7 +164,7 @@ impl Component for Driver {
}
Msg::GetError => {
ctx.link().send_future(async {
match fetch_driver(INCORRECT_URL).await {
match fetch_url_text(INCORRECT_URL).await {
Ok(driver) => Msg::SetDataFetchState(FetchState::Success(driver)),
Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
}
@@ -170,16 +180,22 @@ impl Component for Driver {
match &self.driver {
FetchState::NotFetching => html! {
<>
<label for="id"> {"ID:"} </label>
<input type="text" id="name" name="name"/>
<br/>
<button onclick={ctx.link().callback(|_| Msg::GetData)}>
{ "Get driver" }
</button>
<button onclick={ctx.link().callback(|_| Msg::GetError)}>
{ "Get using incorrect URL" }
</button>
</>
},
FetchState::Fetching => html! { "Fetching" },
FetchState::Success(data) => html! { <> <h2> {"Driver"} </h2> {data} </> },
FetchState::Success(data) => html! { <> {data} <br/>
<button onclick={ctx.link().callback(|_| Msg::GetData)}>
{ "Get new driver (assuming input works :D)" }
</button>
</> },
FetchState::Failed(err) => html! { err },
}
}
@@ -211,26 +227,7 @@ pub enum FetchState<T> {
Failed(FetchError),
}
//Working example function
async fn fetch_commit(url: &'static str) -> Result<String, FetchError> {
//initialise request
let mut opts = RequestInit::new();
opts.method("GET");
opts.mode(RequestMode::Cors); //Cors is required for fetch to work
let request = Request::new_with_str_and_init(url, &opts)?;
let window = gloo::utils::window();
//get response value
let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
let resp: Response = resp_value.dyn_into().unwrap();
//parse response value as text
let text = JsFuture::from(resp.text()?).await?;
Ok(text.as_string().unwrap())
}
async fn fetch_driver(url: &'static str) -> Result<String, FetchError> {
async fn fetch_url_text(url: &'static str) -> Result<String, FetchError> {
let mut opts = RequestInit::new();
opts.method("GET");
opts.mode(RequestMode::Cors); //Cors is required for fetch to work
@@ -243,12 +240,3 @@ async fn fetch_driver(url: &'static str) -> Result<String, FetchError> {
let text = JsFuture::from(resp.text()?).await?;
Ok(text.as_string().unwrap())
}
//renders components above
pub fn render_commit() {
yew::Renderer::<RandomCommit>::new().render();
}
pub fn render_driver() {
yew::Renderer::<Driver>::new().render();
}

51
frontend/src/main.rs
View File

@@ -1,59 +1,20 @@
mod driver_list;
mod fetching;
use yew::prelude::*;
use crate::fetching::DriverComponent;
#[function_component]
fn App() -> Html {
let stdnts = vec![
Stdnt {
id: 1,
name: "Hamada".to_string(),
email: "Hamada@Gmail.com".to_string(),
gpa: 3.4,
},
Stdnt {
id: 2,
name: "Gamal".to_string(),
email: "Gamal@Gmail.com".to_string(),
gpa: 4.0,
},
Stdnt {
id: 3,
name: "Joe".to_string(),
email: "joe@proton.mail".to_string(),
gpa: 3.8,
},
];
let stdnts_comp = stdnts
.iter()
.map(|stdnt| {
html! {
<>
<p key={stdnt.id}>{format!("Name: {}", stdnt.name)} </p>
<p key={stdnt.id}>{format!("Email: {}", stdnt.email)} </p>
<p key={stdnt.id}>{format!("GPA: {}",stdnt.gpa)} </p>
<br/>
</>
}
})
.collect::<Html>();
let entered_id = 50;
html! {
<div>
<h2> { "Students:" } </h2>
<p> { stdnts_comp } </p>
// <p> { driver_comp } </p>
<h2> {"Better?"} </h2>
<DriverComponent {entered_id}/>
</div>
}
}
struct Stdnt {
id: usize,
name: String,
gpa: f32,
email: String,
}
fn main() {
yew::Renderer::<App>::new().render();
fetching::render_commit();
fetching::render_driver();
}