Fix: Handle Principal IDs in the front-end #27
Conversation
| @@ -33,8 +33,8 @@ const main = async () => { | |||
| const profiles = require("./data"); | |||
| profiles.forEach(async (profile) => { | |||
| const linkedup = await getActor("linkedup"); | |||
| const userId = await linkedup.create(profile); | |||
| console.log("...profile added", userId); | |||
| await linkedup.create(profile); | |||
There was a problem hiding this comment.
create no longer returns an id so this was "logging" undefined.
| connection: [], | ||
| profile: {}, | ||
| results: [], | ||
| }; |
There was a problem hiding this comment.
Here's a primitive state (to be replaced with something Redux-like?).
| $(".search") | ||
| .html(searchResultsPageTmpl(results)) | ||
| .show(); | ||
| state.results = results; |
There was a problem hiding this comment.
When we get search results back, we store them in state.
| try { | ||
| linkedup.connect(parseInt(userId, 10)); | ||
| const profile = state.profile; | ||
| linkedup.connect(profile.id); |
There was a problem hiding this comment.
Connect with the currently displayed profile.
| renderProfile(parseInt(userId, 10)); | ||
| const showProfile = (index) => { | ||
| const profile = state.results[index]; | ||
| renderProfile(profile.id); |
There was a problem hiding this comment.
Find the search result by index, then render it by ID.
| const connectionTmpl = data => ` | ||
| <a class="lu_connection" onclick="actions.showProfile('${data.id}')"> | ||
| const connectionTmpl = (data, index) => ` | ||
| <a class="lu_connection" onclick="actions.showProfile(${index})"> |
There was a problem hiding this comment.
Pass the index instead of the ID.
| const searchResultTmpl = data => ` | ||
| <a class="lu_search-result" onclick="actions.showProfile('${data.id}')"> | ||
| const searchResultTmpl = (data, index) => ` | ||
| <a class="lu_search-result" onclick="actions.showProfile(${index})"> |
There was a problem hiding this comment.
Pass the index instead of the ID.
| $(".profile") | ||
| .html(ownProfilePageTmpl(data)) | ||
| .show(); | ||
| state.connections = data.connections; |
There was a problem hiding this comment.
When we load connections, put them in state.
| try { | ||
| let data = await linkedup.get(userId); | ||
| state.profile = data; |
There was a problem hiding this comment.
When we load a profile, store it in state.
|
Quick test--Search result is returned and I see the Connect button, but clicking it didn't seem to do anything (or it is taking a really long time). Refreshing the browser after doing the above pulled in the connection. Yippee .... |
Overview
Introduction of Principal IDs as the
idtype meant we couldn't useprofile.idin the front-end in the same way. This PR introduces a naive application state for LinkedUp and manages actions that way.Changes
profile.idNote: Prettier wreaked havoc on formatting, so I'll explicitly call out changes as comments.