diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 15a375b..4ad025d 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -1,124 +1,85 @@
- - -
- {{userProfile.username}} - @{{userProfile.handle}} - - - - {{rankname}} ({{userProfile.points}} points) - - - -
-
- -
-

What does the level mean?

-

There are different levels you can reach through green behaviour. - Collect 100 points to level up! The levels are called: -

- - - - - - - - - - - -
level {{level.level}} level name {{level.name}}
+
+ + +
+ {{userProfile.username}} + @{{userProfile.handle}} + + + + {{rankname}} ({{userProfile.points}} points) + + +
+ +
+

-

How to level up?

-

There is an always growing list of things you can do, - to support your environment - and earn points to level up at the same time. - You can get a different amount of points - for differnet actions you can see in the list below: -

- - - - - - - - +

What does the level mean?

+

There are different levels you can reach through green behaviour. + Collect 100 points to level up! The levels are called: +

+
points {{action.points}}
+ + + + + + + + + + +
level {{level.level}} level name {{level.name}}
+
+

How to level up?

+

There is an always growing list of things you can do, + to support your environment + and earn points to level up at the same time. + You can get a different amount of points + for differnet actions you can see in the list below: +

+ + + + + + + + - - - - - + + + + + - - -
points {{action.points}} action {{action.name}} action {{action.name}}
- -
-
-

Profile not found :(

+ + + +
+
+

Profile not found :(

+
+
+ \ No newline at end of file diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index b67ae33..1878392 100644 --- a/src/app/components/profile/profile.component.sass +++ b/src/app/components/profile/profile.component.sass @@ -24,10 +24,12 @@ margin-bottom: 0.5em margin-left: auto #toolbar - margin-top: 25px - + margin-top: 32px + .mat-toolbar-row + max-height: 40px + #username - margin: 0.5em + margin: 0 0.5em #handle font-size: 14px #info @@ -55,16 +57,7 @@ $mat-card-header-size: 100px !default -#profile-table - width: 100% - .mat-table - display: block - .mat-cell, - .mat-header-cell - align-items: center - display: flex - min-height: 48px - padding: 0 - flex: 1 - overflow: hidden - word-wrap: break-word +#postlist + margin: 0.5em auto + padding: 0 + max-width: 690px \ No newline at end of file diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 2327ed5..c9fa936 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -1,15 +1,14 @@ import { Component, OnInit, ViewChild} from '@angular/core'; import {Router, NavigationEnd} from '@angular/router'; -import {Http, URLSearchParams, Headers} from '@angular/http'; import { User } from 'src/app/models/user'; import { Actionlist } from 'src/app/models/actionlist'; import { Levellist } from 'src/app/models/levellist'; -import { environment } from 'src/environments/environment'; import {MatSort} from '@angular/material/sort'; import {MatTableDataSource} from '@angular/material/table'; import { RequestService } from 'src/app/services/request/request.service'; import { DatasharingService } from '../../services/datasharing.service'; -import { FeedService } from 'src/app/services/feed/feed.service'; +import { ProfileService } from 'src/app/services/profile/profile.service'; +import { runInThisContext } from 'vm'; @Component({ selector: 'app-profile', @@ -31,16 +30,20 @@ export class ProfileComponent implements OnInit { displayedLevelColumns = ['level', 'name']; levelSource = this.levellist.levels; + loading = false; + constructor( private router: Router, - private http: Http, private requestService: RequestService, - private data: DatasharingService) { + private data: DatasharingService, + private profileService: ProfileService) { router.events.forEach((event) => { // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page) if (event instanceof NavigationEnd) { - if (this.id !== this.router.url.substr(this.router.url.lastIndexOf('/') + 1) && this.id) { + const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); + if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) { // reload the user + console.log('search for user id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1)); this.ngOnInit(); } } @@ -49,66 +52,31 @@ export class ProfileComponent implements OnInit { @ViewChild(MatSort, {static: true}) sort: MatSort; ngOnInit() { + this.loading = true; this.dataSource.sort = this.sort; this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); - // let url = './graphql' - const url = environment.graphQLUrl; - const headers = new Headers(); - headers.set('Content-Type', 'application/json'); - - this.http.post(url, this.buildJson(this.id)) - .subscribe(response => { - console.log(response.text()); - this.updateUserInfo(response.json()); - }); - this.data.currentUserInfo.subscribe(user => { - this.self = user; - }); - } - - public updateUserInfo(response: any) { - if (response.data.getUser != null) { - this.profileNotFound = false; - this.userProfile.loggedIn = true; - this.userProfile.userID = response.data.getUser.id; - this.userProfile.username = response.data.getUser.name; - this.userProfile.handle = response.data.getUser.handle; - this.userProfile.points = response.data.getUser.points; - this.userProfile.level = response.data.getUser.level; - this.userProfile.posts = response.data.getUser.posts; - this.rankname = this.levellist.getLevelName(this.userProfile.level); - // tslint:disable-next-line:max-line-length - this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self); + this.data.currentUserInfo.subscribe(user => { + this.self = user; + }); + if (this.self.loggedIn) { + this.profileService.getUserDataBySelfId(this.id, this.self.userID.toString()); } else { - this.profileNotFound = true; + this.profileService.getUserData(this.id); } + this.profileService.proflile.subscribe(response => + { + if (response) { + this.userProfile = response; + // tslint:disable-next-line:max-line-length + this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self); + this.rankname = this.levellist.getLevelName(this.userProfile.level); + } else { this.profileNotFound = true; } + this.loading = false; + }); } public sendFriendRequest(user: User) { user.allowedToSendRequest = false; this.requestService.sendFriendRequest(user); } - - public buildJson(id: string): any { - const body = {query: `query($userId: ID) { - getUser(userId:$userId){ - id - handle - name - profilePicture - points - level - friendCount - friends{ - id - } - posts{ - content - } - } - }`, variables: { - userId: this.id - }}; - return body; - } } diff --git a/src/app/services/profile/profile.service.spec.ts b/src/app/services/profile/profile.service.spec.ts new file mode 100644 index 0000000..95b6988 --- /dev/null +++ b/src/app/services/profile/profile.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { ProfileService } from './profile.service'; + +describe('ProfileService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: ProfileService = TestBed.get(ProfileService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts new file mode 100644 index 0000000..0bc216b --- /dev/null +++ b/src/app/services/profile/profile.service.ts @@ -0,0 +1,138 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; +import { Post } from 'src/app/models/post'; +import { Author } from 'src/app/models/author'; +import { environment } from 'src/environments/environment'; +import { User } from 'src/app/models/user'; +import { Observable, Subject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class ProfileService { + + public proflile:Subject = new Subject(); + + constructor(private http: Http) { } + + public getUserData(userId: string) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + //return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId))); + this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)).subscribe(result => { + //push onto subject + this.proflile.next(this.renderProfile(result.json())); + return this.proflile; + }); + } + + public getUserDataBySelfId(userId: string, selfId: string) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + //return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId))); + this.http.post(environment.graphQLUrl, this.buildGetProfileJsonBySelfId(userId, selfId)).subscribe(result => { + //push onto subject + this.proflile.next(this.renderProfile(result.json())); + return this.proflile; + }); + } + + + public buildGetProfileJson(id: string): any { + const body = {query: `query($userId: ID) { + getUser(userId:$userId){ + id + handle + name + profilePicture + points + level + friendCount + friends{ + id + } + posts{ + id, + content, + htmlContent, + upvotes, + downvotes, + author{ + name, + handle, + id}, + createdAt + } + } + }`, variables: { + userId: id + }}; + return body; + } + + public buildGetProfileJsonBySelfId(id: string, selfId: string): any { + const body = {query: `query($userId: ID, $selfId: ID!) { + getUser(userId:$userId){ + id + handle + name + profilePicture + points + level + friendCount + friends{ + id + } + posts{ + id, + content, + htmlContent, + upvotes, + downvotes, + userVote(userId: $selfId), + deletable(userId: $selfId) + author{ + name, + handle, + id}, + createdAt + } + } + }`, variables: { + userId: id, + selfId: selfId + }}; + return body; + } + + public renderProfile(response: any): User { + console.log(response); + const posts = new Array(); + const profile = new User(); + if (response.data.getUser != null) { + + profile.userID = response.data.getUser.id; + profile.username = response.data.getUser.name; + profile.handle = response.data.getUser.handle; + profile.points = response.data.getUser.points; + profile.level = response.data.getUser.level; + for (const post of response.data.getUser.posts) { + const id: number = post.id; + const content: string = post.content; + const htmlContent: string = post.htmlContent; + const upvotes: number = post.upvotes; + const downvotes: number = post.downvotes; + const userVote: string = post.userVote; + const deletable: boolean = post.deletable; + const author = new Author(post.author.id, post.author.name, post.author.handle); + const temp = new Date(Number(post.createdAt)); + const date = temp.toLocaleString('en-GB'); + posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author)); + } + profile.posts = posts; + console.log(profile); + return profile; + } + return null; + } +}