feat(angular-ngrx-scss): Create main layout (Top repos + Gists)

angular-ngrx-scss/src/app/home/home.component.html

@@ -2,7 +2,12 @@
  <header class="nav">
  <app-nav-bar></app-nav-bar>
  </header>
- <main class="main">
- <div>Main content!</div>
- </main>
+ <ng-container *ngIf="user$ | async as user">
+ <main class="main">
+ <aside>
+ <app-user-gists></app-user-gists>
+ </aside>
+ <app-top-repositories></app-top-repositories>
+ </main>
+ </ng-container>
 </div>

angular-ngrx-scss/src/app/home/home.component.scss

@@ -5,7 +5,7 @@
  grid-template-rows: auto 1fr;
  grid-template-columns: 30% 1fr;
  width: 100%;
- height: 100%;
+ height: 100vh;
 }
 
 .nav {
@@ -14,7 +14,14 @@
 }
 
 .main {
+ display: grid;
+ grid-template-columns: 24rem 1fr;
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  background: variables.$gray100;
 }
+
+aside {
+ background: variables.$white;
+ padding: 2rem;
+}

angular-ngrx-scss/src/app/home/home.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { selectUserLoginName } from '../state/user';
 import { fetchUserData } from '../state/user/user.actions';
 
 @Component({
@@ -8,6 +9,8 @@ import { fetchUserData } from '../state/user/user.actions';
  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent implements OnInit {
+ user$ = this.store.select(selectUserLoginName);
+
  constructor(private store: Store) {}
 
  ngOnInit() {

angular-ngrx-scss/src/app/home/home.module.ts

@@ -10,6 +10,8 @@ import { ProfileAboutComponent } from './profile/profile-about/profile-about.com
 import { ProfileReposComponent } from './profile/profile-repos/profile-repos.component';
 import { RelativeTimePipe } from '../shared/pipes/relative-time.pipe';
 import { RepoCardComponent } from '../shared/components/repo-card/repo-card.component';
+import { UserGistsComponent } from './user-gists/user-gists.component';
+import { TopRepositoriesComponent } from './top-repositories/top-repositories.component';
 
 @NgModule({
  declarations: [
@@ -22,6 +24,8 @@ import { RepoCardComponent } from '../shared/components/repo-card/repo-card.comp
  ProfileReposComponent,
  RepoCardComponent,
  RelativeTimePipe,
+ UserGistsComponent,
+ TopRepositoriesComponent,
  ],
  imports: [CommonModule, HomeRoutingModule],
 })

angular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.html

@@ -0,0 +1,19 @@
+<div class="top-repositories-container">
+ <h2>Top Repositories</h2>
+ <div class="repo-container">
+ <ng-container *ngIf="repos$ | async as repos">
+ <ng-container *ngFor="let repo of repos; last as isLast">
+ <div class="repo-section">
+ <app-repo-card [repo]="repo"></app-repo-card>
+ </div>
+ <div class="view-all-link" *ngIf="isLast">
+ <ng-container *ngIf="username$ | async as username">
+ <a routerLink="/{{ username }}" [class.disabled]="!username"
+ >View all repositories</a
+ >
+ </ng-container>
+ </div>
+ </ng-container>
+ </ng-container>
+ </div>
+</div>

angular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.scss

@@ -0,0 +1,35 @@
+@use '../../shared/styles/variables';
+
+.top-repositories-container {
+ padding: 3rem;
+ h2 {
+ font-size: 18px;
+ line-height: 28px;
+ font-weight: 500;
+ margin-bottom: 16px;
+ }
+ .repo-container {
+ background-color: variables.$white;
+ border-radius: 0.5rem;
+ border-width: 1px;
+ }
+ .repo-section {
+ padding: 2rem 0;
+ padding-left: 2rem;
+ border-bottom: 1px solid variables.$gray300;
+ }
+ .view-all-link {
+ padding: 1.25rem;
+ background-color: variables.$gray200;
+ display: grid;
+ place-items: center;
+ a {
+ color: inherit;
+ font-weight: 600;
+ &.disabled {
+ color: variables.$gray300;
+ cursor: not-allowed;
+ }
+ }
+ }
+}

angular-ngrx-scss/src/app/home/top-repositories/top-repositories.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { selectTopRepos, selectUserLoginName } from 'src/app/state/user';
+
+@Component({
+ selector: 'app-top-repositories',
+ templateUrl: './top-repositories.component.html',
+ styleUrls: ['./top-repositories.component.scss'],
+})
+export class TopRepositoriesComponent {
+ username$ = this.store.select(selectUserLoginName);
+ repos$ = this.store.select(selectTopRepos);
+
+ constructor(private store: Store) {}
+}

angular-ngrx-scss/src/app/home/user-gists/user-gists.component.html

@@ -0,0 +1,14 @@
+<div class="container">
+ <h3>Gists</h3>
+ <ng-container *ngIf="userGists$ | async as gists">
+ <ng-container *ngIf="gists.length > 0">
+ <div class="list-container">
+ <ng-container *ngFor="let gist of gists">
+ <a class="link" [href]="gist.url" target="_blank">{{
+ gist.fileName
+ }}</a>
+ </ng-container>
+ </div>
+ </ng-container>
+ </ng-container>
+</div>

angular-ngrx-scss/src/app/home/user-gists/user-gists.component.scss

@@ -0,0 +1,16 @@
+@use '../../shared/styles/variables';
+
+.container {
+ padding: 2rem 0;
+ border-top: 1px solid variables.$gray300;
+ border-bottom: 1px solid variables.$gray300;
+ h3 {
+ font-weight: 600;
+ }
+ a.link {
+ color: variables.$black;
+ &:hover {
+ color: variables.$blue300;
+ }
+ }
+}

angular-ngrx-scss/src/app/home/user-gists/user-gists.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { selectGists } from 'src/app/state/user';
+
+@Component({
+ selector: 'app-user-gists',
+ templateUrl: './user-gists.component.html',
+ styleUrls: ['./user-gists.component.scss'],
+})
+export class UserGistsComponent {
+ userGists$ = this.store.select(selectGists);
+
+ constructor(private store: Store) {}
+}

angular-ngrx-scss/src/app/shared/styles/variables.scss

@@ -1,9 +1,13 @@
 // colors
 $white: rgb(255 255 255);
 $gray100: rgb(243 244 246);
+$gray200: rgb(249, 250, 251);
+$gray300: rgb(229, 231, 235);
 $gray500: rgb(107 114 128);
+$gray700: rgb(75 85 99);
 $gray900: rgb(17, 24, 39);
 $black: rgb(0 0 0);
+$blue300: rgb(59, 130, 246);
 $blue600: rgb(37 99 235);
 
 // breakpoints

angular-ngrx-scss/src/app/state/profile/profile.state.ts

@@ -4,8 +4,36 @@ export interface ProfileState {
  user?: UserState;
  orgs?: UserOrgsState[];
  repos?: UserReposState[];
+ gists?: UserGistsState[];
 }
 
+export interface UserGistsState {
+ url: string;
+ fileName: string;
+}
+
+interface Files {
+ [key: string]: { filename: string };
+}
+export interface UserGist {
+ comments: number;
+ comments_url: string;
+ commits_url: string;
+ created_at: string;
+ forks_url: string;
+ git_pull_url: string;
+ git_push_url: string;
+ html_url: string;
+ id: string;
+ node_id: string;
+ public: boolean;
+ truncated: false;
+ updated_at: string;
+ url: string;
+ files: Files;
+}
+
+export type UserGistsApiResponse = UserGist[];
 export interface UserOrgsState {
  id: number;
  login: string;

angular-ngrx-scss/src/app/state/user/user.actions.ts

@@ -1,4 +1,5 @@
 import { createAction, props } from '@ngrx/store';
+import { UserGistsState, UserReposState } from '../profile/profile.state';
 import { UserState } from './user.state';
 
 export const fetchUserData = createAction('[User API] User data requested');
@@ -12,3 +13,23 @@ export const fetchUserDataError = createAction(
  '[User API] User Data fetch unsuccessful',
  props<{ error: object }>(),
 );
+
+export const fetchUserTopReposSuccess = createAction(
+ '[User API] User top repos successfully received',
+ props<{ topRepos: UserReposState[] }>(),
+);
+
+export const fetchUserTopReposError = createAction(
+ '[User API] User top repos fetch unsuccessful',
+ props<{ error: object }>(),
+);
+
+export const fetchUserGistsSuccess = createAction(
+ '[User API] User gists successfully received',
+ props<{ gists: UserGistsState[] }>(),
+);
+
+export const fetchUserGistsError = createAction(
+ '[User API] User gists fetch unsuccessful',
+ props<{ error: object }>(),
+);

angular-ngrx-scss/src/app/state/user/user.effects.spec.ts

@@ -2,10 +2,30 @@ import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action } from '@ngrx/store';
 import { Observable, of } from 'rxjs';
-import { fetchUserData, fetchUserDataSuccess } from './user.actions';
+import {
+ fetchUserData,
+ fetchUserDataSuccess,
+ fetchUserGistsSuccess,
+ fetchUserTopReposSuccess,
+} from './user.actions';
 import { UserService } from '../../user/services/user.service';
 import { UserEffects } from './user.effects';
 import { UserState } from './user.state';
+import { UserGistsState, UserReposState } from '../profile/profile.state';
+
+const USER_STATE_MOCK: UserState = {
+ username: 'thisdot',
+ avatar: '',
+ bio: '',
+ blog: '',
+ company: '',
+ email: '',
+ followers: 0,
+ following: 0,
+ location: '',
+ name: '',
+ twitter_username: '',
+};
 
 describe('UserEffects', () => {
  let actions$: Observable<Action>;
@@ -17,6 +37,12 @@ describe('UserEffects', () => {
  getAuthenticatedUserInfo: () => {
  return of();
  },
+ getUserGists: () => {
+ return of();
+ },
+ getUserTopRepos: () => {
+ return of();
+ },
  });
  TestBed.configureTestingModule({
  imports: [],
@@ -64,4 +90,77 @@ describe('UserEffects', () => {
  done();
  });
  });
+
+ it('should get the user gists from the Github API', (done) => {
+ actions$ = of(fetchUserDataSuccess({ userData: USER_STATE_MOCK }));
+ const expectedUserData: UserGistsState[] = [
+ {
+ url: 'github.com/gists',
+ fileName: 'textfile1.txt',
+ },
+ ];
+
+ userServiceMock.getUserGists.and.returnValue(of(expectedUserData));
+
+ effects.loadUserGists$.subscribe((action) => {
+ expect(action).toEqual(
+ fetchUserGistsSuccess({ gists: expectedUserData }),
+ );
+ done();
+ });
+ });
+
+ it('should get the top repositories from the Github API', (done) => {
+ actions$ = of(fetchUserDataSuccess({ userData: USER_STATE_MOCK }));
+ const expectedUserData: UserReposState[] = [
+ {
+ name: 'Repo-test',
+ description: 'This is a repo test',
+ language: 'TypeScript',
+ stargazers_count: 0,
+ forks_count: 0,
+ private: false,
+ updated_at: '2022-06-17T09:54:38Z',
+ license: null,
+ owner: {
+ login: 'thisdot',
+ },
+ },
+ {
+ name: 'Repo-test-2',
+ description: 'This is a repo test 2',
+ language: 'Javascript',
+ stargazers_count: 0,
+ forks_count: 0,
+ private: false,
+ updated_at: '2022-06-17T09:54:38Z',
+ license: null,
+ owner: {
+ login: 'thisdot',
+ },
+ },
+ {
+ name: 'Repo-test-3',
+ description: 'This is a repo test 2',
+ language: 'Javascript',
+ stargazers_count: 0,
+ forks_count: 0,
+ private: false,
+ updated_at: '2022-06-17T09:54:38Z',
+ license: null,
+ owner: {
+ login: 'thisdot',
+ },
+ },
+ ];
+
+ userServiceMock.getUserTopRepos.and.returnValue(of(expectedUserData));
+
+ effects.loadUserTopRepos$.subscribe((action) => {
+ expect(action).toEqual(
+ fetchUserTopReposSuccess({ topRepos: expectedUserData }),
+ );
+ done();
+ });
+ });
 });