Add endpoint for images and comments (#21)

* Uplad photos * Add comments endpoits * Preapare for infinity scrolling * Cache search result * Infinity scroll * Connect with comments controller * Fix margin in row * Add file upload form
lukmccall · Jan 19, 2020 · 646dcdd · 646dcdd
1 parent 583b7f7
commit 646dcdd
Show file tree

Hide file tree

Showing 46 changed files with 2,321 additions and 394 deletions.
diff --git a/client-generator/openapi.json b/client-generator/openapi.json
diff --git a/client/src/css/Navbar.scss b/client/src/css/Navbar.scss
@@ -3,6 +3,11 @@
   .navbar-title {
     padding-left: 10px;
   }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 }
 
 .navbar-signIn {

diff --git a/client/src/css/grid/grid-system.scss b/client/src/css/grid/grid-system.scss
@@ -16,14 +16,19 @@ $half-gutter-width: $gutter-width * 0.5;
   padding-left: $outer-margin;
 }
 
+@media only screen and (min-width: $max-width) {
+  .row {
+    margin-right: $gutter-compensation;
+    margin-left: $gutter-compensation;
+  }
+}
+
 .row {
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: $gutter-compensation;
-  margin-left: $gutter-compensation;
 }
 
 .col {

diff --git a/client/src/css/profile.scss b/client/src/css/profile.scss
@@ -6,6 +6,14 @@
   text-align: center;
 }
 
+.profile-image {
+  display: block;
+  width: 150px;
+  height: 150px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .profile-button {
   width: 100%;
   display: block;
@@ -17,7 +25,6 @@
 }
 
 .profile-form-row .profile-button {
-  margin-top: 40px;
   border: 2px solid #7ab83d;
 }
 

diff --git a/client/src/js/api/client.ts b/client/src/js/api/client.ts
@@ -6,6 +6,8 @@ import {
   LoginRequest,
   LogoutRequest,
   RefreshRequest,
+  CommentsResponse,
+  CommentRequest,
   ProblemDetails,
   RecipesPriceBreakdownResponse,
   RecipeIngredientsResponse,
@@ -15,10 +17,11 @@ import {
   UserResponse,
   UpdateCurrentUserRequest,
   ChangeCurrentUserPasswordRequest,
+  schema,
   WidgetResponse,
 } from './types';
 export class Client {
-  baseUrl = 'http://localhost:5000';
+  baseUrl = 'https://localhost:5001';
 
   async register(body: RegisterRequest | undefined): Promise<AuthSuccessResponse> {
     let _url = this.baseUrl + '/api/v1/auth/register?';
@@ -176,6 +179,104 @@ export class Client {
     return Promise.resolve(null as any);
   }
 
+  async getComments(id: number): Promise<Array<CommentsResponse>> {
+    let _url = this.baseUrl + '/api/v1/comment/get/{id}?';
+    let _headers: { [key: string]: string } = {};
+
+    if (id === undefined || id === null) {
+      throw new Error('`id` is required.');
+    }
+    _url = _url.replace('{id}', encodeURIComponent('' + id));
+
+    _url = _url.replace(/[?&]$/, '');
+
+    let _options = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        ..._headers,
+      },
+    };
+
+    let _response = await fetch(_url, _options);
+
+    if (_response.status === 200) {
+      let _data200 = [] as any;
+      for (let _item of await _response.json()) {
+        _data200.push(_item);
+      }
+      return _data200;
+    }
+
+    // handling undefinded response
+    if (_response.status !== 200 && _response.status !== 204) {
+      throw new Error('An unexpected server error occurred.');
+    }
+
+    return Promise.resolve(null as any);
+  }
+
+  async addComment(
+    Authorization: string,
+    id: number,
+    body: CommentRequest | undefined
+  ): Promise<Array<CommentsResponse>> {
+    let _url = this.baseUrl + '/api/v1/comment/add/{id}?';
+    let _headers: { [key: string]: string } = {};
+
+    if (Authorization === undefined || Authorization === null) {
+      throw new Error('`Authorization` is required.');
+    }
+    if (Authorization === '') {
+      throw new Error("`Authorization` cound't be empty.");
+    }
+    _headers['Authorization'] = Authorization;
+
+    if (id === undefined || id === null) {
+      throw new Error('`id` is required.');
+    }
+    _url = _url.replace('{id}', encodeURIComponent('' + id));
+
+    let _body = JSON.stringify(body);
+    _url = _url.replace(/[?&]$/, '');
+
+    let _options = {
+      body: _body,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        ..._headers,
+      },
+    };
+
+    let _response = await fetch(_url, _options);
+
+    if (_response.status === 200) {
+      let _data200 = [] as any;
+      for (let _item of await _response.json()) {
+        _data200.push(_item);
+      }
+      return _data200;
+    }
+    if (_response.status === 400) {
+      let _data400 = ProblemDetails.fromResponse(await _response.json());
+      throw _data400;
+    }
+    if (_response.status === 422) {
+      let _data422 = ValidationFailedResponse.fromResponse(await _response.json());
+      throw _data422;
+    }
+
+    // handling undefinded response
+    if (_response.status !== 200 && _response.status !== 204) {
+      throw new Error('An unexpected server error occurred.');
+    }
+
+    return Promise.resolve(null as any);
+  }
+
   async getRecipePriceBreakdown(id: number): Promise<RecipesPriceBreakdownResponse> {
     let _url = this.baseUrl + '/recipePriceBreakdown/{id}?';
     let _headers: { [key: string]: string } = {};
@@ -482,6 +583,58 @@ export class Client {
     return Promise.resolve(null as any);
   }
 
+  async changePicture(Authorization: string, body: schema | undefined): Promise<string> {
+    let _url = this.baseUrl + '/api/v1/user/changePicture?';
+    let _headers: { [key: string]: string } = {};
+
+    if (Authorization === undefined || Authorization === null) {
+      throw new Error('`Authorization` is required.');
+    }
+    if (Authorization === '') {
+      throw new Error("`Authorization` cound't be empty.");
+    }
+    _headers['Authorization'] = Authorization;
+
+    let _body = JSON.stringify(body);
+    _url = _url.replace(/[?&]$/, '');
+
+    let _options = {
+      body: _body,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        ..._headers,
+      },
+    };
+
+    let _response = await fetch(_url, _options);
+
+    if (_response.status === 400) {
+      let _data400 = ProblemDetails.fromResponse(await _response.json());
+      throw _data400;
+    }
+    if (_response.status === 404) {
+      let _data404 = ProblemDetails.fromResponse(await _response.json());
+      throw _data404;
+    }
+    if (_response.status === 422) {
+      let _data422 = ValidationFailedResponse.fromResponse(await _response.json());
+      throw _data422;
+    }
+    if (_response.status === 200) {
+      let _data200 = await _response.json();
+      return _data200;
+    }
+
+    // handling undefinded response
+    if (_response.status !== 200 && _response.status !== 204) {
+      throw new Error('An unexpected server error occurred.');
+    }
+
+    return Promise.resolve(null as any);
+  }
+
   async recipeVisualization(id: number, defaultCss: boolean | undefined): Promise<WidgetResponse> {
     let _url = this.baseUrl + '/recipeVisualization/{id}?';
     let _headers: { [key: string]: string } = {};

diff --git a/client/src/js/api/index.js b/client/src/js/api/index.js
@@ -2,4 +2,9 @@ import { Client } from './client';
 import { AuthControllerWrapper, TokenToAuth } from './wrappers';
 
 export const ApiClient = new Client();
+
+export const GetStaticUrl = file => {
+  return `${ApiClient.baseUrl}${file}`;
+};
+
 export { AuthControllerWrapper, TokenToAuth };
diff --git a/client/src/js/api/types.ts b/client/src/js/api/types.ts
@@ -84,6 +84,34 @@ class RefreshRequest {
   }
 }
 
+class UserNameResponse {
+  userName: string;
+
+  constructor(data: any) {
+    this.userName = data['userName'];
+  }
+
+  static fromResponse(data?: any): UserNameResponse {
+    const _data = typeof data === 'object' ? data : {};
+    const _response = new UserNameResponse(_data);
+    return _response;
+  }
+}
+
+class CommentRequest {
+  body: string;
+
+  constructor(data: any) {
+    this.body = data['body'];
+  }
+
+  static fromResponse(data?: any): CommentRequest {
+    const _data = typeof data === 'object' ? data : {};
+    const _response = new CommentRequest(_data);
+    return _response;
+  }
+}
+
 class ProblemDetails {
   type: string;
   title: string;
@@ -181,6 +209,7 @@ class UserResponse {
   userName: string;
   email: string;
   phoneNumber: string;
+  photoUrl: string;
 
   constructor(data: any) {
     this.userSurname = data['userSurname'];
@@ -189,6 +218,7 @@ class UserResponse {
     this.userName = data['userName'];
     this.email = data['email'];
     this.phoneNumber = data['phoneNumber'];
+    this.photoUrl = data['photoUrl'];
   }
 
   static fromResponse(data?: any): UserResponse {
@@ -252,6 +282,42 @@ class WidgetResponse {
   }
 }
 
+class schema {
+  picture: string;
+
+  constructor(data: any) {
+    this.picture = data['picture'];
+  }
+
+  static fromResponse(data?: any): schema {
+    const _data = typeof data === 'object' ? data : {};
+    const _response = new schema(_data);
+    return _response;
+  }
+}
+
+class CommentsResponse {
+  id: number;
+  recipeId: number;
+  body: string;
+  creationTime: string;
+  user: UserNameResponse;
+
+  constructor(data: any) {
+    this.id = data['id'];
+    this.recipeId = data['recipeId'];
+    this.body = data['body'];
+    this.creationTime = data['creationTime'];
+    this.user = data['user'];
+  }
+
+  static fromResponse(data?: any): CommentsResponse {
+    const _data = typeof data === 'object' ? data : {};
+    const _response = new CommentsResponse(_data);
+    return _response;
+  }
+}
+
 class AmountResponse {
   metric: MetricResponse;
   us: UsResponse;
@@ -351,13 +417,15 @@ class IngredientsRequest {
   limitLicense: boolean;
   number: number;
   ranking: number;
+  page: number;
   ingredients?: Array<string>;
 
   constructor(data: any) {
     this.ignorePantry = data['ignorePantry'];
     this.limitLicense = data['limitLicense'];
     this.number = data['number'];
     this.ranking = data['ranking'];
+    this.page = data['page'];
     this.ingredients = [] as any;
     if (Array.isArray(data['ingredients'])) {
       for (let _item of data['ingredients']) {
@@ -583,6 +651,8 @@ export {
   LoginRequest,
   LogoutRequest,
   RefreshRequest,
+  UserNameResponse,
+  CommentRequest,
   ProblemDetails,
   MetricResponse,
   UsResponse,
@@ -592,6 +662,8 @@ export {
   UpdateCurrentUserRequest,
   ChangeCurrentUserPasswordRequest,
   WidgetResponse,
+  schema,
+  CommentsResponse,
   AmountResponse,
   EquipmentResponse,
   AuthFailedResponse,

diff --git a/client/src/js/components/Comment/Comment.js b/client/src/js/components/Comment/Comment.js
@@ -6,16 +6,7 @@ export default class Comment extends React.Component {
       <div className="comment">
         <p className="comment-header">{this.props.author}</p>
         <p className="comment-body">- {this.props.body}</p>
-        <div className="comment-footer">
-          <span href="#" className="comment-footer-delete" onClick={this._deleteComment}>
-            Delete Comment
-          </span>
-        </div>
       </div>
     );
   }
-  _deleteComment(e) {
-    e.preventDefault();
-    alert('-- DELETE Comment Functionality COMMING SOON...');
-  }
 }