NextGraph
/
nextgraph-rs
1
6
Fork 2
Code Issues 4 Pull Requests 1 Packages Projects 2 Releases 3 Activity

working frontend framework

Browse Source
feat/orm-diffs
Laurin Weger 1 day ago
parent f3f4f5bce2
commit 2c77a640d8
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
2 changed files with 66 additions and 77 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 111
      sdk/js/examples/multi-framework-signals/src/frontends/react/HelloWorld.tsx
  2. 32
      sdk/js/signals/src/connector/ormConnectionHandler.ts

111
sdk/js/examples/multi-framework-signals/src/frontends/react/HelloWorld.tsx
Unescape View File

@ -122,38 +122,17 @@ export function HelloWorldReact() {
<tbody> <tbody>
{(() => { {(() => {
const setNestedValue = ( const setNestedValue = (
obj: any, targetObj: any,
path: string, lastKey: string,
value: any value: any
) => { ) => {
const keys = path.split("."); // targetObj is the direct parent object containing the property
let current = obj; // lastKey is the property name to set
targetObj[lastKey] = value;
for (
let i = 0;
i < keys.length - 1;
i++
) {
current = current[keys[i]];
}
current[keys[keys.length - 1]] = value;
};
const getNestedValue = (
obj: any,
path: string
) => {
return path
.split(".")
.reduce(
(current, key) => current[key],
obj
);
}; };
return flattenObject(ormObj).map( return flattenObject(ormObj).map(
([key, value]) => ( ([key, value, lastKey, parentObj]) => (
<tr key={key}> <tr key={key}>
<td>{key}</td> <td>{key}</td>
<td> <td>
@ -175,8 +154,8 @@ export function HelloWorldReact() {
value={value} value={value}
onChange={(e) => { onChange={(e) => {
setNestedValue( setNestedValue(
ormObj, parentObj,
key, lastKey,
e.target e.target
.value .value
); );
@ -189,8 +168,8 @@ export function HelloWorldReact() {
value={value} value={value}
onChange={(e) => { onChange={(e) => {
setNestedValue( setNestedValue(
ormObj, parentObj,
key, lastKey,
Number( Number(
e.target e.target
.value .value
@ -205,8 +184,8 @@ export function HelloWorldReact() {
checked={value} checked={value}
onChange={(e) => { onChange={(e) => {
setNestedValue( setNestedValue(
ormObj, parentObj,
key, lastKey,
e.target e.target
.checked .checked
); );
@ -216,17 +195,12 @@ export function HelloWorldReact() {
<div> <div>
<button <button
onClick={() => { onClick={() => {
const currentArray =
getNestedValue(
ormObj,
key
);
setNestedValue( setNestedValue(
ormObj, parentObj,
key, lastKey,
[ [
...currentArray, ...value,
currentArray.length + value.length +
1, 1,
] ]
); );
@ -236,19 +210,14 @@ export function HelloWorldReact() {
</button> </button>
<button <button
onClick={() => { onClick={() => {
const currentArray =
getNestedValue(
ormObj,
key
);
if ( if (
currentArray.length > value.length >
0 0
) { ) {
setNestedValue( setNestedValue(
ormObj, parentObj,
key, lastKey,
currentArray.slice( value.slice(
0, 0,
-1 -1
) )
@ -263,13 +232,17 @@ export function HelloWorldReact() {
<div> <div>
<button <button
onClick={() => { onClick={() => {
const currentSet = const newSet =
getNestedValue( new Set(
ormObj, value
key
); );
currentSet.add( newSet.add(
`item${currentSet.size + 1}` `item${newSet.size + 1}`
);
setNestedValue(
parentObj,
lastKey,
newSet
); );
}} }}
> >
@ -277,20 +250,24 @@ export function HelloWorldReact() {
</button> </button>
<button <button
onClick={() => { onClick={() => {
const currentSet = const arr =
getNestedValue( Array.from(
ormObj, value
key
); );
const lastItem = const lastItem =
Array.from( arr.pop();
currentSet
).pop();
if ( if (
lastItem lastItem !==
undefined
) { ) {
currentSet.delete( const newSet =
lastItem new Set(
arr
);
setNestedValue(
parentObj,
lastKey,
newSet
); );
} }
}} }}

32
sdk/js/signals/src/connector/ormConnectionHandler.ts
Unescape View File

@ -166,7 +166,7 @@ export class OrmConnection<T extends BaseType> {
// Do this in case the there was any (incorrect) data added before initialization. // Do this in case the there was any (incorrect) data added before initialization.
this.signalObject.clear(); this.signalObject.clear();
// Convert arrays to sets and apply to signalObject (we only have sets but can only transport arrays). // Convert arrays to sets and apply to signalObject (we only have sets but can only transport arrays).
for (const newItem of recurseArrayToSet(initialData)) { for (const newItem of parseOrmInitialObject(initialData)) {
this.signalObject.add(newItem); this.signalObject.add(newItem);
} }
console.log( console.log(
@ -199,10 +199,17 @@ export class OrmConnection<T extends BaseType> {
/** Function to create random subject IRIs for newly created nested objects. */ /** Function to create random subject IRIs for newly created nested objects. */
private generateSubjectIri = (path: (string | number)[]): string => { private generateSubjectIri = (path: (string | number)[]): string => {
// Generate random string. console.debug("Generating new random id for path", path);
let b = Buffer.alloc(33); // Generate 33 random bytes using Web Crypto API
const b = new Uint8Array(33);
crypto.getRandomValues(b); crypto.getRandomValues(b);
const randomString = b.toString("base64url"); // Convert to base64url
const base64url = (bytes: Uint8Array) =>
btoa(String.fromCharCode(...bytes))
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
const randomString = base64url(b);
if (path.length > 0 && path[0].toString().startsWith("did:ng:o:")) { if (path.length > 0 && path[0].toString().startsWith("did:ng:o:")) {
// If the root is a nuri, use that as a base IRI. // If the root is a nuri, use that as a base IRI.
@ -232,14 +239,19 @@ export function deepPatchesToDiff(patches: DeepPatch[]): Patches {
}) as Patches; }) as Patches;
} }
const recurseArrayToSet = (obj: any): any => { const parseOrmInitialObject = (obj: any): any => {
// Regular arrays become sets.
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
return new Set(obj.map(recurseArrayToSet)); return new Set(obj.map(parseOrmInitialObject));
} else if (obj && typeof obj === "object" && obj instanceof Map) {
return Object.fromEntries(obj.entries());
} else if (obj && typeof obj === "object") { } else if (obj && typeof obj === "object") {
for (const key of Object.keys(obj)) { if ("@id" in obj) {
obj[key] = recurseArrayToSet(obj[key]); // Regular object.
for (const key of Object.keys(obj)) {
obj[key] = parseOrmInitialObject(obj[key]);
}
} else {
// Object does not have @id, that means it's a set of objects.
return new Set(Object.values(obj));
} }
return obj; return obj;
} else { } else {

Write Preview
Loading…
Cancel
Save