Merge pull request #63 from supportingami/cc/updates

Style fixes + Error handling
supportingami · Aug 31, 2020 · 9b12db2 · 9b12db2
2 parents 7922bcf + f76d357
commit 9b12db2
Show file tree

Hide file tree

Showing 21 changed files with 226 additions and 58 deletions.
diff --git a/maths-club-app/android/app/build.gradle b/maths-club-app/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "io.c2dev.samimathsclub"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2004004
-        versionName "2.4.4"
+        versionCode 2004005
+        versionName "2.4.5"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     buildTypes {

diff --git a/maths-club-app/android/app/src/main/assets/capacitor.config.json b/maths-club-app/android/app/src/main/assets/capacitor.config.json
@@ -1,6 +1,6 @@
 {
   "appId": "io.c2dev.samimathsclub",
-  "appName": "samimathsclub",
+  "appName": "Maths Club",
   "bundledWebRuntime": false,
   "npmClient": "yarn",
   "webDir": "dist/sami-maths-club-app",
@@ -12,5 +12,6 @@
   "cordova": {},
   "ios": {
     "contentInset": "automatic",
-    "clipToBounds": "true" }
+    "clipToBounds": "true"
+  }
 }
diff --git a/maths-club-app/android/app/src/main/res/values/strings.xml b/maths-club-app/android/app/src/main/res/values/strings.xml
@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <resources>
-  <string name="app_name">samimathsclub</string>
-  <string name="title_activity_main">samimathsclub</string>
+  <string name="app_name">Maths Club</string>
+  <string name="title_activity_main">Maths Club</string>
   <string name="package_name">io.c2dev.samimathsclub</string>
   <string name="custom_url_scheme">io.c2dev.samimathsclub</string>
 </resources>
diff --git a/maths-club-app/capacitor.config.json b/maths-club-app/capacitor.config.json
@@ -1,6 +1,6 @@
 {
   "appId": "io.c2dev.samimathsclub",
-  "appName": "samimathsclub",
+  "appName": "Maths Club",
   "bundledWebRuntime": false,
   "npmClient": "yarn",
   "webDir": "dist/sami-maths-club-app",
@@ -12,5 +12,6 @@
   "cordova": {},
   "ios": {
     "contentInset": "automatic",
-    "clipToBounds": "true" }
+    "clipToBounds": "true"
+  }
 }
diff --git a/maths-club-app/ios/App/App/Info.plist b/maths-club-app/ios/App/App/Info.plist
@@ -5,7 +5,7 @@
     <key>CFBundleDevelopmentRegion</key>
     <string>en</string>
     <key>CFBundleDisplayName</key>
-    <string>samimathsclub</string>
+    <string>Maths Club</string>
     <key>CFBundleExecutable</key>
     <string>$(EXECUTABLE_NAME)</string>
     <key>CFBundleIdentifier</key>
@@ -17,7 +17,7 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.4.4</string>
+    <string>2.4.5</string>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>

diff --git a/maths-club-app/ios/App/App/capacitor.config.json b/maths-club-app/ios/App/App/capacitor.config.json
@@ -1,6 +1,6 @@
 {
   "appId": "io.c2dev.samimathsclub",
-  "appName": "samimathsclub",
+  "appName": "Maths Club",
   "bundledWebRuntime": false,
   "npmClient": "yarn",
   "webDir": "dist/sami-maths-club-app",
@@ -12,5 +12,6 @@
   "cordova": {},
   "ios": {
     "contentInset": "automatic",
-    "clipToBounds": "true" }
+    "clipToBounds": "true"
+  }
 }
diff --git a/maths-club-app/ios/App/fastlane/Fastfile b/maths-club-app/ios/App/fastlane/Fastfile
@@ -71,7 +71,7 @@ platform :ios do
     )
  end
 
-  private_lane :setup_project do
+  private_lane :setup_keychain do
   # TODO - create pw and share across steps (use export to share across ruby env)
   # export KEYCHAIN_PASSWORD = SecureRandom.uuid
   # TODO - consider using https://docs.fastlane.tools/actions/setup_ci/

diff --git a/maths-club-app/package.json b/maths-club-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sami-maths-club-app",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -27,7 +27,8 @@
     "@capacitor/cli": "^2.2.1",
     "@capacitor/core": "^2.2.1",
     "@capacitor/ios": "2.2.1",
-    "date-fns": "^2.16.0",
+    "@sentry/angular": "^5.22.3",
+    "@sentry/tracing": "^5.22.3",
     "material-design-icons": "^3.0.1",
     "ngx-markdown": "^9.1.1",
     "rxjs": "~6.5.4",

diff --git a/maths-club-app/src/app/app.component.html b/maths-club-app/src/app/app.component.html
@@ -1,5 +1,5 @@
 <mat-sidenav-container>
-  <mat-sidenav #snav mode="over">
+  <mat-sidenav #snav mode="over" class="safe-padding-top safe-padding-side">
     <mat-nav-list>
       <a mat-list-item routerLink="/">
         <mat-icon>home</mat-icon>
@@ -13,7 +13,7 @@
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content *ngIf="appService.routeParams$ | async as params">
-    <mat-toolbar color="primary">
+    <mat-toolbar color="primary" class="safe-padding-top safe-padding-side">
       <button mat-icon-button (click)="snav.toggle()" *ngIf="!params.slug">
         <mat-icon>menu</mat-icon>
       </button>
@@ -23,7 +23,10 @@
       <span class="nav-title">SAMI Maths Club</span>
       <app-language-switcher></app-language-switcher>
     </mat-toolbar>
-    <main [@slideTransition]="getRouteAnimationState(outlet)" class="content">
+    <main
+      [@slideTransition]="getRouteAnimationState(outlet)"
+      class="content safe-padding-top safe-padding-side"
+    >
       <router-outlet #outlet="outlet"></router-outlet>
     </main>
   </mat-sidenav-content>

diff --git a/maths-club-app/src/app/app.component.scss b/maths-club-app/src/app/app.component.scss
@@ -1,16 +1,21 @@
 @import "~material-design-icons/iconfont/material-icons.css";
 
+:host {
+  display: contents;
+}
 mat-sidenav-container {
   height: 100%;
 }
 
 mat-sidenav {
   width: 200px;
 }
-
-mat-sidenav-content {
-  overflow-x: hidden;
+mat-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
+
 .bottom-items {
   position: absolute;
   bottom: 0;
@@ -29,3 +34,11 @@ mat-sidenav-content {
   opacity: 0.5;
   text-align: left;
 }
+// IOS Style Safe Areas - viewport-fit=cover fills notch space, so add padding as required
+.safe-padding-top {
+  padding-top: env(safe-area-inset-top) !important;
+}
+.safe-padding-side {
+  padding-left: env(safe-area-inset-left) !important ;
+  padding-right: env(safe-area-inset-right) !important;
+}
diff --git a/maths-club-app/src/app/app.component.ts b/maths-club-app/src/app/app.component.ts
@@ -6,6 +6,9 @@ import { slideTransition } from "./animations";
 import { environment } from "src/environments/environment";
 import { NotificationService } from "./services/notification.service";
 
+import { Plugins, Capacitor } from "@capacitor/core";
+const { StatusBar } = Plugins;
+
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
@@ -20,6 +23,9 @@ export class AppComponent {
     public notifications: NotificationService
   ) {
     // this.notifications.init()
+    if (Capacitor.isNative) {
+      // native code here
+    }
   }
   getRouteAnimationState(outlet: RouterOutlet) {
     return (

diff --git a/maths-club-app/src/app/app.module.ts b/maths-club-app/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
+import { NgModule, ErrorHandler } from "@angular/core";
 import { HttpClientModule } from "@angular/common/http";
 import { AppRoutingModule } from "./app-routing.module";
 import { MarkdownModule } from "ngx-markdown";
@@ -13,9 +13,10 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { MaterialModule } from "./material.module";
 import { LanguageSwitcherComponent } from "./components/language-switcher/language-switcher.component";
-import { FacilitatorNoteComponent } from './components/facilitator-note/facilitator-note.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
-import { AppTermsComponent } from './components/app-terms/app-terms.component';
+import { FacilitatorNoteComponent } from "./components/facilitator-note/facilitator-note.component";
+import { PrivacyPolicyComponent } from "./components/privacy-policy/privacy-policy.component";
+import { AppTermsComponent } from "./components/app-terms/app-terms.component";
+import * as Sentry from "@sentry/angular";
 
 @NgModule({
   declarations: [
@@ -38,7 +39,14 @@ import { AppTermsComponent } from './components/app-terms/app-terms.component';
     FlexLayoutModule,
     MaterialModule,
   ],
-  providers: [],
+  providers: [
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler({
+        showDialog: false,
+      }),
+    },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/maths-club-app/src/app/components/problems-list/problems-list.component.html b/maths-club-app/src/app/components/problems-list/problems-list.component.html
@@ -10,10 +10,11 @@
   >
     <h2 class="problem-title">{{ problem.title }}</h2>
     <div class="featured-problem" *ngIf="problem.featured">Weekly Problem</div>
-    <img
+    <div
       class="problem-image"
-      [src]="['/assets/maths-club-pack/cover_images/' + problem.slug + '.svg']"
-      [alt]="problem.title"
-    />
+      [style.background-image]="
+        'url(/assets/maths-club-pack/cover_images/' + problem.slug + '.svg)'
+      "
+    ></div>
   </mat-card>
 </div>
diff --git a/maths-club-app/src/app/components/problems-list/problems-list.component.scss b/maths-club-app/src/app/components/problems-list/problems-list.component.scss
@@ -1,11 +1,10 @@
 $min-item-width: 150px;
-$max-item-height: 250px;
+$max-item-height: 150px;
 
 .problems-list-container {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($min-item-width, 1fr));
-  grid-template-rows: repeat(4, $max-item-height);
   column-gap: 10px;
   row-gap: 15px;
 }
@@ -17,20 +16,28 @@ $max-item-height: 250px;
   justify-content: center;
   cursor: pointer;
   position: relative;
+  height: $max-item-height;
 }
 
 .problem-image {
   width: 100%;
+  flex: 1;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 .problem-title {
   margin: 0;
 }
 .featured-problem {
   position: absolute;
-  top: 8px;
+  bottom: 0px;
+  height: 2em;
+  line-height: 2em;
   width: calc(100% - 2px);
   left: 0px;
   padding: 1px;
   background: #ffa41d;
   color: white;
+  font-size: 1.2em;
 }
diff --git a/maths-club-app/src/app/services/problem.service.ts b/maths-club-app/src/app/services/problem.service.ts
@@ -4,7 +4,7 @@ import { BehaviorSubject } from "rxjs";
 import { IProblemMeta, IProblem } from "../models/problem.models";
 import { AppService } from "./app.service";
 import { Router, ActivatedRoute } from "@angular/router";
-import startOfWeek from "date-fns/startOfWeek";
+import * as Sentry from "@sentry/angular";
 import { WEEKLY_PROBLEMS } from "../data/weeklyProblems";
 
 @Injectable({
@@ -35,14 +35,22 @@ export class ProblemService {
     this._subscribeToRouteChanges();
   }
 
-  private getFeaturedProblem(
-    problems: IProblemMeta[]
-  ): { index: number; featured: IProblemMeta } {
-    const problemWeek = startOfWeek(new Date()).toISOString().substring(0, 10);
-    const weeklyProblemSlug = WEEKLY_PROBLEMS[problemWeek];
-    const index = problems.findIndex((p) => p.slug === weeklyProblemSlug);
+  /**
+   * Go through the list of featured problems and select problem selected for
+   * the current week (finds problem for next week and returns one previous)
+   * Return as the index of the problems passed
+   */
+  private getFeaturedProblem(problems: IProblemMeta[]): { index: number } {
+    const today = new Date().toISOString().substring(0, 10);
+    const index = Object.keys(WEEKLY_PROBLEMS).findIndex((d) => today <= d) - 1;
+    const weeklySlug = Object.values(WEEKLY_PROBLEMS)[index];
     // TODO - if problem doesn't exist pick a suitable replacement
-    return { index, featured: problems[index] };
+    if (index < 0) {
+      Sentry.captureMessage("Unable to load weekly problem", {
+        extra: { index, date: new Date(), today, WEEKLY_PROBLEMS },
+      });
+    }
+    return { index: problems.findIndex((p) => p.slug === weeklySlug) };
   }
 
   /**
@@ -58,10 +66,13 @@ export class ProblemService {
     if (index !== -1) {
       problems[index] = { ...problems[index], featured: true };
     }
+    // filter out problems which do not have a student and facilitator version and emit
     problems = problems
       .filter((p) => p.hasFacilitatorVersion && p.hasStudentVersion)
-      .sort((a, b) => (a.featured ? -1 : a.added > b.added ? -1 : 1));
-    // filter out problems which do not have a student and facilitator version and emit
+      .sort((a, b) => {
+        return a.featured ? -1 : b.featured ? 1 : a.added > b.added ? -1 : 1;
+      });
+    // allow time to finish any previous animations
     this.problems$.next(problems);
   }
 

diff --git a/maths-club-app/src/environments/environment.prod.ts b/maths-club-app/src/environments/environment.prod.ts
@@ -1,6 +1,6 @@
 import PACKAGE_JSON from "../../package.json";
 
 export const environment = {
-  production: false,
+  production: true,
   APP_VERSION: PACKAGE_JSON.version,
 };
diff --git a/maths-club-app/src/index.html b/maths-club-app/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>SAMI Maths Club</title>
     <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body class="mat-typography">

diff --git a/maths-club-app/src/main.ts b/maths-club-app/src/main.ts
@@ -1,12 +1,21 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from "./app/app.module";
+import { environment } from "./environments/environment";
+
+import * as Sentry from "@sentry/angular";
+
+Sentry.init({
+  dsn:
+    "https://[email protected]/5411348",
+  integrations: [],
+});
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));