diff --git a/projects/api-boundries/src/app/relations.service.ts b/projects/api-boundries/src/app/relations.service.ts
index a5dfced..b0ad332 100644
--- a/projects/api-boundries/src/app/relations.service.ts
+++ b/projects/api-boundries/src/app/relations.service.ts
@@ -9,6 +9,12 @@ const randChar = () => seed[randomInt(seed.length)];
const randChars = (n = 3) => Array.from({ length: n }, () => randChar()).join('');
export const getId = () => randChars(4) + '-' + Math.round(performance.now() * 10000000000).toString(36);
+export const createUniqueId = Date.now()
+ .toString(36)
+ .split('')
+ .reverse()
+ .map(c => c + randChar())
+ .join();
@Injectable({
providedIn: 'root',
diff --git a/src/app/demo-users.service.ts b/src/app/demo-users.service.ts
index 9a73e97..4bc201b 100644
--- a/src/app/demo-users.service.ts
+++ b/src/app/demo-users.service.ts
@@ -1,5 +1,6 @@
import { Injectable } from '@angular/core';
import { first, map, mergeMap, shareReplay, startWith, Subject, take, tap, timer, firstValueFrom } from 'rxjs';
+import { createUniqueId } from './util/random-things';
const chanceProm = import('chance')
/** some trickery as the typings apparently don't match the reality */
@@ -15,7 +16,7 @@ enum UserState {
}
export interface DemoUser {
- id: number;
+ id: string;
username: string;
password?: string;
email: string;
@@ -61,7 +62,7 @@ export class DemoUserService {
// users.reduce((min, line) => (min = Math.max(min, line.id)), 0) + 1;
const newUsers = await Promise.all(
Array.from({ length: newUserCount }).map(async (e, i) => ({
- id: base + i,
+ id: createUniqueId(),
...(await fakeUser()),
}))
);
@@ -72,18 +73,14 @@ export class DemoUserService {
/** async helper to 'save' users. async makes it easier to read if we wait on the suer promise */
async saveUser(user: DemoUser) {
/** get a current list of users out of the 'cache'*/
- const users = await this.allUsers$.pipe(take(1)).toPromise();
+ const users = await firstValueFrom(this.allUsers$);
const index = users.findIndex(row => row.id === user.id);
if (index > -1) {
/** update the found user */
Object.assign(users[index], user);
} else {
// create a new id
- let id;
- while (!id || users.findIndex(row => row.id === id) > -1) {
- /** create an random id and check if its used */
- id = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
- }
+ let id = createUniqueId();
/** add it to th array of users. */
users.unshift({ ...user, id });
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 620e47d..2b5bd27 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -191,6 +191,6 @@ export const routes: Routes = [
path: 'signalPlay/:id',
loadComponent: () => import('./signal-play/signal-play.component'),
},
- { path: '**', redirectTo: 'routeList' },
- // { path: '**', redirectTo: 'signalPlay' },
+ // { path: '**', redirectTo: 'routeList' },
+ { path: '**', redirectTo: 'signalPlay' },
];
diff --git a/src/app/signal-play/signal-play.component.ts b/src/app/signal-play/signal-play.component.ts
index 600b64b..70736eb 100644
--- a/src/app/signal-play/signal-play.component.ts
+++ b/src/app/signal-play/signal-play.component.ts
@@ -7,7 +7,7 @@ import { JsonPipe } from '@angular/common';
standalone: true,
imports: [JsonPipe],
template: `
- {{ sps.$lastId() }}
+ {{ $availableUserCount() }}
{{$user()|json}}
@@ -18,9 +18,17 @@ import { JsonPipe } from '@angular/common';
})
export default class SignalPlayComponent {
sps = inject(SignalPlayService);
- id = model(0);
+ id = model('');
+
+ $user = computed(() => {
+ const user = this.sps.getUser(this.id());
+ if (user) return user;
+ // none found, get first one!
+ return this.sps.$users()[0];
+ });
+
+ $availableUserCount = computed(() => this.sps.$users().length);
- $user = computed(() => this.sps.getUser(this.id()));
relId = (n = 1) => {
const newId = this.sps.getRelative(this.id(), n);
return newId ? newId : this.id();
diff --git a/src/app/signal-play/signal-play.service.ts b/src/app/signal-play/signal-play.service.ts
index 75fa746..c43d89e 100644
--- a/src/app/signal-play/signal-play.service.ts
+++ b/src/app/signal-play/signal-play.service.ts
@@ -10,14 +10,14 @@ export class SignalPlayService {
$users = observableComputed(() => this.users.allUsers$);
- getUser = (n: number) => {
+ getUser = (n: string) => {
const users = this.$users();
- return users?.find(user => +user.id === +n);
+ return users?.find(user => user.id === n);
};
- getRelative = (id: number, offset = 1) => {
+ getRelative = (id: string, offset = 1) => {
const users = this.$users() || [];
- const userIndex = users.findIndex(u => +u.id === +id);
+ const userIndex = users.findIndex(u => u.id === id);
if (userIndex === -1) {
return users[0]?.id; // not found, return first id
}
diff --git a/src/app/util/random-things.ts b/src/app/util/random-things.ts
new file mode 100644
index 0000000..7cb114b
--- /dev/null
+++ b/src/app/util/random-things.ts
@@ -0,0 +1,12 @@
+const seed = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export const randomInt = (max = 2000) => Math.floor(Math.random() * max);
+const randChar = () => seed[randomInt(seed.length)];
+const randChars = (n = 3) => Array.from({ length: n }, () => randChar()).join('');
+
+export const getId = () => randChars(4) + '-' + Math.round(performance.now() * 10000000000).toString(36);
+export const createUniqueId = () => Date.now()
+ .toString(36)
+ .split('')
+ .reverse()
+ .map(c => c + randChar())
+ .join('');
diff --git a/src/utils/signal-helpers.ts b/src/utils/signal-helpers.ts
index ad97680..5a72eab 100644
--- a/src/utils/signal-helpers.ts
+++ b/src/utils/signal-helpers.ts
@@ -24,7 +24,7 @@ type ToWritableSignal = {
/**
* Convert an observable into a writable signal.
* @param src the observable. Will only take the first submitted value.
- * @param options, takes an optional initial value and an optional error callback.
+ * @param options, takes an optional initial value and an optional error callback.O
* @returns a writeable signal that will be updated with the first value from the observable.
*/
export const toWritableSignal = (