List apps on home page

website/codegen.yml

@@ -1,11 +1,7 @@
 schema: http://localhost:3000/api/website/graphql
 documents:
-  - src/graphql/queries/get-prompt-info.ts
-  - src/graphql/queries/get-login-state.ts
-  - src/graphql/mutations/login.ts
-  - src/graphql/mutations/set-symbol.ts
-  - src/graphql/mutations/create-user.ts
-  - src/graphql/mutations/create-application.ts
+  - src/graphql/queries/*.ts
+  - src/graphql/mutations/*.ts
 generates:
   ./src/graphql/generated.ts:
     plugins:

website/src/graphql/generated.ts

@@ -18,6 +18,8 @@ export type Scalars = {
 export type Query = {
   __typename?: 'Query';
   promptInfo: PromptInfo;
+  applications: Array<Application>;
+  application: Maybe<Application>;
   loginState: Maybe<LoginState>;
 };
 
@@ -25,6 +27,10 @@ export type QueryPromptInfoArgs = {
   promptId: Scalars['String'];
 };
 
+export type QueryApplicationArgs = {
+  id: Scalars['String'];
+};
+
 export type PromptInfo = {
   __typename?: 'PromptInfo';
   id: Scalars['String'];
@@ -56,6 +62,14 @@ export type GitHubUser = {
   url: Scalars['String'];
 };
 
+export type Application = {
+  __typename?: 'Application';
+  id: Scalars['String'];
+  name: Scalars['String'];
+  iconUrl: Maybe<Scalars['String']>;
+  iconColor: Scalars['String'];
+};
+
 export type LoginState = {
   __typename?: 'LoginState';
   name: Maybe<Scalars['String']>;
@@ -68,7 +82,7 @@ export type Mutation = {
   createUser: CreateUserResult;
   login: LoginResult;
   setSymbol: SetSymbolResult;
-  createApplication: ApplicationInfo;
+  createApplication: Application;
 };
 
 export type MutationCreateUserArgs = {
@@ -115,11 +129,6 @@ export type LoginStudent = {
   name: Scalars['String'];
 };
 
-export type ApplicationInfo = {
-  __typename?: 'ApplicationInfo';
-  id: Scalars['String'];
-};
-
 export type CreateApplicationMutationVariables = Exact<{
   name: Scalars['String'];
 }>;
@@ -127,8 +136,8 @@ export type CreateApplicationMutationVariables = Exact<{
 export type CreateApplicationMutation = (
   { __typename?: 'Mutation' }
   & { createApplication: (
-    { __typename?: 'ApplicationInfo' }
-    & Pick<ApplicationInfo, 'id'>
+    { __typename?: 'Application' }
+    & Pick<Application, 'id'>
   ); }
 );
 
@@ -178,6 +187,16 @@ export type SetSymbolMutation = (
   ); }
 );
 
+export type GetApplicationsQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetApplicationsQuery = (
+  { __typename?: 'Query' }
+  & { applications: Array<(
+    { __typename?: 'Application' }
+    & Pick<Application, 'id' | 'name' | 'iconUrl' | 'iconColor'>
+  )>; }
+);
+
 export type GetLoginStateQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetLoginStateQuery = (
@@ -246,6 +265,16 @@ export const SetSymbolDocument = gql`
   }
 }
     `;
+export const GetApplicationsDocument = gql`
+    query GetApplications {
+  applications {
+    id
+    name
+    iconUrl
+    iconColor
+  }
+}
+    `;
 export const GetLoginStateDocument = gql`
     query GetLoginState {
   loginState {
@@ -294,6 +323,9 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
     SetSymbol(variables: SetSymbolMutationVariables, requestHeaders?: Headers): Promise<SetSymbolMutation> {
       return withWrapper(() => client.request<SetSymbolMutation>(print(SetSymbolDocument), variables, requestHeaders));
     },
+    GetApplications(variables?: GetApplicationsQueryVariables, requestHeaders?: Headers): Promise<GetApplicationsQuery> {
+      return withWrapper(() => client.request<GetApplicationsQuery>(print(GetApplicationsDocument), variables, requestHeaders));
+    },
     GetLoginState(variables?: GetLoginStateQueryVariables, requestHeaders?: Headers): Promise<GetLoginStateQuery> {
       return withWrapper(() => client.request<GetLoginStateQuery>(print(GetLoginStateDocument), variables, requestHeaders));
     },

website/src/graphql/queries/get-applications.ts

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag';
+
+export default gql`query GetApplications {
+  applications {
+    id
+    name
+    iconUrl
+    iconColor
+  }
+}`;

website/src/pages/app-icon.vue

@@ -49,9 +49,9 @@ export default class AppIcon extends Vue {
 
   @Prop({
     type: String,
-    required: true,
+    default: null,
   })
-  url!: string;
+  url!: string | null
 
   @Prop({
     type: Boolean,

website/src/pages/developer/views/home.vue

@@ -18,21 +18,34 @@
         </template>
       </new-app-dialog>
       <v-card
-        v-for="i in 18"
-        :key="i"
+        v-if="applicationError"
         outlined
-        link
-        class="d-flex flex-column align-center justify-center py-2 text-center"
+        color="red--text"
+        class="d-flex flex-column align-center justify-center text-center"
+      >
+        <div class="text-h6 px-2">Failed to load app list</div>
+        <v-btn class="mt-4" color="primary" @click="loadApplications">Retry</v-btn>
+      </v-card>
+      <v-skeleton-loader type="image" v-else-if="applications === null" height="200" />
+      <v-card
+        v-else
+        v-for="app in applications"
+        :key="app.id"
+        outlined
+        :to="`/apps/${app.id}`"
+        class="d-flex flex-column align-center py-2 text-center"
         :style="{
-          'color': '#aaee00'
+          'color': app.iconColor
         }"
       >
         <app-icon
-          color="#aaee00"
-          url="https://i.imgur.com/lhgyAa5.png"
+          :color="app.iconColor"
+          :url="app.iconUrl"
           class="mx-2"
         />
-        <div class="text-h5 my-2 text--secondary">{{ i }}th app</div>
+        <v-spacer />
+        <div class="text-h5 my-2 text--secondary px-2">{{ app.name }}</div>
+        <v-spacer />
       </v-card>
     </div>
   </v-container>
@@ -44,8 +57,8 @@
 
     .applications {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      grid-auto-rows: minmax(160px, 1fr);
+      grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
+      grid-auto-rows: minmax(200px, 1fr);
       grid-gap: 10px;
     }
   }
@@ -55,12 +68,33 @@
 import { Component, Vue } from 'vue-property-decorator';
 import AppIcon from '@/pages/app-icon.vue';
 import NewAppDialog from '@/compontents/developer/new-app-dialog.vue';
+import { Application } from '@/graphql/generated';
+import { sdk } from '@/pages/authenticate-prompt/sdk';
 
 @Component({
   name: 'DeveloperHome',
   components: { NewAppDialog, AppIcon },
 })
 export default class DeveloperHome extends Vue {
+  applications: Application[] | null = null;
 
+  applicationError = false;
+
+  async loadApplications() {
+    this.applications = null;
+    this.applicationError = false;
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      const result = await sdk.GetApplications();
+      this.applications = result.applications;
+    } catch (error) {
+      console.error(error);
+      this.applicationError = true;
+    }
+  }
+
+  created() {
+    this.loadApplications();
+  }
 }
 </script>