[WebApp] Achievements Page - connected (#1078)

* Achievements Page - connected

* AchievementPage: LoadingSpinner - added

* unnecessary logging - removed

packages/web-app/src/Store.tsx

@@ -2,6 +2,8 @@ import type { AxiosInstance } from 'axios'
 import { action, autorun, configure, flow, observable } from 'mobx'
 import { RouterStore } from 'mobx-react-router'
 import type { FeatureManager } from './FeatureManager'
+import { UIStore } from './UIStore'
+import { AchievementsStore } from './modules/achievements'
 import { AnalyticsStore } from './modules/analytics'
 import { AuthStore } from './modules/auth'
 import { BalanceStore } from './modules/balance'
@@ -23,7 +25,6 @@ import { StorefrontStore } from './modules/storefront/StorefrontStore'
 import { TermsAndConditionsStore } from './modules/terms-and-conditions'
 import { VaultStore } from './modules/vault'
 import { ExperienceStore } from './modules/xp'
-import { UIStore } from './UIStore'
 
 configure({
   // computedRequiresReaction: process.env.NODE_ENV === 'development',
@@ -65,6 +66,7 @@ export class RootStore {
   public readonly helpScout: HelpScoutStore
   public readonly storefront: StorefrontStore
   public readonly bonuses: BonusStore
+  public readonly achievements: AchievementsStore
   public readonly seasons: SeasonsStore
   public readonly onboarding: OnboardingStore
   public readonly startButtonUI: StartButtonUIStore
@@ -76,6 +78,7 @@ export class RootStore {
     this.notifications = new NotificationStore(this)
     this.xp = new ExperienceStore(axios)
 
+    this.achievements = new AchievementsStore(axios)
     this.profile = new ProfileStore(this, axios)
     this.termsAndConditions = new TermsAndConditionsStore(axios, this.profile)
     this.saladCard = new SaladCardStore(this, axios)

packages/web-app/src/modules/achievements-views/AchievementPageContainer.tsx

@@ -2,9 +2,9 @@ import { connect } from '../../connect'
 import type { RootStore } from '../../Store'
 import { AchievementPage } from './components/AchievementPage'
 
-const mapStoreToProps = (_store: RootStore): any => ({
-  // TODD: add store mapping
-  // Example: unclaimedBonuses: store.bonuses.unclaimedBonuses,
+const mapStoreToProps = (store: RootStore): any => ({
+  getAchievements: store.achievements.getAchievements,
+  achievements: store.achievements.achievements,
 })
 
 export const AchievementPageContainer = connect(mapStoreToProps, AchievementPage)

packages/web-app/src/modules/achievements-views/components/AchievementPage.tsx

@@ -1,12 +1,14 @@
+import { LoadingSpinner } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
+import { useEffect } from 'react'
 import Scrollbars from 'react-custom-scrollbars'
 import type { IntlShape } from 'react-intl'
 import { injectIntl } from 'react-intl'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { SaladTheme } from '../../../SaladTheme'
+import type { Achievement } from '../../achievements/models/Achievement'
 import { withLogin } from '../../auth-views'
-import defaultAchievementImage from '../assets/Achievement.png'
 import { AchievementCard } from './AchievementCard'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
@@ -33,35 +35,47 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     fontWeight: 300,
     textShadow: '0px 0px 24px rgba(178, 213, 48, 0.7)',
   },
+  loadingSpinnerWrap: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
 interface Props extends WithStyles<typeof styles> {
   intl: IntlShape
+  getAchievements: () => void
+  achievements: Achievement[] | undefined
 }
 
-const _AchievementPage = ({ classes }: Props) => {
-  const achievements = new Array(28).fill({
-    title: 'When Chef’s Mix, You Earn Six',
-    imageUrl: defaultAchievementImage,
-    description: 'Earn your first $6',
-    dateAchieved: 'Achieved on Sept 8, 2023',
-    isAchieved: true,
-  })
+const _AchievementPage = ({ classes, achievements, getAchievements }: Props) => {
+  useEffect(() => {
+    getAchievements()
+  }, [getAchievements])
+
   return (
     <Scrollbars>
       <div className={classes.achievementPageWrapper}>
         <h2 className={classes.achievementPageHeader}>Achievements</h2>
-        <div className={classes.achievementPageGrid}>
-          {achievements.map((achievement) => (
-            <AchievementCard
-              title={achievement.title}
-              imageUrl={achievement.imageUrl}
-              description={achievement.description}
-              dateAchieved={achievement.dateAchieved}
-              isAchieved={achievement.isAchieved}
-            />
-          ))}
-        </div>
+        {!achievements ? (
+          <div className={classes.loadingSpinnerWrap}>
+            <LoadingSpinner variant="light" size={100} />
+          </div>
+        ) : (
+          <div className={classes.achievementPageGrid}>
+            {achievements.map((achievement) => (
+              <AchievementCard
+                title={achievement.name}
+                imageUrl={achievement.badgeImageUrl}
+                description={achievement.description}
+                dateAchieved={achievement.completedAt ?? undefined}
+                isAchieved={!!achievement.completedAt}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </Scrollbars>
   )

packages/web-app/src/modules/achievements/AchievementsStore.tsx

@@ -0,0 +1,29 @@
+import type { AxiosInstance } from 'axios'
+import { action, observable, runInAction } from 'mobx'
+import { config } from '../../config'
+import type { Achievement } from './models/Achievement'
+
+export class AchievementsStore {
+  @observable
+  public achievements: Achievement[] | undefined = undefined
+
+  constructor(private readonly axios: AxiosInstance) {}
+
+  @action
+  public getAchievements = async (): Promise<void> => {
+    try {
+      await this.axios.get('/api/v2/achievements').then((response) =>
+        runInAction(() => {
+          this.achievements = response.data.map((achievement: Achievement) => {
+            return {
+              ...achievement,
+              badgeImageUrl: `${config.apiBaseUrl}${achievement.badgeImageUrl}`,
+            }
+          })
+        }),
+      )
+    } catch (error) {
+      console.error('Achievements error: ', error)
+    }
+  }
+}

packages/web-app/src/modules/achievements/index.tsx

@@ -0,0 +1 @@
+export * from './AchievementsStore'

packages/web-app/src/modules/achievements/models/Achievement.ts

@@ -0,0 +1,7 @@
+export interface Achievement {
+  badgeImageUrl: string
+  completedAt: null | string
+  description: string
+  id: string
+  name: string
+}