@lightningx10 @ilhamgum @draeder @Lexi:matrix.org @bmatusiak @rococtz:matrix.org @realdocweird @amark
Guys, I subscribed to some nodes with on()
, now how to render them on every change in ReactJS? I'm using useEffect()
hook and trying to render the change but doesn't seem to work? This is what I wrote:
const [msg, setMsg] = useState([])
useEffect({
someFunctionToUpdateMsg()
}, [msg]) // If I write it here, it will be looping through this function permanently.
// Even if I write setMsg here it doesn't work.
const someFunctionToUpdateMsg = () => {
someNode
.map()
.on(data => {
const newValue = doingSomeStuff()
setMsg(newValue) // Update msg.
})
}
So, I subscribe on everyone of them with on()
, but when I change any of them with setMsg()
it doesn't update the UI the DOM?
How to solve this thing?
@amark @spoggy:matrix.org
https://github.com/worldpeaceenginelabs/METAVERSE-GUN
So i have this combination of Iris (Gun) and a CesiumJS globe running https://metaverse-gun.pages.dev/
Now i want to populate the globe with Gun entries.
Need your help here, please.
BACKGROUND:
I found partly the way of how to populate the globe with pins from Gun!
A pin could contain a post /event /mission /brainstorming/ petition /crowdfunding / location / party / product / giveaway /drop or catch up location of whatever, a person, your dog, your car, just name it 😁) !whatever the metaverse dev wants!
So if the user clicks on the globe, it opens up a form with multiple fields to drop a pin with a post on the globe. Which opens on click a card with the form input from the post creator. (form is prefilled with the click/tap coordinates, which works already in my globe i work with)
On the form side, i will use an extended version of form-gun. Which works solo already too. https://github.com/worldpeaceenginelabs/FORM-GUN
But on the globe side, ill want to make the globe updating on Gun updates. Objects get manually added to the globe with this unhandy constructor usually: https://github.com/worldpeaceenginelabs/CLOUD-ATLAS-SVELTE/blob/main/src/Cesium.svelte#L171 (its just Typescript btw)
But i want to automate that part, so the globe acts like a Gun group chat for instance.
Every "chat message" (form input) is shown on the map as a pin. Auto updating as far as i understand Gun???
QUESTIONS:
1.Is the CesiumJS constructor just unhandy and can i translate it into something Gun can distribute? (total coding beginner in general question)
But Gun specific:
2.When a user saves a new form in Gun, all globes of all other users will receive that update on Gun, but only the new data gets downloaded, the already downloaded Gun entries I can just safe in local storage, right? (5MB is theoretically around 5 Million pins (form input = max 1byte or 1000 ascii characters)
Or is the size of an record = form input + Gunspecific + SEA?
Is that a possible scenario? Thinking it through for some time now and want to know, does this work out or do i under/over estimate, miss something?
3.Is there a way to filter/limit the download of Gun entries? Like limited to a region where the user is, or limited to the region the user focuses on the globe? (which information we have in the gun entry itself from the click coordinates) Is that a LEX query maybe? (best: instead of all of my users waisting the whole localStorage for all 5 Million pins, i like every user to store only his related, max 5 Million pins)
gun.on("auth", ()=>{}
event. Is there a list of internal events? Something like leave
to check logout?
auth
. Workaround is a logout function which set logout state to vue store variable. That works for me
bye
for leaving but that's not reliable. The right way to do it is to have that user update some node every x seconds/minutes saying "I am here, I am here, I am here". If you want to see if someone is online, you check that node's timestamp and make sure it's more recent than whatever seconds/minutes.
gun.get('~@alias').set(user)
I think, tho this is pointless without a password to derive a Proof-of-Work seed), this needs to get cleaned up - PRs welcome.+new Date
for "give me most recent chat" (even if last messages were days old!) and lastSessionDate
for "start me at where I was before", then you just take timestamp of lowest or highest chat as you scroll down or up, to continue the pages!.put(data, ack => console.log(ack.err)
will start erring. @lightningx10 GUN should not drop/delete old localStorage data, please report a bug if it does!!!gun.get('pin-list').map().on(...)
but (3) correct, as it grows over time, you'll want to limit that. Instead maybe do gun.get('pin-list-'+ cesium.tileX + cesium.tileY + cesium.tileZ
(pseudo code! Check examples/move/index.html
or examples/where
in GUN for tile tips from Leaflet).leave
is synchronous (not async) so no event needed - tho I get what you're saying, you can do your own custom events just by doing gun.on('foo', {data})
:). Oh, bye
is for network logic, not User. Heartbeat :+1: .@amark thx. i understand 2 and 3 now.
Related to 1.:
I think i will only leave the variable in cesium.js (yellow) but define it as addUserLocation = gun.get('pin-list' +latitude-range + longitude-range).map().on(...)
(pseudo code) but without the blue text. Then the gun.get fills the variable addUserLocation
with the blue text from the picture above, right?
So the question is, how can i feed the blue text/code below into a Gun object with gun.put? (all brackets included)
(
viewer: Viewer,
userLocation: GeolocationPosition,
userLocationCartesian: Cartesian3,
userLocationPointId: string
) => {
viewer.entities.add(
createPulsatingPoint(
viewer,
userLocationPointId,
Cartesian3.fromDegrees(
userLocation.coords.longitude,
userLocation.coords.latitude,
0
),
Color.LIME
)
);
};
And cool sideffect!!! : Since we feed the objects on the globe from Gun in runtime, we have the hot reloading right from the start! And with @draeder Gunsafe or part of it, we can have hot reloading code in general, on top. Or even independent from / without cesiumjs.
Hey guys, I have a question to open / on. When I'm using
gun.get('test').map().on((data) => console.log(data))
I'll get every entry with deepness of 1 Layer
BUT
gun.get('test').map().open((data) => console.log(data))
I would like to get every entry with full deepness.
-> I get only a view entrys (e.g. 3)
That's strange, how do I get the full list of entrys ?
IGun
is just wrong, when trying Gun.state.is(node, key)
, it comes up as a type error, because Gun.state is just a method that returns a number, so there is no is
property on it. I feel like the types should just be disabled... But I don't know how without migrating all of my existing typescript code to JS, is there any other way?
@amark something else btw: i had a really great talk with a friend of mine the other day, and he introduced me to this dictionary which is like a universal language (pictures instead of words)
(arrow on the right to click trough some pages of the book)
https://www.bic-media.com/mobile/mobileWidget-jqm1.4.html?buyButton=no&clickTeaser=no&download=no&ePubScrolling=no&flipBook=no&fullscreen=yes&links=no&metadata=no&noMobilePreCover=no&optimizeSize=no&resizable=yes&showMenu=no&search=no&showExtraDownloadButton=no&showExtraFacebookButton=no&showExtraFullScreenButton=no&showExtraShopButton=no&showFullScreenButton=no&showLanguageButton=no&showTAFButton=no&tellafriend=no&isbn=978-3-12-514156-8
My idea: Lets create a universal language / translation app with Gun. (a Gun killer app, maybe named Translate-Gun or Universal Translator something like that)
Which will be basically a picture database with an index (not words, but topic pictograms like in the book), a rating function, and Gun sync of course.
Lets drop all 650 pictograms from the book into Gun as a basic dataset. (I would buy and scan them to files myself, or i just search for new free license ones) And then on top, users could add more, custom pictograms, but these need to get rated first (if they are internationally understandable) before they are allowed by the community to get dropped into the GunDB too.
Cool idea?
db = GUN('host')
, I can't figure out how to import that as any. On the other hand, I found // @ts-ignore
, which does the job just fine and allows me to remove it in the future when the TS implementation is better.