List of awards done. Docs in progress

samples/react-graph-profile-awards/src/services/AwardsService.ts

@@ -20,7 +20,10 @@ export default class AwardsService implements IAwardsService {
     public async getMyAwards(): Promise<IAward[]> {
         const msGraphClient = await this._msGraphClientFactory.getClient("3");
 
-        const listAwardsResponse: IListAwardsResponse = await msGraphClient.api(this.GraphMyAwardsEndpoint).get();
+        const listAwardsResponse: IListAwardsResponse = await msGraphClient
+            .api(this.GraphMyAwardsEndpoint)
+            .orderby('issuedDate desc')
+            .get();
 
         return listAwardsResponse.value || [];
     }    

samples/react-graph-profile-awards/src/webparts/myAwards/components/Award.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import styles from "./MyAwards.module.scss";
+import { IAward } from "../../../models/IAward";
+
+export interface IAwardProps {
+  award: IAward;
+}
+
+export default class MyAwards extends React.Component<IAwardProps, {}> {
+  public render(): React.ReactElement<IAwardProps> {
+    const {
+      displayName,
+      description,
+      issuedDate,
+      issuingAuthority,
+      thumbnailUrl,
+      webUrl,
+    } = this.props.award;
+
+    return (
+      <div>
+        <div className={styles.award}>
+          <div className={styles.awardPreview}>
+            <h6>{issuingAuthority}</h6>
+            <img
+              src={thumbnailUrl}
+              alt="Award"
+            />
+            <a href={webUrl}>
+              View details
+            </a>
+          </div>
+          <div className={styles.awardInfo}>
+            <h6>{issuedDate}</h6>
+            <h2>{displayName}</h2>
+            <p>{description}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

samples/react-graph-profile-awards/src/webparts/myAwards/components/MyAwards.module.scss

@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import "~office-ui-fabric-react/dist/sass/References.scss";
 
 .myAwards {
   overflow: hidden;
@@ -10,6 +10,12 @@
   }
 }
 
+.myAwards ul {
+  list-style-type: none; /* Remove bullets */
+  padding: 0; /* Remove padding */
+  margin: 0; /* Remove margins */
+} 
+
 .welcome {
   text-align: center;
 }
@@ -19,16 +25,52 @@
   max-width: 420px;
 }
 
-.links {
-  a {
-    text-decoration: none;
-    color: "[theme:link, default:#03787c]";
-    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+.award img {
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+}
 
-    &:hover {
-      text-decoration: underline;
-      color: "[theme:linkHovered, default: #014446]";
-      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
+.award {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  max-width: 100%;
+  margin: 20px;
+  overflow: hidden;
 }
+
+.award h6 {
+  opacity: 0.6;
+  margin: 0;
+  letter-spacing: 1px;
+  text-transform: uppercase;
 }
+
+.award h2 {
+  letter-spacing: 1px;
+  margin: 10px 0;
+}
+
+.awardPreview {
+  background-color: #2a265f;
+  color: #fff;
+  padding: 30px;
+  max-width: 250px;
+}
+
+.awardPreview a {
+  color: #fff;
+  display: inline-block;
+  font-size: 12px;
+  opacity: 0.6;
+  margin-top: 30px;
+  text-decoration: none;
+}
+
+.awardInfo {
+  padding: 30px;
+  position: relative;
+  width: 100%;
 }

samples/react-graph-profile-awards/src/webparts/myAwards/components/MyAwards.tsx

@@ -3,6 +3,7 @@ import styles from './MyAwards.module.scss';
 import { IMyAwardsProps } from './IMyAwardsProps';
 import { IMyAwardsState } from './IMyAwardsState';
 import { IAwardsService } from '../../../services/AwardsService';
+import Award from './Award';
 
 export default class MyAwards extends React.Component<IMyAwardsProps, IMyAwardsState> {
 
@@ -26,17 +27,13 @@ export default class MyAwards extends React.Component<IMyAwardsProps, IMyAwardsS
 
   public render(): React.ReactElement<IMyAwardsProps> {
     const {
-      isDarkTheme,
       hasTeamsContext,
     } = this.props;
 
-    const awards = <ul>{this.state.awards.map(t => <li key={t.id}>{t.displayName} ({t.description}%) - {t.issuedDate}</li>)}</ul>;
+    const awards = <ul>{this.state.awards.map(t => <li key={t.id}><Award award={t} /></li>)}</ul>;
 
     return (
       <section className={`${styles.myAwards} ${hasTeamsContext ? styles.teams : ''}`}>
-        <div className={styles.welcome}>
-          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
-        </div>
         <div>
           <h3>My Awards</h3>
           {awards}