samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated the Messages to the new abstracted composite syntax.

Browse Source
This commit is contained in:
Samuel Andert 2023-07-26 16:25:59 +02:00
parent 920e7b7ca1
commit 979251bd6b
15 changed files with 220 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/ClearMessages.svelte
View File

@ -1,5 +1,5 @@
<script>
import { clearMessages } from '$lib/services/messages';
import { clearMessages } from '$lib/services/messages/messages';
function handleClear() {
clearMessages();

2
src/lib/components/GoogleAuth.svelte
View File

@ -3,7 +3,7 @@
import { isSignInRedirect, getProviderFromUrl } from '@lit-protocol/lit-auth-client';
import type { IRelayPKP } from '@lit-protocol/types';
import { ProviderType } from '@lit-protocol/constants';
import { createMessage } from '$lib/services/messages';
import { createMessage } from '$lib/services/messages/messages';
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
const redirectUri = 'http://localhost:5173/';

39
src/lib/components/HelloEarth/HelloEarth.svelte
View File

@ -3,34 +3,37 @@
export let services;
export let store;
// Watch for store changes
let isServicesLoaded = false;
let isStoreLoaded = false;
onMount(async () => {
if (services && services.helloEarthAlert) {
console.log('Alerted by HelloEarthAlert');
// Check services loading
if (services.helloEarthAlert) {
// services.helloEarthAlert.alertMe();
isServicesLoaded = true;
} else {
console.error('Services or helloEarthAlert not loaded');
console.error('helloEarthAlert not loaded');
}
});
$: if ($store) isStoreLoaded = true;
</script>
{#if !$store}
<div>Loading store...</div>
{:else}
<div class="p-12 bg-blue-400">
Hello Earth
{#if $store.pkpWallet}{$store.pkpWallet.address}{/if}
{#if $store.todos && $store.messages}
<ul>
{#if isStoreLoaded}
<div class="p-12 bg-blue-400 rounded-md shadow-lg">
<p class="mb-4 text-xl font-bold text-white">Hello Earth</p>
{#if $store.pkpWallet}
<p class="mb-6 text-white">Wallet Address: {$store.pkpWallet.address}</p>
{/if}
Reference TodoList
{#if $store.todos}
<ul class="pl-5 list-decimal">
{#each $store.todos as todo}
<li>{todo.name}</li>
{/each}
</ul>
<ul>
{#each $store.messages as message}
<li>{message.text} - {message.date}</li>
<li class="p-2 mb-2 text-gray-700 bg-white rounded shadow">{todo.text}</li>
{/each}
</ul>
{/if}
</div>
{:else}
<div class="p-6 text-center bg-gray-100 rounded-md shadow-lg">Loading...</div>
{/if}

51
src/lib/components/Messages.svelte
View File

@ -1,13 +1,10 @@
<script>
import { messages } from '$lib/services/messages';
import { onMount, afterUpdate } from 'svelte';
import Composite from '$lib/core/Composite.svelte';
let latestMessages = [];
export let store;
messages.subscribe((value) => {
latestMessages = value;
});
let isStoreLoaded = false;
let messagesContainer;
@ -24,24 +21,30 @@
afterUpdate(() => {
scrollToBottom();
});
$: if ($store) isStoreLoaded = true;
</script>
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
{#each latestMessages as message}
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
</div>
<p class="mt-2 text-base text-gray-800">{message.text}</p>
</div>
<!-- Render Composite Component -->
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
</main>
{#if isStoreLoaded}
{#if $store.messages}
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
{#each $store.messages as message}
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
</div>
<p class="mt-2 text-base text-gray-800">{message.text}</p>
</div>
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
</main>
{/if}
{:else}
<div>Loading...</div>
{/if}

2
src/lib/components/SendMessage.svelte
View File

@ -1,5 +1,5 @@
<script>
import { createMessage } from '$lib/services/messages';
import { createMessage } from '$lib/services/messages/messages';
export function sendMessage(text) {
if (text && text.trim() !== '') {

18
src/lib/core/Composite.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { onDestroy } from 'svelte';
import Composite from './Composite.svelte';
import components from '$lib/core/componentLoader';
import services from '$lib/core/servicesLoader';
@ -66,9 +66,19 @@
if (externalID === 'data') {
const unsubscribe = dataStore.subscribe((store) => {
if (externalKey in store) {
localStore.update((storeValue) => {
return { ...storeValue, [localKey]: store[externalKey] };
});
// Check if the data item is a Svelte store
if (store[externalKey] && typeof store[externalKey].subscribe === 'function') {
let innerUnsub = store[externalKey].subscribe((value) => {
localStore.update((storeValue) => {
return { ...storeValue, [localKey]: value };
});
});
onDestroy(innerUnsub);
} else {
localStore.update((storeValue) => {
return { ...storeValue, [localKey]: store[externalKey] };
});
}
}
});

30
src/lib/core/dataLoader.ts
View File

@ -1,31 +1,11 @@
// dataLoader.ts
import { writable } from 'svelte/store';
// Using mock data, in a real-world scenario this could be fetched from an API.
const queryMessagesData = [
{
text: 'text1',
date: 'date1',
id: 'id1'
},
{
text: 'text2',
date: 'date2',
id: 'id2'
}
];
const queryTodosData = [
{
name: "todo 1"
},
{
name: "todo 2"
},
{ name: "todo 3" }
];
import { queryMessagesData } from '$lib/data/queryMessages';
import { queryTodosData } from '$lib/data/queryTodos';
// The store that holds the data sets
export const dataStore = writable({
queryMessages: queryMessagesData,
queryTodos: queryTodosData
});
});

43
src/lib/data/queryMessages.ts
View File

@ -1,9 +1,38 @@
// queryMessages.ts
import { dataStore } from '$lib/core/dataLoader';
// $lib/data/queryMessages.ts
const queryMessages = [
{ text: 'text', date: 'date', id: 'id' },
{ text: 'text', date: 'date', id: 'id' }
];
import { writable } from 'svelte/store';
dataStore.registerData('messages', queryMessages);
export interface Message {
text: string;
timestamp: string;
sender: string;
type: string;
composite?: object | null;
}
const isClientSide = typeof window !== "undefined";
function getFromLocalStorage(key, defaultValue) {
return isClientSide && localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key))
: defaultValue;
}
function setToLocalStorage(key, value) {
if (isClientSide) {
localStorage.setItem(key, JSON.stringify(value));
}
}
const initialMessages: Message[] = getFromLocalStorage('chat-messages', [
{ text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
{ text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" }
]);
const messages = writable(initialMessages);
messages.subscribe(currentMessages => {
setToLocalStorage('chat-messages', currentMessages);
});
export const queryMessagesData = messages;

24
src/lib/data/queryTodos.ts
View File

@ -1,9 +1,17 @@
// queryTodos.ts
import { dataStore } from '$lib/core/dataLoader';
// $lib/data/queryTodos.ts
import { writable } from 'svelte/store';
const queryTodos = [
{ name: "todo 1" },
{ name: "todo 2" }
];
dataStore.registerData('todos', queryTodos);
export const queryTodosData = writable([
{
id: "id1",
text: "todo 1"
},
{
id: "id2",
text: "todo 2"
},
{
id: "id3",
text: "todo 3"
}
]);

67
src/lib/services/messages.ts
View File

@ -1,67 +0,0 @@
import { writable } from 'svelte/store';
// Helper function to determine if we're running on the client side (browser) or server side.
function isClientSide() {
return typeof window !== "undefined";
}
// Safely get item from localStorage
function getFromLocalStorage(key, defaultValue) {
if (isClientSide()) {
return localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key))
: defaultValue;
}
return defaultValue;
}
// Safely set item to localStorage
function setToLocalStorage(key, value) {
if (isClientSide()) {
localStorage.setItem(key, JSON.stringify(value));
}
}
// Define the updated Message interface
export interface Message {
text: string;
timestamp: string;
sender: string;
type: string;
composite?: object | null; // New field
}
// Load messages from localStorage or set an empty array if not available
const initialMessages = getFromLocalStorage('chat-messages', []);
// Convert the array to a writable store
export const messages = writable(initialMessages);
// Subscribe to messages store to watch for changes and save them to localStorage
messages.subscribe(currentMessages => {
setToLocalStorage('chat-messages', currentMessages);
});
export function createMessage(messageData) {
const currentDate = new Date().toLocaleString();
const newMessageObj = {
text: messageData.text,
timestamp: currentDate,
sender: messageData.sender,
type: messageData.type,
composite: messageData.composite || null // New field
};
messages.update(oldMessages => [...oldMessages, newMessageObj]);
}
export function clearMessages() {
messages.set([]);
}
// Dummy messages
export const messagesList: Message[] = [
{ text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
{ text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
// Add more dummy messages here with the timestamp and sender properties
];

92
src/lib/services/messages/messages.ts Normal file
View File

@ -0,0 +1,92 @@
// $lib/services/messages.ts
import { queryMessagesData } from '$lib/data/queryMessages';
// The createMessage function now accepts a messageData parameter.
export function createMessage(messageData) {
const currentDate = new Date().toLocaleString();
const newMessageObj = {
text: messageData.text,
timestamp: currentDate,
sender: messageData.sender,
type: messageData.type,
composite: messageData.composite || null
};
// We use the $ prefix to get the value out of a Svelte store
// and then set the new value back into the store.
queryMessagesData.update(oldMessages => [...oldMessages, newMessageObj]);
}
export function clearMessages() {
queryMessagesData.set([]);
}
// import { writable } from 'svelte/store';
// // Helper function to determine if we're running on the client side (browser) or server side.
// function isClientSide() {
// return typeof window !== "undefined";
// }
// // Safely get item from localStorage
// function getFromLocalStorage(key, defaultValue) {
// if (isClientSide()) {
// return localStorage.getItem(key)
// ? JSON.parse(localStorage.getItem(key))
// : defaultValue;
// }
// return defaultValue;
// }
// // Safely set item to localStorage
// function setToLocalStorage(key, value) {
// if (isClientSide()) {
// localStorage.setItem(key, JSON.stringify(value));
// }
// }
// // Define the updated Message interface
// export interface Message {
// text: string;
// timestamp: string;
// sender: string;
// type: string;
// composite?: object | null; // New field
// }
// // Load messages from localStorage or set an empty array if not available
// const initialMessages = getFromLocalStorage('chat-messages', []);
// // Convert the array to a writable store
// export const messages = writable(initialMessages);
// // Subscribe to messages store to watch for changes and save them to localStorage
// messages.subscribe(currentMessages => {
// setToLocalStorage('chat-messages', currentMessages);
// });
// export function createMessage(messageData) {
// const currentDate = new Date().toLocaleString();
// const newMessageObj = {
// text: messageData.text,
// timestamp: currentDate,
// sender: messageData.sender,
// type: messageData.type,
// composite: messageData.composite || null // New field
// };
// messages.update(oldMessages => [...oldMessages, newMessageObj]);
// }
// export function clearMessages() {
// messages.set([]);
// }
// // Dummy messages
// export const messagesList: Message[] = [
// { text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
// { text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
// // Add more dummy messages here with the timestamp and sender properties
// ];

2
src/lib/services/mintPkp/mintPkp.ts
View File

@ -1,6 +1,6 @@
import type { IRelayPKP } from '@lit-protocol/types';
import type { IProvider } from '$lib/services/provider/IProvider';
import { createMessage } from '$lib/services/messages';
import { createMessage } from '$lib/services/messages/messages';
export async function mintPkp(provider: IProvider, authMethod: any): Promise<IRelayPKP> {
createMessage({

2
src/lib/services/provider/setupChainProvider.ts
View File

@ -4,7 +4,7 @@ import { publicProvider } from '@wagmi/core/providers/public';
import { InjectedConnector } from '@wagmi/core/connectors/injected';
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
import { createMessage } from '$lib/services/messages';
import { createMessage } from '$lib/services/messages/messages';
export interface ProviderData {
walletConnectId: string;

2
src/lib/services/wallet/wallet.ts
View File

@ -1,6 +1,6 @@
import { getStoredAuthSig } from '$lib/services/authWithMetamask/authWithMetamask';
import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
import { createMessage } from '$lib/services/messages';
import { createMessage } from '$lib/services/messages/messages';
// Use a variable to keep track of whether the wallet has been connected or not
let isWalletConnected = false;

5
src/routes/+page.svelte
View File

@ -40,9 +40,10 @@
services: ['helloEarthAlert']
},
{
id: 'messages',
id: 'me',
component: 'Messages',
slot: 'main'
slot: 'main',
map: { messages: 'data.queryMessages' }
},
{
id: 'terminal',