Skip to content

Commit

Permalink
Merge pull request #1 from Ryan-Ardito/refactor
Browse files Browse the repository at this point in the history 
Refactor
  • Loading branch information
@Ryan-Ardito
Ryan-Ardito authored Apr 18, 2024
2 parents f87d50e + 22d9c17 commit 8e8371a
Show file tree
Hide file tree
Showing 10 changed files with 272 additions and 199 deletions.
31 changes: 17 additions & 14 deletions src-tauri/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use std::sync::Mutex;

use tauri::{Menu, Submenu, MenuItem, CustomMenuItem, State};
use serde::Serialize;
use tauri::{CustomMenuItem, Menu, MenuItem, State, Submenu};

struct Holders(Mutex<Vec<HolderData>>);

Expand Down Expand Up @@ -55,12 +55,15 @@ fn greet(name: &str) -> String {
}

#[tauri::command(async)]
fn fetch_holders(search: &str, holders: State<Holders>) -> Vec<HolderData> {
fn fetch_holders(search: &str, holders: State<Holders>) -> Result<Vec<HolderData>, String> {
// std::thread::sleep(Duration::from_millis(200));

let mut hldrs = holders.0.lock().unwrap();
for i in 0..10_000 {
let pass_type = PassType { name: format!("annual"), code: format!("Annual") };
for i in 0..1_000 {
let pass_type = PassType {
name: format!("annual"),
code: format!("Annual"),
};
let holder_data = HolderData {
id: i + 64,
first_name: format!("{search}{i}"),
Expand All @@ -75,26 +78,26 @@ fn fetch_holders(search: &str, holders: State<Holders>) -> Vec<HolderData> {
hldrs.push(holder_data);
}

hldrs.to_vec()
Ok(hldrs.to_vec())
}

fn main() {
let new_todo = CustomMenuItem::new("settings".to_string(), "Settings");
let close = CustomMenuItem::new("quit".to_string(), "Quit");
let submenu = Submenu::new("File", Menu::new().add_item(new_todo).add_item(close));
let settings = CustomMenuItem::new("settings".to_string(), "Settings...");
// let close = CustomMenuItem::new("quit".to_string(), "Quit");
let about = CustomMenuItem::new("about".to_string(), "About...");
let submenu = Submenu::new("File", Menu::new().add_item(settings).add_native_item(MenuItem::Separator).add_item(about));
let menu = Menu::new()
.add_native_item(MenuItem::Copy)
.add_submenu(submenu);

tauri::Builder::default()
.manage(Holders(Default::default()))
.menu(menu)
.on_menu_event(|event| {
match event.menu_item_id() {
"settings" => event.window().emit("settings", "").unwrap(),
"quit" => std::process::exit(0),
_ => (),
}
.on_menu_event(|event| match event.menu_item_id() {
"settings" => event.window().emit("settings", "").unwrap(),
"about" => event.window().emit("about", "").unwrap(),
// "quit" => std::process::exit(0),
_ => (),
})
.invoke_handler(tauri::generate_handler![greet, fetch_holders])
.run(tauri::generate_context!())
Expand Down
168 changes: 65 additions & 103 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
import { useState, FormEvent, useReducer } from "react";
// import { Dispatch, SetStateAction, createContext, ReactNode, useContext } from "react";
import { emit, listen } from '@tauri-apps/api/event'

import { SearchBar } from "./components/SearchBar";
import { PassInfo } from "./components/PassInfo";
import { SearchResults } from "./components/SearchResults";

import { Button } from 'primereact/button';
import { listen } from '@tauri-apps/api/event'

import 'primeicons/primeicons.css';
import { Divider } from "primereact/divider";
import { AddPass } from "./screens/AddPass";

import { fetchHolders } from "./api/api";
import { SearchBar } from "./components/SearchBar";
import { SearchResults } from "./components/SearchResults";
import { PassInteraction } from "./components/PassInteraction";
import { AddPass } from "./screens/AddPass";
import { Settings } from "./screens/Settings";
import { ViewPass } from "./screens/ViewPass";
import { About } from "./screens/About";

export enum Screen {
Dashboard,
ViewPass,
Settings,
About,
}

export interface PassType {
name: string,
Expand Down Expand Up @@ -40,50 +47,34 @@ export const blankHolder: HolderData = {
notes: "",
}

export type HolderAction =
| { type: "replace"; data: HolderData }
| { type: "set_first_name"; data: string }
| { type: "set_last_name"; data: string }
| { type: "set_town"; data: string }
| { type: "set_passtype"; data: PassType | null }
| { type: "set_active"; data: boolean }
| { type: "set_notes"; data: string }

export enum Screen {
Dashboard,
ViewPass,
Settings,
export enum Msg {
Replace = "REPLACE",
SetFirstName = "SET_FIRST_NAME",
SetLastName = "SET_LAST_NAME",
SetTown = "SET_TOWN",
SetPasstype = "SET_PASSTYPE",
SetActive = "SET_ACTIVE",
SetNotes = "SET_NOTES",
}

export type HolderAction =
| { type: Msg.Replace; data: HolderData }
| { type: Msg.SetFirstName; data: string }
| { type: Msg.SetLastName; data: string }
| { type: Msg.SetTown; data: string }
| { type: Msg.SetPasstype; data: PassType | null }
| { type: Msg.SetActive; data: boolean }
| { type: Msg.SetNotes; data: string }

function holderReducer(holder: HolderData, action: HolderAction): HolderData {
switch (action.type) {
case "replace": {
return action.data
}
case "set_first_name": {
return { ...holder,
first_name: action.data, }
}
case "set_last_name": {
return { ...holder,
last_name: action.data, }
}
case "set_town": {
return { ...holder,
town: action.data, }
}
case "set_passtype": {
return { ...holder,
passtype: action.data, }
}
case "set_active": {
return { ...holder,
active: action.data, }
}
case "set_notes": {
return { ...holder,
notes: action.data, }
}
case Msg.Replace: { return action.data }
case Msg.SetFirstName: { return { ...holder, first_name: action.data } }
case Msg.SetLastName: { return { ...holder, last_name: action.data } }
case Msg.SetTown: { return { ...holder, town: action.data } }
case Msg.SetPasstype: { return { ...holder, passtype: action.data } }
case Msg.SetActive: { return { ...holder, active: action.data } }
case Msg.SetNotes: { return { ...holder, notes: action.data } }
}
}

Expand All @@ -100,73 +91,44 @@ function App() {
setPassholders(await res);
}

function PassInteraction() {
return (
<div style={{display: "flex", flexDirection: "column", gap: "5px", flex: 1}}>
<Button disabled={!selectedHolder.id} label="Log Visit" onClick={(e) => {
e.preventDefault();
}} />
<Button disabled={!selectedHolder.id} label="Add Visits" onClick={(e) => {
e.preventDefault();
}} />
<Button disabled={!selectedHolder.id} label="View Pass" onClick={(e) => {
e.preventDefault();
setScreen(Screen.ViewPass);
}} />
<Divider />
<Button label="New Pass" onClick={(e) => {
e.preventDefault();
setAddPass(true);
// setScreen(Screen.AddPass);
}} />
</div>
)
}

const Dashboard =
const Dashboard =
<div className="wrapper">
<div className="container">
<SearchBar setSearch={setSearch} handleSubmit={handleSubmit}/>
<SearchBar setSearch={setSearch} handleSubmit={handleSubmit} />
<div className="edit-box">
<SearchResults passholders={passholders} selectedHolder={selectedHolder} setSelectedHolder={setSelectedHolder}/>
<Divider layout="vertical" style={{margin: 5}}/>
{addPass ? <AddPass selectedHolder={selectedHolder} setSelectedHolder={setSelectedHolder} setAddPass={setAddPass}/> : <PassInteraction />}
<SearchResults
passholders={passholders}
selectedHolder={selectedHolder}
setSelectedHolder={setSelectedHolder}
/>
<Divider layout="vertical" style={{ margin: 5 }} />
{addPass ? (
<AddPass
selectedHolder={selectedHolder}
setSelectedHolder={setSelectedHolder}
setAddPass={setAddPass} />
) : (
<PassInteraction
selectedHolder={selectedHolder}
setScreen={setScreen}
setAddPass={setAddPass} />
)}
</div>
</div>
</div>

const ViewPass =
<div className="wrapper">
<div className="container">
<PassInfo selectedHolder={selectedHolder} setSelectedHolder={setSelectedHolder} />
<Button label="Back" onClick={(e) => {
e.preventDefault();
setScreen(Screen.Dashboard);
}} />
</div>
</div>

const Settings =
<div className="wrapper">
<div className="container">
<Button label="Back" onClick={(e) => {
e.preventDefault();
setScreen(Screen.Dashboard);
}} />
</div>
</div>
listen('settings', () => { setScreen(Screen.Settings) })
listen('about', () => { setScreen(Screen.About) })

listen('settings', () => {
setScreen(Screen.Settings)
})

switch (screen) {
case Screen.Dashboard:
return Dashboard;
case Screen.ViewPass:
return ViewPass;
return ViewPass({ setScreen, selectedHolder, setSelectedHolder });
case Screen.Settings:
return Settings;
return Settings({ setScreen });
case Screen.About:
return About({ setScreen });
}
}

Expand Down
48 changes: 26 additions & 22 deletions src/components/PassInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HolderData, HolderAction, PassType } from "../App"
import { HolderData, HolderAction, PassType, Msg } from "../App"

import { ScrollPanel } from "primereact/scrollpanel";
import { InputText } from "primereact/inputtext";
Expand All @@ -19,37 +19,41 @@ interface ChildProps {
setSelectedHolder: React.Dispatch<HolderAction>,
}

interface InputFieldProps {
label: string,
value: string,
onChange: (value: string) => void,
}

const InputField: React.FC<InputFieldProps> = ({ label, value, onChange }) => {
return (
<>
<div>{label}</div>
<InputText className="form-text-input" value={value} style={{ padding: 8 }}
onChange={(e) => onChange(e.target.value)} />
</>
);
};

export function PassInfo({ selectedHolder, setSelectedHolder }: ChildProps) {
return (
<ScrollPanel className="holder-box">
<div>First Name:</div>
<InputText className="form-text-input" value={selectedHolder.first_name} style={{ padding: 8 }}
onChange={(e) => setSelectedHolder({
type: 'set_first_name',
data: e.target.value,
})} />

<div> Last Name:</div>
<InputText className="form-text-input" value={selectedHolder.last_name} style={{ padding: 8 }}
onChange={(e) => setSelectedHolder({
type: 'set_last_name',
data: e.target.value,
})} />

<div> Town:</div>
<InputText className="form-text-input" value={selectedHolder.town} style={{ padding: 8 }}
onChange={(e) => setSelectedHolder({
type: 'set_town',
data: e.target.value,
})} />
<InputField label="First Name:" value={selectedHolder.first_name}
onChange={(value) => setSelectedHolder({ type: Msg.SetFirstName, data: value })} />

<InputField label="Last Name:" value={selectedHolder.last_name}
onChange={(value) => setSelectedHolder({ type: Msg.SetLastName, data: value })} />

<InputField label="Town:" value={selectedHolder.town}
onChange={(value) => setSelectedHolder({ type: Msg.SetTown, data: value })} />

<div>Passtype:</div>
<Dropdown style={{ padding: 0 }} scrollHeight="400px"
// filter resetFilterOnHide
value={selectedHolder.passtype} options={passtypes} optionLabel="code"
onChange={(e) => {
setSelectedHolder({
type: 'set_passtype',
type: Msg.SetPasstype,
data: e.value,
})
}} />
Expand Down
33 changes: 33 additions & 0 deletions src/components/PassInteraction.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Button } from "primereact/button"
import { Divider } from "primereact/divider"

import { HolderData } from "../App"
import { Screen } from "../App"

interface ChildProps {
selectedHolder: HolderData,
setScreen: React.Dispatch<React.SetStateAction<Screen>>,
setAddPass: React.Dispatch<React.SetStateAction<boolean>>,
}

export const PassInteraction = ({selectedHolder, setScreen, setAddPass}: ChildProps) => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "5px", flex: 1 }}>
<Button disabled={!selectedHolder.id} label="Log Visit" onClick={(e) => {
e.preventDefault();
}} />
<Button disabled={!selectedHolder.id} label="Add Visits" onClick={(e) => {
e.preventDefault();
}} />
<Button disabled={!selectedHolder.id} label="View Pass" onClick={(e) => {
e.preventDefault();
setScreen(Screen.ViewPass);
}} />
<Divider />
<Button label="New Pass" onClick={(e) => {
e.preventDefault();
setAddPass(true);
}} />
</div>
)
}
4 changes: 2 additions & 2 deletions src/components/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HolderData, HolderAction, blankHolder } from "../App";
import { HolderData, HolderAction, blankHolder, Msg } from "../App";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
// import { useContext } from "react";
Expand Down Expand Up @@ -28,7 +28,7 @@ export function SearchResults({ passholders, selectedHolder, setSelectedHolder }
scrollable scrollHeight="87%" paginator rows={32}
// virtualScrollerOptions={{ itemSize: 46 }} // broken
value={passholders} metaKeySelection={false} selectionMode="single" selection={selectedHolder}
onSelectionChange={(e) => setSelectedHolder({ type: "replace", data: e.value || blankHolder })} dataKey="id"
onSelectionChange={(e) => setSelectedHolder({ type: Msg.Replace, data: e.value || blankHolder })} dataKey="id"
>
<Column field="first_name" header="First Name" style={{ width: "35%" }} />
<Column field="last_name" header="Last Name" style={{ width: "35%" }} />
Expand Down
Loading

0 comments on commit 8e8371a

Please sign in to comment.