feat: Now you can load cards from your stash tabs

src-tauri/lib/src/commands.rs

@@ -1,4 +1,4 @@
-use divi::{Csv, CsvString, DivinationCardsSample, League, Prices};
+use divi::{CardNameAmount, Csv, CsvString, DivinationCardsSample, League, Prices};
 use tauri::{command, AppHandle, Manager};
 
 use crate::prices;
@@ -14,6 +14,17 @@ pub async fn sample(
     )
 }
 
+#[command]
+pub async fn sample_cards(
+    cards: Vec<CardNameAmount>,
+    league: League,
+) -> Result<DivinationCardsSample, divi::error::MissingHeaders> {
+    DivinationCardsSample::create(
+        Csv::CardNameAmountList(cards),
+        prices::prices(&league).await,
+    )
+}
+
 #[command]
 pub async fn chaos(sample: Box<DivinationCardsSample>, min: Option<f32>) -> f32 {
     sample.as_ref().chaos(min)

src-tauri/lib/src/google.rs

@@ -165,7 +165,6 @@ pub struct Identity {
 pub async fn google_auth() -> Result<String, String> {
     // auth(GoogleProvider::default()).await
     let result = GoogleProvider::new().oauth().await;
-    dbg!(result.clone());
     result
 }
 

src-tauri/lib/src/poe.rs

@@ -2,9 +2,12 @@ use std::net::{IpAddr, Ipv4Addr, SocketAddr};
 
 use crate::oauth::{AuthCodeResponse, OAuthProvider};
 use axum::{async_trait, extract::Query, response::Html, routing::get, Router};
+use divi::League;
 use keyring::Entry;
 use oauth2::{basic::BasicClient, AccessToken, CsrfToken, PkceCodeChallenge, RedirectUrl, Scope};
+use reqwest::Client;
 use serde::{Deserialize, Serialize};
+use serde_json::Value;
 use tauri::command;
 use tokio::sync::mpsc;
 
@@ -27,6 +30,22 @@ pub fn poe_logout() {
     AccessTokenStorage::new().delete().unwrap()
 }
 
+#[command]
+pub async fn stashes(league: League) -> Value {
+    let val = PoeProvider::stashes(league).await;
+    // dbg!(&val);
+    val
+}
+
+#[command]
+pub async fn stash(league: League, stash_id: String, substash_id: Option<String>) -> Value {
+    let val = PoeProvider::stash(league, stash_id, substash_id).await;
+    // dbg!(&val);
+    val
+}
+
+pub const API_URL: &'static str = "https://api.pathofexile.com";
+
 #[derive(Default)]
 pub struct PoeProvider;
 
@@ -38,9 +57,53 @@ impl PoeProvider {
     pub fn access_token_label() -> String {
         format!("{}_access_token", { Self::PROVIDER_LABEL })
     }
-}
 
-impl PoeProvider {
+    async fn stash(league: League, stash_id: String, substash_id: Option<String>) -> Value {
+        let url = match substash_id {
+            Some(substash_id) => {
+                format!("{}/stash/{}/{}/{}", API_URL, league, stash_id, substash_id)
+            }
+            None => format!("{}/stash/{}/{}", API_URL, league, stash_id),
+        };
+
+        dbg!(&url);
+        Client::new()
+            .get(url)
+            .header(
+                "Authorization",
+                format!("Bearer {}", { AccessTokenStorage::new().get().unwrap() }),
+            )
+            .header(
+                "User-Agent",
+                "OAuth divicards/0.1.8 (contact: poeshonya3@gmail.com)",
+            )
+            .send()
+            .await
+            .unwrap()
+            .json::<Value>()
+            .await
+            .unwrap()
+    }
+
+    async fn stashes(league: League) -> Value {
+        Client::new()
+            .get(format!("{}/stash/{}", API_URL, league))
+            .header(
+                "Authorization",
+                format!("Bearer {}", { AccessTokenStorage::new().get().unwrap() }),
+            )
+            .header(
+                "User-Agent",
+                "OAuth divicards/0.1.8 (contact: poeshonya3@gmail.com)",
+            )
+            .send()
+            .await
+            .unwrap()
+            .json::<Value>()
+            .await
+            .unwrap()
+    }
+
     async fn fetch_token(
         code: &str,
         pkce_verifier: &str,

src-tauri/src/main.rs

@@ -42,6 +42,7 @@ async fn main() {
             commands::chaos,
             commands::merge,
             commands::league,
+            commands::sample_cards,
             discord::discord_auth,
             discord::discord_authenticated,
             discord::discord_identity,
@@ -50,7 +51,9 @@ async fn main() {
             google::google_identity,
             poe::poe_auth,
             poe::poe_logout,
-            poe::poe_authenticated
+            poe::poe_authenticated,
+            poe::stashes,
+            poe::stash
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/App.vue

@@ -4,13 +4,18 @@ import { useFileCardsStore } from './stores/fileCards';
 import { storeToRefs } from 'pinia';
 import { ref } from 'vue';
 import { useAutoAnimate } from './composables/useAutoAnimate';
-import HelpTip from './components/HelpTip.vue';
 import { usePoeOAuth2Store } from './stores/poeOAuth2Store';
+import PoeAuth from './components/PoeAuth.vue';
+import StashesMainComponent from './components/stashes/StashesMainComponent.vue';
+import DropFilesMessage from './components/DropFilesMessage.vue';
 
 const filesStore = useFileCardsStore();
 const { fileCards: files, selectedFiles, mergedFile } = storeToRefs(filesStore);
 const { deleteFile, addCards, deleteAllFiles, merge, deleteMergedFile, downloadAll } = filesStore;
 
+const poeOAuthStore = usePoeOAuth2Store();
+const { loggedIn } = storeToRefs(poeOAuthStore);
+
 const filesTemplateRef = ref<HTMLElement | null>(null);
 useAutoAnimate(filesTemplateRef);
 
@@ -19,42 +24,35 @@ const onDrop = (e: DragEvent) => {
 	if (dropFiles) addCards(Array.from(dropFiles));
 };
 
-const { loggedIn, name } = storeToRefs(usePoeOAuth2Store());
-const { login, logout, checkLoggedIn, init } = usePoeOAuth2Store();
-
-const stashes = ref([]);
-
-init();
+const stashVisible = ref(false);
+const openStashWindow = () => {
+	if (loggedIn.value) {
+		stashVisible.value = true;
+	} else {
+		poeOAuthStore.login().then(() => {
+			if (loggedIn.value) {
+				stashVisible.value = true;
+			}
+		});
+	}
+};
 </script>
 
 <template>
-	<div v-if="loggedIn">
-		<p>{{ name }}</p>
-		<p>Logged in</p>
-		<button @click="logout">Logout</button>
-	</div>
-	<div v-else>
-		<button @click="login">Login</button>
-	</div>
-
-	<div v-if="loggedIn">
-		<pre>{{ stashes }}</pre>
-		<button>Stashes</button>
-	</div>
-
 	<div
 		@drop.prevent="onDrop"
 		@dragenter="(e: DragEvent) => e.preventDefault()"
 		@dragover="(e: DragEvent) => e.preventDefault()"
 		class="drag"
 	>
-		<div style="display: flex; gap: 1rem">
-			<div class="drop">Drop files <span>Here!</span></div>
-			<HelpTip>
-				<p>Excel, .csv or just .txt</p>
-				<p>Required headers: name and amount</p>
-				<img src="/simple.png" alt="" />
-			</HelpTip>
+		<header class="header">
+			<DropFilesMessage />
+			<button @click="openStashWindow()">Load from stash</button>
+			<PoeAuth />
+		</header>
+
+		<div v-if="loggedIn && stashVisible">
+			<StashesMainComponent @close="stashVisible = false" />
 		</div>
 
 		<Transition>
@@ -90,6 +88,12 @@ init();
 </template>
 
 <style scoped>
+.header {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 3rem;
+}
+
 .v-enter-active,
 .v-leave-active {
 	transition: opacity 0.5s ease;
@@ -112,10 +116,7 @@ init();
 .drag--active {
 	filter: hue-rotate(120deg);
 }
-.drop {
-	font-size: 3rem;
-	margin-bottom: 1rem;
-}
+
 .files {
 	display: flex;
 	flex-wrap: wrap;
@@ -127,9 +128,4 @@ init();
 	padding: 0.4rem;
 	font-size: 1.4rem;
 }
-
-.drop > span {
-	color: deeppink;
-	font-weight: 700;
-}
 </style>

src/command.ts

@@ -1,8 +1,10 @@
 import { invoke } from '@tauri-apps/api';
-import { DivinationCardsSample, League, DiscordIdentity, GoogleIdentity } from './types';
+import { DivinationCardsSample, League, DiscordIdentity, GoogleIdentity, leagues, CardNameAmount } from './types';
+import { StashesResponseData, StashResponseData } from './poe/types';
 
 export interface Commands {
 	sample: (args: { csv: string; league: League }) => DivinationCardsSample;
+	sample_cards: (args: { cards: CardNameAmount[]; league: League }) => DivinationCardsSample;
 	chaos: (args: { sample: DivinationCardsSample; min: number }) => number;
 	merge: (args: { samples: DivinationCardsSample[] }) => DivinationCardsSample;
 	league: (args: { sample: DivinationCardsSample; league: League }) => DivinationCardsSample;
@@ -15,6 +17,8 @@ export interface Commands {
 	poe_auth: () => string;
 	poe_authenticated: () => boolean;
 	poe_logout: () => void;
+	stashes: (args: { league: League }) => StashesResponseData;
+	stash: (args: { league: League; stashId: string; subStashId?: string }) => StashResponseData;
 }
 
 const { format } = new Intl.NumberFormat();

src/components/BasePopup.vue

@@ -58,6 +58,7 @@ onUnmounted(() => {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	z-index: 3;
 }
 .backdrop {
 	opacity: 70%;
@@ -67,7 +68,7 @@ onUnmounted(() => {
 	left: 0;
 	position: absolute;
 
-	z-index: 2;
+	z-index: 3;
 }
 
 .popup_content {
@@ -84,6 +85,6 @@ onUnmounted(() => {
 	z-index: 10;
 	top: 0;
 
-	z-index: 3;
+	z-index: 4;
 }
 </style>

src/components/DivTable/DivTable.vue

@@ -46,6 +46,7 @@ const order = ref<SortState>({
 	amount: 'asc',
 	price: 'asc',
 	sum: 'asc',
+	name: 'asc',
 });
 
 watch(
@@ -113,6 +114,11 @@ onMounted(() => {
 					</th>
 					<th>
 						<span class="column__name"> Name </span>
+						<order-triangle
+							:active="order.activeColumn === 'name'"
+							:order="order.name"
+							@click="toggleOrder('name')"
+						/>
 					</th>
 					<th>
 						<span class="column__name"> Price </span>

src/components/DivTable/orderBy.ts

@@ -25,8 +25,18 @@ export const bySum = (order: Order, cards: DivinationCardRecord[]) => {
 	});
 };
 
+export const byName = (order: Order, cards: DivinationCardRecord[]) => {
+	return cards.sort((a, b) => {
+		if (order === 'asc') return a.name < b.name ? -1 : 1;
+		if (order === 'desc') return a.name > b.name ? -1 : 1;
+		throw new Error('invalid order');
+	});
+};
+
 export const orderBy = (column: Column, order: Order, cards: DivinationCardRecord[]): DivinationCardRecord[] => {
 	switch (column) {
+		case 'name':
+			return byName(order, cards);
 		case 'price':
 			return byPrice(order, cards);
 		case 'amount':

src/components/DivTable/types.ts

@@ -1,6 +1,6 @@
 import { Order } from '../../types';
 
-export type Column = 'price' | 'amount' | 'sum';
+export type Column = 'price' | 'amount' | 'sum' | 'name';
 export type SortState = {
 	[col in Column]: Order;
 } & { activeColumn: Column };

src/components/DropFilesMessage.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import HelpTip from './HelpTip.vue';
+</script>
+
+<template>
+	<div style="display: flex; gap: 1rem">
+		<div class="drop">Drop files <span>Here!</span></div>
+		<HelpTip>
+			<p>Excel, .csv or just .txt</p>
+			<p>Required headers: name and amount</p>
+			<img src="/simple.png" alt="" />
+		</HelpTip>
+	</div>
+</template>
+
+<style scoped>
+.drop {
+	font-size: 3rem;
+	margin-bottom: 1rem;
+}
+
+.drop > span {
+	color: deeppink;
+	font-weight: 700;
+}
+</style>