Skip to content

Commit

Permalink
Merge branch 'master' into ap/msg-UI-Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@brenzi
brenzi committed Nov 25, 2024
2 parents 9f45ad7 + 8cd7749 commit 5bd8241
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 32 deletions.
125 changes: 93 additions & 32 deletions components/tabs/MessagingTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,17 @@
<!-- Message List -->
<div class="overflow-y-auto flex-1">
<div class="space-y-1 px-4">
<!-- Chat Items -->
<div v-if="isInitializing" class="spinner"></div>
<div
v-if="noteStore.getConversationCounterparties.length === 0"
class="mt-5 flex justify-center text-gray-500"
>
<button @click="fetchOlderBucket">
query recent chats
{{ accountStore.hasInjector ? "(needs signature)" : "" }}
</button>
<div v-if="isUpdatingNotes" class="spinner"></div>
</div>
<div
v-for="(
counterparty, index
Expand All @@ -117,35 +127,41 @@
class="relative flex items-center"
>
<div
class="flex-1 p-3 pl-5 rounded-lg hover:bg-gray-500 cursor-pointer transition duration-300"
class="flex-1 p-3 pl-5 rounded-lg hover:text-black hover:bg-gray-600 cursor-pointer"
:class="{
'bg-gray-700':
counterparty !== conversationAddress /* Standard-Chats */,
'bg-gray-500':
counterparty ===
conversationAddress /* Ausgewählter Chat */,
'bg-gray-700': counterparty !== conversationAddress,
'bg-gray-500': counterparty === conversationAddress,
}"
@click="openChat(counterparty)"
>
<div class="flex justify-between items-center">
<!-- Wallet-Adresse -->
<p class="wallet-address text-sm font-bold">
<div v-if="maybeUsername(counterparty)">
<div class="wallet-address text-sm font-bold text-white">
{{ maybeUsername(counterparty) }}
</div>
<p class="wallet-address text-xs text-gray-400">
{{ counterparty }}
</p>
</div>
<div
v-else
class="wallet-address text-sm font-bold text-white"
>
{{ counterparty }}
</p>
<!-- Placeholder für Timestamp -->
<span class="text-xs text-gray-300">
</div>
<!--<span class="text-xs text-gray-300">
{{
formatDate(
noteStore.getMessagesWith(counterparty)?.[0]
?.timestamp || "",
)
}}
</span>
</span>-->
</div>
<!-- Letzte Nachricht -->
<p class="text-gray-300 text-xs line-clamp-2 mt-1">
<!--<p class="text-gray-300 text-xs line-clamp-2 mt-1">
{{ noteStore.getMessagesWith(counterparty)?.[0]?.note || "" }}
</p>
</p>-->
</div>
</div>
</div>
Expand All @@ -172,23 +188,44 @@
>
← Back
</button>
<h2 class="wallet-address text-lg font-bold">
<h2 class="text-lg font-bold">
{{
recipientValid(conversationAddress)
? "Chat with " + conversationAddress
? "Chat with " +
(maybeUsername(conversationAddress) || "") +
" " +
conversationAddress.slice(0, 12) + "..."
: "Chat"
}}
</h2>
</div>
<!-- Chat Messages -->
<div class="flex-1 overflow-y-auto">
<div class="mt-5 flex justify-center text-gray-500">
<div
v-if="eventHorizon"
class="mt-5 flex justify-center text-gray-500"
>
<i
>messages before {{ formatMoment(eventHorizon) }} have been purged
from Incognitee state</i
>
</div>
<div
v-if="unfetchedBucketsCount > 0"
class="mt-5 flex justify-center text-gray-500"
>
<button @click="fetchOlderBucket">
fetch more messages
{{ accountStore.hasInjector ? "(needs signature)" : "" }}
query more messages
{{
accountStore.hasInjector
? "(needs signature in extension)"
: ""
}}: fetch older bucket
{{ bucketsCount - unfetchedBucketsCount }} /
{{ bucketsCount }}
</button>
<div v-if="isUpdatingNotes" class="spinner"></div>
</div>

<PrivateMessageHistory
:show="true"
:counterparty="conversationAddress"
Expand Down Expand Up @@ -362,21 +399,12 @@ import { QrcodeStream } from "vue-qrcode-reader";
import { useInterval } from "@vueuse/core";
import { decodeAddress, encodeAddress } from "@polkadot/util-crypto";
import identities from "@/lib/polkadotPeopleIdentites";
import { formatDate } from "@/helpers/date";
import { formatMoment } from "@/helpers/date";
import { useNotes } from "@/store/notes.ts";
import { Note, NoteDirection } from "@/lib/notes";
import { divideBigIntToFloat } from "@/helpers/numbers";
import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
onMounted(() => {
const counterparties = noteStore.getConversationCounterparties;
if (counterparties.length > 0) {
const firstCounterparty = counterparties[0];
conversationAddress.value = firstCounterparty;
showChatDetail.value = true;
}
});
// Control overlay visibility
const showStartOverlay = ref(false);
Expand Down Expand Up @@ -446,6 +474,7 @@ const txStatus = ref("");
const accountStore = useAccount();
const incogniteeStore = useIncognitee();
const systemHealth = useSystemHealth();
const isInitializing = ref(true);
// txStatus (Statusmeldung) und showNotification (Kontrolle der Anzeige)
Expand Down Expand Up @@ -475,11 +504,28 @@ watch(pollCounter, async () => {
console.debug("polling for new incognitee notes");
try {
await props.updateNotes();
isInitializing.value = false;
if (
conversationAddress.value === "" &&
showNewRecipientOverlay.value === false &&
noteStore.getConversationCounterparties.length > 0
) {
conversationAddress.value = noteStore.getConversationCounterparties[0];
showChatDetail.value = true;
}
} catch (error) {
console.warn("error fetching incognitee notes: " + error);
}
});
watch(isInitializing, () => {
const counterparties = noteStore.getConversationCounterparties;
if (counterparties.length > 0) {
conversationAddress.value = counterparties[0];
showChatDetail.value = true;
}
});
const filteredLut = computed(() => {
if (!conversationAddress.value) return [];
return identities.filter((entry) =>
Expand All @@ -489,6 +535,11 @@ const filteredLut = computed(() => {
);
});
const maybeUsername = (address: string) => {
const entry = identities.find((entry) => entry.address === address);
return entry?.username;
};
const selectAddress = (address: string) => {
conversationAddress.value = encodeAddress(
address,
Expand All @@ -507,6 +558,7 @@ const recipientValid = (recipient: string): boolean => {
};
// Watcher to close overlay when a valid address is entered
watch(conversationAddress, (newAddress) => {
console.log("eventHorizon is " + props.eventHorizon);
if (showNewRecipientOverlay.value && recipientValid(newAddress)) {
conversationAddress.value = encodeAddress(
conversationAddress.value,
Expand All @@ -523,7 +575,6 @@ const submitSendForm = () => {
);
return;
}
sendPrivately();
// Reset the input field
Expand Down Expand Up @@ -633,10 +684,20 @@ const props = defineProps({
type: Function,
required: true,
},
isUpdatingNotes: {
type: Boolean,
required: true,
},
fetchOlderBucket: {
type: Function,
required: true,
},
eventHorizon: {
type: Number,
required: true,
},
bucketsCount: { type: Number, required: true },
unfetchedBucketsCount: { type: Number, required: true },
});
// Reactive variable for the input text
const inputText = ref("");
Expand Down
57 changes: 57 additions & 0 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,11 @@
<MessagingTab
:isMobile="isMobile"
:updateNotes="updateNotes"
:isUpdatingNotes="isUpdatingNotes"
:fetchOlderBucket="fetchOlderBucket"
:eventHorizon="oldestMomentInNoteBuckets"
:bucketsCount="bucketsCount"
:unfetchedBucketsCount="unfetchedBucketsCount"
/>
</div>
<div v-else-if="activeApp === 'swap'"><SwapTab /></div>
Expand Down Expand Up @@ -148,6 +152,7 @@ const walletTabRef = ref(null);
const isFetchingShieldingTargetBalance = ref(true);
const isFetchingIncogniteeBalance = ref(true);
const isUpdatingIncogniteeBalance = ref(false);
const isUpdatingNotes = ref(false);
const isChoosingAccount = ref(false);
const disableGetter = ref(false);
const activeApp = ref("wallet");
Expand Down Expand Up @@ -316,10 +321,37 @@ const fetchOlderBucket = async () => {
? firstNoteBucketIndexFetched.value - 1
: lastBucketIndex;
console.log("fetchOlderBuckets : " + firstNoteBucketIndexFetched.value);
isUpdatingNotes.value = true;
await fetchIncogniteeNotes(index);
firstNoteBucketIndexFetched.value = index;
isUpdatingNotes.value = false;
};
/// returns the date as moment before which all notes have been purged from sidechain state
const oldestMomentInNoteBuckets = computed(() => {
console.log(
"oldest moment is " + noteBucketsInfo.value?.first.unwrap().begins_at,
);
return noteBucketsInfo.value?.first.unwrap().begins_at?.toNumber();
});
const bucketsCount = computed(() => {
if (!noteBucketsInfo.value) return 0;
return (
noteBucketsInfo.value.last.unwrap().index -
noteBucketsInfo.value.first.unwrap().index +
1
);
});
const unfetchedBucketsCount = computed(() => {
if (!noteBucketsInfo.value) return 0;
return (
firstNoteBucketIndexFetched.value -
noteBucketsInfo.value.first.unwrap().index
);
});
const fetchIncogniteeNotes = async (
bucketIndex: number,
skip_if_signer_needed: boolean,
Expand Down Expand Up @@ -628,22 +660,47 @@ const subscribeWhatsReady = async () => {
const switchToWallet = () => {
activeApp.value = "wallet";
const query = { ...router.currentRoute.value.query };
query.app = activeApp.value;
router.push({
query: query,
});
};
const switchToMessaging = () => {
activeApp.value = "messaging";
const query = { ...router.currentRoute.value.query };
query.app = activeApp.value;
router.push({
query: query,
});
};
const switchToSwap = () => {
activeApp.value = "swap";
const query = { ...router.currentRoute.value.query };
query.app = activeApp.value;
router.push({
query: query,
});
};
const switchToGov = () => {
activeApp.value = "gov";
const query = { ...router.currentRoute.value.query };
query.app = activeApp.value;
router.push({
query: query,
});
};
const switchToTeerDays = () => {
activeApp.value = "teerdays";
const query = { ...router.currentRoute.value.query };
query.app = activeApp.value;
router.push({
query: query,
});
};
onMounted(async () => {
Expand Down

0 comments on commit 5bd8241

Please sign in to comment.