Skip to content

Commit

Permalink
Merge pull request #28 from szymonpoltorak/pagination
Browse files Browse the repository at this point in the history
Pagination and Responsive layout
  • Loading branch information
szymonpoltorak authored May 27, 2023
2 parents 7d22327 + c165b20 commit e5c59b7
Show file tree
Hide file tree
Showing 40 changed files with 714 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ public final ResponseEntity<List<PostData>> getPostsList(@RequestParam int numOf

@Override
@PostMapping(value = CREATE_POST_MAPPING)
public final ResponseEntity<PostData> createPost(@RequestParam String postContent, User user) {
public final ResponseEntity<PostData> createPost(@RequestParam String postContent,
@AuthenticationPrincipal User user) {
log.info("Creating post with data : {}", postContent);
log.info("User who wants to create post : {}", user);

Expand Down
2 changes: 1 addition & 1 deletion social-app-frontend/Dockerfile.frontend
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ FROM node:18.15-alpine as node

WORKDIR /app

COPY package*.json .
COPY package*.json ./

RUN npm install

Expand Down
5 changes: 5 additions & 0 deletions social-app-frontend/src/app/core/enums/ColumnIndex.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export enum ColumnIndex {
USER_COLUMN = 0,
POSTS_COLUMN = 1,
FRIENDS_COLUMN = 2
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@ export interface PostServiceInterface {
/**
* Retrieves a list of posts.
*
* @param numOfSite number of site used for pagination
* @returns An Observable of an array of PostData representing the list of posts.
*/
getListOfPosts(): Observable<PostData[]>;
getListOfPosts(numOfSite: number): Observable<PostData[]>;

/**
* Manages the friend status of a user.
Expand All @@ -45,9 +46,4 @@ export interface PostServiceInterface {
* @returns An Observable of void.
*/
deletePost(postId: number): Observable<void>;

/**
* Increments the site number.
*/
incrementSiteNumber(): void;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@ export interface SearchServiceInterface {
* Retrieves a list of users based on a search pattern.
* @returns An Observable that emits an array of UserSearchData objects.
*/
getListOfUsersOfPattern(): Observable<UserSearchData[]>;
getListOfUsersOfPattern(numOfSite: number): Observable<UserSearchData[]>;
}
10 changes: 2 additions & 8 deletions social-app-frontend/src/app/core/services/home/post.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import { PostServiceInterface } from "@core/interfaces/home/PostServiceInterface
providedIn: 'root'
})
export class PostService implements PostServiceInterface {
private numOfSite: number = 0;

constructor(private http: HttpClient) {
}

Expand All @@ -24,10 +22,10 @@ export class PostService implements PostServiceInterface {
});
}

getListOfPosts(): Observable<PostData[]> {
getListOfPosts(numOfSite: number): Observable<PostData[]> {
return this.http.get<PostData[]>(`${ environment.httpBackend }${ HomeApiCalls.POST_LIST }`, {
params: {
"numOfSite": this.numOfSite
"numOfSite": numOfSite
}
});
}
Expand Down Expand Up @@ -55,8 +53,4 @@ export class PostService implements PostServiceInterface {
}
});
}

incrementSiteNumber(): void {
this.numOfSite = this.numOfSite + 1;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,15 @@ import { SearchServiceInterface } from "@interfaces/search/SearchServiceInterfac
})
export class SearchService implements SearchServiceInterface {
searchPattern !: string;
numOfSite: number = 0;

constructor(private http: HttpClient) {
}

getListOfUsersOfPattern(): Observable<UserSearchData[]> {
getListOfUsersOfPattern(numOfSite: number): Observable<UserSearchData[]> {
return this.http.get<UserSearchData[]>(`${ environment.httpBackend }${ SearchApiCalls.USERS_LIST_PATTERN }`, {
params: {
"pattern": this.searchPattern,
"numOfSite": this.numOfSite
"numOfSite": numOfSite
}
});
}
Expand Down
32 changes: 32 additions & 0 deletions social-app-frontend/src/app/pages/auth/login/login.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,35 @@
opacity: 0.5;
color: black;
}

@media screen and (max-width: 870px) {
.agenda {
margin-right: 4em;
}
}

@media screen and (max-width: 702px) {
.agenda {
margin-right: 1em;
}

.login-block {
padding: 1em;
margin-left: 1em;
}
}

@media screen and (max-width: 584px) {
:host {
flex-direction: column;
}

.agenda {
margin-right: 0;
}

.login-block {
padding: 1em;
margin-left: 0;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.like-date-container {
.date-container {
display: grid;
padding: 0.5em;
}
Expand All @@ -18,6 +18,10 @@
padding: 1em;
}

.date-input:hover {
border-color: aqua;
}

.date-input::-webkit-calendar-picker-indicator {
filter: invert(100%);
}
Expand All @@ -29,3 +33,28 @@
.correct-date {
border-color: green;
}

@media screen and (max-width: 762px) {
.date-input {
width: 18em;
}
}

@media screen and (max-width: 600px) {
.date-input {
width: 14em;
}
}

@media screen and (max-width: 492px){
.date-input {
width: 11em;
}
}

@media screen and (max-width: 403px){
.date-input {
width: 13em;
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,28 @@
.correct {
border-color: green;
}

@media screen and (max-width: 762px) {
.name-input {
width: 18em;
}
}

@media screen and (max-width: 600px) {
.name-input {
width: 14em;
}
}

@media screen and (max-width: 492px){
.name-input {
width: 11em;
}
}

@media screen and (max-width: 403px){
.name-input {
width: 13em;
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

.register-container {
display: grid;
min-width: 50em;
max-width: 50em;
margin: 10em auto 0;
border: $border-width $main-blue solid;
Expand Down Expand Up @@ -78,3 +77,58 @@
.invalid-form {
border-color: red;
}

@media screen and (max-width: 762px) {
.register-container {
padding: 1em;
max-width: 42em;
}

.inputs {
gap: 1em
}

.lawyer-speech {
max-width: 42em;
}
}

@media screen and (max-width: 600px) {
.register-container {
max-width: 33em;
}

.inputs {
gap: 0.2em;
}
}

@media screen and (max-width: 492px) {
.logo-block {
@include flex-center;
}

.register-container {
margin-top: 0.2em;
max-width: 28em;
padding: 0.5em;
}

.lawyer-speech {
font-size: 0.6em;
}

.submit-button {
padding: 0.5em;
}
}

@media screen and (max-width: 403px) {
.inputs {
flex-direction: column;
}

.register-container {
max-width: 18em;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,27 @@
.correct-mail {
border-color: green;
}

@media screen and (max-width: 762px) {
.email {
width: 18em;
}
}

@media screen and (max-width: 600px) {
.email {
width: 14em;
}
}

@media screen and (max-width: 492px){
.email {
width: 11em;
}
}

@media screen and (max-width: 403px){
.email {
width: 13em;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,28 @@
.correct-password {
border-color: green;
}

@media screen and (max-width: 762px) {
.password-input {
width: 18em;
}
}

@media screen and (max-width: 600px) {
.password-input {
width: 14em;
}
}

@media screen and (max-width: 492px){
.password-input {
width: 11em;
}
}

@media screen and (max-width: 403px){
.password-input {
width: 13em;
}
}

Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<div class="friends-container">
<p>Friend list</p>

<mat-divider></mat-divider>

<app-friend *ngFor="let friend of friendList"
[friendJob]="friend.friendJob"
[friendName]="friend.friendFullName"
[friendUsername]="friend.friendUsername"
(friendRemoval)="removeFriendFromList($event)"
>
</app-friend>

<div class="no-friends" *ngIf="friendList.length === 0">No friends yet!</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,17 @@
@include content-field;
padding: 2em;
}

mat-divider {
margin-bottom: 1em;
}

.no-friends {
@include flex-center;
}

@media screen and (max-width: 1518px) {
.friends-container {
width: 20em;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { HomeFriendsInterface } from "@interfaces/home/HomeFriendsInterface";
styleUrls: ['./home-friends.component.scss']
})
export class HomeFriendsComponent implements HomeFriendsInterface {
@Input() friendList!: FriendData[];
@Input() friendList: FriendData[] = [];

removeFriendFromList(friendUsername: string): void {
this.friendList = this.friendList.filter((friend: FriendData): boolean => friend.friendUsername !== friendUsername);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@
(updateFriendListEvent)="updateFriendList()"
>
</app-post>

<div (click)="loadNewPosts()" *ngIf="posts.length !== 0 && !isAllLoaded" class="load-more">Load more posts</div>

<div class="no-posts" *ngIf="posts.length === 0">No posts found yet</div>
Loading

0 comments on commit e5c59b7

Please sign in to comment.