feat: ajout de l'avatar de l'utilisateur

cypress/fixtures/me.json

@@ -1,5 +1,6 @@
 {
   "id": "user-1",
   "email": "[email protected]",
-  "name": "Jane Doe"
+  "name": "Jane Doe",
+  "photo": "https://www.fillmurray.com/150/150"
 }

cypress/integration/home_page/home_page.spec.js

@@ -11,7 +11,11 @@ function ensureQuestionIsDisplayed({ id, title, timeAgo, authorName }) {
     .contains("Postée par " + authorName)
     .should("exist");
 
-  containerEl.click();
+  cy.get(`[data-cy="author-profil-picture"]`)
+    .invoke("attr", "src")
+    .should("equal", "https://www.fillmurray.com/150/150");
+
+  cy.get(`[data-cy="question-${id}"]`).click();
 
   cy.url().should("include", `/question/${id}`);
   cy.go("back");

cypress/integration/question_page/question_page.spec.js

@@ -17,6 +17,9 @@ function ensureQuestionInfoIsDisplayed() {
   cy.get(`[data-cy="author-name"]`)
     .contains("Postée par Test User 1")
     .should("exist");
+  cy.get(`[data-cy="author-profil-picture"]`)
+    .invoke("attr", "src")
+    .should("equal", "https://www.fillmurray.com/150/150");
 }
 
 function ensureResultIsDisplayed(label) {

src/api-models.ts

@@ -0,0 +1,27 @@
+export interface MeApi {
+  id: string;
+  email: string;
+  name: string;
+  photo: string | null;
+}
+
+export interface UserApi {
+  id: string;
+  name: string;
+  photo: string | null;
+}
+
+export interface AnswerApi {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface QuestionApi {
+  id: string;
+  title: string;
+  description: string;
+  endingDate: string;
+  user: UserApi;
+  answers: AnswerApi[];
+}

src/components/Header/Header.tsx

@@ -17,7 +17,7 @@ export const Header: React.FC<HeaderProps> = () => {
         </Link>
         <UserLayout>
           <UserAvatar
-            src={`https://api.adorable.io/avatars/100/${me.id}.png`}
+            src={me.photo}
           />
           <p>{me.name}</p>
         </UserLayout>

src/components/Header/styles.ts

@@ -42,5 +42,4 @@ export const UserAvatar = styled.img`
   border-radius: 50%;
   width: 4rem;
   height: 4rem;
-  border: 1px solid #555;
 `;

src/components/QuestionDetail/QuestionDetail.tsx

@@ -49,7 +49,8 @@ export const QuestionDetail: React.FC<QuestionDetailProps> = ({ id }) => {
           <form onSubmit={submitAnswer}>
             <QuestionLayout>
               <Picture
-                src={`https://api.adorable.io/avatars/100/${question.id}.png`}
+                data-cy="author-profil-picture"
+                src={question.user.photo}
               />
 
               <ChipList>

src/components/QuestionsList/QuestionsList.tsx

@@ -52,12 +52,13 @@ export const QuestionsList: React.FC<QuestionsListProps> = () => {
 
           <ol>
             {questions.map(question => (
-              <QuestionItem key={question.id}>
+              <QuestionItem data-cy={`question-${question.id}`} key={question.id}>
                 <Link to={`question/${question.id}`}>
                   <Card>
                     <CardLayout>
                       <QuestionPicture
-                        src={`https://api.adorable.io/avatars/100/${question.id}.png`}
+                        data-cy="author-profil-picture"
+                        src={question.user.photo}
                       />
 
                       <ChipList>

src/models.ts

@@ -1,7 +1,13 @@
 export interface User {
   id: string;
   name: string;
-  photo: string | null;
+  photo: string;
+}
+
+export interface Answer {
+  id: string;
+  title: string;
+  description: string;
 }
 
 export interface Question {
@@ -20,16 +26,11 @@ export interface QuestionCreate {
   answers: Answer[];
 }
 
-export interface Answer {
-  id: string;
-  title: string;
-  description: string;
-}
-
 export interface Me {
   id: string;
   email: string;
   name: string;
+  photo: string;
 }
 
 export interface Vote {

src/services/Me.test.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 
 import { Me } from "../models";
+import { MeApi } from "../api-models";
 import { MeService, createMeService } from "./Me";
 
 jest.mock("axios");
@@ -14,18 +15,24 @@ beforeEach(() => {
 describe("fetchMe", () => {
   it("Calls GET /me", async () => {
     // Given
-    const me: Me = {
-      email: "[email protected]",
+    const meApi: MeApi = {
       id: "user-1",
-      name: "Sarah walker"
+      name: "Sarah walker",
+      email: "[email protected]",
+      photo: null
     };
-
-    (axios.get as jest.Mock).mockResolvedValue({ data: me });
+    (axios.get as jest.Mock).mockResolvedValue({ data: meApi });
 
     // When
     const result = await service.fetchMe();
 
     // Then
+    const me: Me = {
+      id: "user-1",
+      name: "Sarah walker",
+      email: "[email protected]",
+      photo: "https://www.fillmurray.com/150/150"
+    };
     expect(result).toEqual(me);
     expect(axios.get).toHaveBeenCalledTimes(1);
     expect(axios.get).toHaveBeenCalledWith("/me");

src/services/Me.ts

@@ -1,13 +1,24 @@
-import { AxiosInstance } from "axios";
+import { AxiosInstance, AxiosResponse } from "axios";
 
 import { Me } from "../models";
+import { MeApi } from "../api-models";
 
 export function createMeService(http: AxiosInstance) {
   function fetchMe(): Promise<Me> {
-    return http.get<Me>("/me").then(response => response.data);
+    return http.get<MeApi>("/me").then(formatApiResponse);
   }
 
   return { fetchMe };
 }
 
+const formatApiResponse = (meApiResponse: AxiosResponse<MeApi>): Me => {
+  const data = meApiResponse.data
+  return {
+    id: data.id,
+    name: data.name,
+    email: data.email,
+    photo: data.photo || "https://www.fillmurray.com/150/150",
+  }
+}
+
 export type MeService = ReturnType<typeof createMeService>;

src/services/Question.test.ts

@@ -1,4 +1,6 @@
 import { fixtures } from "../../test-utils";
+import { QuestionApi } from "../api-models";
+import { Question } from "../models";
 
 import { QuestionService, createQuestionService } from "./Question";
 
@@ -18,13 +20,14 @@ beforeEach(() => {
 describe("fetchQuestions", () => {
   it("Calls GET /questions", async () => {
     // Given
-    const questions = fixtures.someQuestions();
-    httpClient.get.mockResolvedValue({ data: questions });
+    const questionsApi: QuestionApi[] = fixtures.someApiQuestions();
+    httpClient.get.mockResolvedValue({ data: questionsApi });
 
     // When
     const result = await service.fetchQuestions();
 
     // Then
+    const questions: Question[] = fixtures.someQuestions();
     expect(result).toEqual(questions);
     expect(httpClient.get).toHaveBeenCalledTimes(1);
     expect(httpClient.get).toHaveBeenCalledWith("/questions");
@@ -35,13 +38,14 @@ describe("fetchQuestions", () => {
   it("Calls GET /questions/42", async () => {
     // Given
     const questionId = "42";
-    const question = fixtures.aQuestion(questionId);
-    httpClient.get.mockResolvedValue({ data: question });
+    const questionApi: QuestionApi = fixtures.anApiQuestion(questionId);
+    httpClient.get.mockResolvedValue({ data: questionApi });
 
     // When
     const result = await service.fetchQuestion(questionId);
 
     // Then
+    const question: Question = fixtures.aQuestion(questionId);
     expect(result).toEqual(question);
     expect(httpClient.get).toHaveBeenCalledTimes(1);
     expect(httpClient.get).toHaveBeenCalledWith("/questions/42");

src/services/Question.ts

@@ -1,16 +1,16 @@
 import { AxiosInstance } from "axios";
-
+import { QuestionApi } from "../api-models";
 import { Question, QuestionCreate } from "../models";
 
 export function createQuestionService(http: AxiosInstance) {
   function fetchQuestions(): Promise<Question[]> {
-    return http.get<Question[]>("/questions").then(response => response.data);
+    return http.get<Question[]>("/questions").then(response => response.data.map(formatApiResponse));
   }
 
   function fetchQuestion(questionId: string) {
     return http
-      .get<Question>(`/questions/${questionId}`)
-      .then(response => response.data);
+      .get<QuestionApi>(`/questions/${questionId}`)
+      .then(response => formatApiResponse(response.data));
   }
 
   function createQuestion(question: QuestionCreate) {
@@ -20,4 +20,20 @@ export function createQuestionService(http: AxiosInstance) {
   return { fetchQuestions, fetchQuestion, createQuestion };
 }
 
+const formatApiResponse = (questionApi: QuestionApi): Question => {
+  const userApi = questionApi.user
+  return {
+    id: questionApi.id,
+    title: questionApi.title,
+    description: questionApi.description,
+    endingDate: questionApi.endingDate,
+    answers: questionApi.answers,
+    user: {
+      id: userApi.id,
+      name: userApi.name,
+      photo: userApi.photo || "https://www.fillmurray.com/200/200"
+    }
+  }
+}
+
 export type QuestionService = ReturnType<typeof createQuestionService>;

test-utils/fixtures/index.ts

@@ -1,2 +1,3 @@
 export * from "./votes";
 export * from "./questions";
+export * from "./questions-api";

test-utils/fixtures/questions-api.ts

@@ -0,0 +1,36 @@
+import { QuestionApi } from "../../src/api-models";
+
+export function anApiQuestion(id: string): QuestionApi {
+  return {
+    id,
+    title: "Quel nom pour la league?",
+    description: "Il faut choisir",
+    endingDate: "2019-11-08T13:45:01+00:00",
+    user: {
+      id: "208294780284604222681",
+      name: "Test User",
+      photo: null
+    },
+    answers: [
+      {
+        id: "1",
+        title: "WAM",
+        description: "dgsdgd"
+      },
+      {
+        id: "2",
+        title: "IDEA",
+        description: "dgsdgd"
+      },
+      {
+        id: "3",
+        title: "FAME",
+        description: "dgsdgd"
+      }
+    ]
+  };
+}
+
+export function someApiQuestions(): QuestionApi[] {
+  return [anApiQuestion("1")];
+}

test-utils/fixtures/questions.ts

@@ -9,7 +9,7 @@ export function aQuestion(id: string): Question {
     user: {
       id: "208294780284604222681",
       name: "Test User",
-      photo: null
+      photo: "https://www.fillmurray.com/200/200"
     },
     answers: [
       {