Skip to content

Refactor on data loading #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 27, 2022
Merged

Refactor on data loading #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions vue-app/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import {
LOGIN_USER,
LOAD_FACTORY_INFO,
LOAD_MACI_FACTORY_INFO,
LOAD_BRIGHT_ID,
} from '@/store/action-types'
import { SET_CURRENT_USER } from '@/store/mutation-types'

Expand Down Expand Up @@ -124,15 +125,30 @@ export default class App extends Vue {
loginUser = async () => {
if (!this.$web3.user) return

// Connect & auth to gun db
await this.$store.dispatch(LOGIN_USER, this.$web3.user)

this.$store.commit(SET_CURRENT_USER, this.$web3.user)
await this.$store.dispatch(LOGIN_USER)
this.$store.dispatch(LOAD_USER_INFO)
if (this.$store.state.currentRound) {
// Load cart & contributor data for current round
this.$store.dispatch(LOAD_CART)
this.$store.dispatch(LOAD_COMMITTED_CART)
this.$store.dispatch(LOAD_CONTRIBUTOR_DATA)
this.$store.dispatch(LOAD_BRIGHT_ID)
}

@Watch('isUserAndRoundLoaded')
loadUserRoundData = async () => {
if (!this.isUserAndRoundLoaded) {
return
}

this.$store.dispatch(LOAD_USER_INFO)

// Load cart & contributor data for current round
this.$store.dispatch(LOAD_CART)
this.$store.dispatch(LOAD_COMMITTED_CART)
this.$store.dispatch(LOAD_CONTRIBUTOR_DATA)
}

get isUserAndRoundLoaded(): boolean {
return !!this.currentUser && !!this.$store.state.currentRound
}

private get currentUser(): User {
Expand Down
74 changes: 7 additions & 67 deletions vue-app/src/components/RoundInformation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,11 +303,7 @@ import { BigNumber, FixedNumber } from 'ethers'
import { DateTime } from 'luxon'

import { RoundInfo, getCurrentRound } from '@/api/round'
import {
Project,
getRecipientRegistryAddress,
getProjects,
} from '@/api/projects'
import { Project, getRecipientRegistryAddress } from '@/api/projects'
import { chain } from '@/api/core'

import { lsGet, lsSet } from '@/utils/localStorage'
Expand All @@ -319,32 +315,9 @@ import WalletModal from '@/components/WalletModal.vue'
import TimeLeft from '@/components/TimeLeft.vue'
import Links from '@/components/Links.vue'
import ImageResponsive from '@/components/ImageResponsive.vue'
import {
SELECT_ROUND,
LOAD_ROUND_INFO,
LOAD_USER_INFO,
LOAD_CART,
LOAD_COMMITTED_CART,
LOAD_CONTRIBUTOR_DATA,
} from '@/store/action-types'
import { LOAD_ROUND_INFO } from '@/store/action-types'
import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'

const SHUFFLE_RANDOM_SEED = Math.random()

function random(seed: number, i: number): number {
// Like Math.random() but seedable
const s = Math.sin(seed * i) * 10000
return s - Math.floor(s)
}

function shuffleArray(array: any[]) {
// Shuffle array using the Durstenfeld algo
// More info: https://stackoverflow.com/a/12646864/1868395
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(random(SHUFFLE_RANDOM_SEED, i) * (i + 1))
;[array[i], array[j]] = [array[j], array[i]]
}
}
import { Watch } from 'vue-property-decorator'

@Component({
components: {
Expand All @@ -367,47 +340,23 @@ export default class RoundInformation extends Vue {
this.$route.params.address ||
this.$store.state.currentRoundAddress ||
(await getCurrentRound())
if (
roundAddress &&
roundAddress !== this.$store.state.currentRoundAddress
) {
// Select round and (re)load round info
this.$store.dispatch(SELECT_ROUND, roundAddress)
await this.$store.dispatch(LOAD_ROUND_INFO)
if (this.$store.state.currentUser) {
// Load user data if already logged in
this.$store.dispatch(LOAD_USER_INFO)
this.$store.dispatch(LOAD_CART)
this.$store.dispatch(LOAD_COMMITTED_CART)
this.$store.dispatch(LOAD_CONTRIBUTOR_DATA)
}
}

if (this.$store.state.recipientRegistryAddress === null) {
const registryAddress = await getRecipientRegistryAddress(roundAddress)
this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
}
await this.loadProjects()

// Message cap notice defaults with `hidden` class
// If it hasn't been dismissed yet, this class is toggled off until dismissed
const showNotice = !lsGet(this.lsIsNoticeHiddenKey, false)
if (showNotice) {
this.toggleNotice()
}
this.isLoading = false
}

private async loadProjects() {
const projects = await getProjects(
this.$store.state.recipientRegistryAddress,
this.currentRound?.startTime.toSeconds(),
this.currentRound?.votingDeadline.toSeconds()
)
const visibleProjects = projects.filter((project) => {
return !project.isHidden && !project.isLocked
})
shuffleArray(visibleProjects)
this.projects = visibleProjects
@Watch('currentRound')
stopLoading() {
this.isLoading = false
}

get currentRound(): RoundInfo | null {
Expand Down Expand Up @@ -441,15 +390,6 @@ export default class RoundInformation extends Vue {
return this.formatAmount(totalInRound)
}

get filteredProjects(): Project[] {
return this.projects.filter((project: Project) => {
if (!this.search) {
return true
}
return project.name.toLowerCase().includes(this.search.toLowerCase())
})
}

formatIntegerPart(value: FixedNumber): string {
if (value._value === '0.0') {
return '0'
Expand Down
8 changes: 2 additions & 6 deletions vue-app/src/store/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,12 +285,8 @@ const actions = {
getContributorStorageKey(state.currentRound.fundingRoundAddress)
)
},
async [LOGIN_USER]({ state, dispatch }) {
await loginUser(
state.currentUser.walletAddress,
state.currentUser.encryptionKey
)
dispatch(LOAD_BRIGHT_ID)
async [LOGIN_USER](_, { walletAddress, encryptionKey }) {
await loginUser(walletAddress, encryptionKey)
},
[LOGOUT_USER]({ commit, dispatch }) {
dispatch(UNWATCH_CART)
Expand Down
28 changes: 1 addition & 27 deletions vue-app/src/views/Project.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,6 @@ import ProjectProfile from '@/components/ProjectProfile.vue'
import AddToCartButton from '@/components/AddToCartButton.vue'
import LinkBox from '@/components/LinkBox.vue'
import ClaimButton from '@/components/ClaimButton.vue'
import {
SELECT_ROUND,
LOAD_ROUND_INFO,
LOAD_USER_INFO,
LOAD_CART,
LOAD_COMMITTED_CART,
LOAD_CONTRIBUTOR_DATA,
} from '@/store/action-types'
import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'
import { markdown } from '@/utils/markdown'

Expand All @@ -73,25 +65,7 @@ export default class ProjectView extends Vue {
//TODO: update to take factory address as a parameter, default to env. variable
const roundAddress =
this.$store.state.currentRoundAddress || (await getCurrentRound())
if (
roundAddress &&
roundAddress !== this.$store.state.currentRoundAddress
) {
// Select round
//TODO: SELECT_ROUND action also commits SET_CURRENT_FACTORY_ADDRESS on this action, should be passed optionally and default to env variable
this.$store.dispatch(SELECT_ROUND, roundAddress)
// Don't wait for round info to improve loading time
;(async () => {
await this.$store.dispatch(LOAD_ROUND_INFO)
if (this.$store.state.currentUser) {
// Load user data if already logged in
this.$store.dispatch(LOAD_USER_INFO)
this.$store.dispatch(LOAD_CART)
this.$store.dispatch(LOAD_COMMITTED_CART)
this.$store.dispatch(LOAD_CONTRIBUTOR_DATA)
}
})()
}

if (this.$store.state.recipientRegistryAddress === null) {
const registryAddress = await getRecipientRegistryAddress(roundAddress)
this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
Expand Down
33 changes: 1 addition & 32 deletions vue-app/src/views/ProjectList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,6 @@
what you're looking for.
</div>
</div>
<div
v-if="!!$store.state.currentUser && $store.state.showCartPanel"
class="round-info-container"
>
<round-information />
</div>
</div>
</div>
</template>
Expand All @@ -89,17 +83,8 @@ import { getTimeLeft } from '@/utils/dates'
import CallToActionCard from '@/components/CallToActionCard.vue'
import CartWidget from '@/components/CartWidget.vue'
import ProjectListItem from '@/components/ProjectListItem.vue'
import RoundInformation from '@/components/RoundInformation.vue'
import FilterDropdown from '@/components/FilterDropdown.vue'
import Links from '@/components/Links.vue'
import {
SELECT_ROUND,
LOAD_ROUND_INFO,
LOAD_USER_INFO,
LOAD_CART,
LOAD_COMMITTED_CART,
LOAD_CONTRIBUTOR_DATA,
} from '@/store/action-types'
import { SET_RECIPIENT_REGISTRY_ADDRESS } from '@/store/mutation-types'

const SHUFFLE_RANDOM_SEED = Math.random()
Expand All @@ -124,7 +109,6 @@ function shuffleArray(array: any[]) {
CallToActionCard,
CartWidget,
ProjectListItem,
RoundInformation,
FilterDropdown,
Links,
},
Expand Down Expand Up @@ -152,22 +136,7 @@ export default class ProjectList extends Vue {
this.$route.params.address ||
this.$store.state.currentRoundAddress ||
(await getCurrentRound())
if (
roundAddress &&
roundAddress !== this.$store.state.currentRoundAddress
) {
// Select round and (re)load round info
//TODO: SELECT_ROUND action also commits SET_CURRENT_FACTORY_ADDRESS on this action, should be passed optionally and default to env variable
this.$store.dispatch(SELECT_ROUND, roundAddress)
await this.$store.dispatch(LOAD_ROUND_INFO)
if (this.$store.state.currentUser) {
// Load user data if already logged in
this.$store.dispatch(LOAD_USER_INFO)
this.$store.dispatch(LOAD_CART)
this.$store.dispatch(LOAD_COMMITTED_CART)
this.$store.dispatch(LOAD_CONTRIBUTOR_DATA)
}
}

if (this.$store.state.recipientRegistryAddress === null) {
const registryAddress = await getRecipientRegistryAddress(roundAddress)
this.$store.commit(SET_RECIPIENT_REGISTRY_ADDRESS, registryAddress)
Expand Down