renato3x · Warlesondejesus · Apr 11, 2022
diff --git a/Devgram _ Sugestoes_Modificacoes .pdf b/Devgram _ Sugestoes_Modificacoes .pdf
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/aside-data/aside-data.component.html b/src/app/components/aside-data/aside-data.component.html
@@ -15,13 +15,15 @@ <h2>Sugestões para você</h2>
       <button class="btn black">Ver tudo</button>
     </div>
     <div class="suggestions-wrapper">
-      <div class="suggestion" *ngFor="let user of users">
+      <div class="suggestion" *ngFor="let user of users, index as j">
         <img [src]="user.userImageSource" alt="" class="user-suggestion-avatar">
         <div class="user-suggestion-data">
           <span class="user-username">{{ user.username }}</span>
           <span class="user-info">Sugestões para você</span>
         </div>
-        <button class="btn">Mudar</button>
+        <!--**********************-->
+        <button class="btn" (click)="seguindo(j)">{{seguir[j]}}</button>
+        <!--***********************-->
       </div>
     </div>
   </div>

diff --git a/src/app/components/aside-data/aside-data.component.ts b/src/app/components/aside-data/aside-data.component.ts
@@ -12,6 +12,7 @@ export class AsideDataComponent {
   userImageSource: string = '../../../assets/img/me.jpg'
   users: User[] = this.generateUsers()
   year: number = new Date().getFullYear()
+  seguir: string[] = this.generateSeguir()
 
   constructor() {}
 
@@ -24,4 +25,18 @@ export class AsideDataComponent {
 
     return users
   }
+
+  generateSeguir(): string[]{
+    let seguir: string[] = []
+    for (let j = 0; j < this.users.length; j++) {
+      seguir.push('Seguir')
+    } 
+    return seguir 
+  }
+
+  seguindo(i : number) {
+    if(this.seguir[i] == 'Seguir') {
+      this.seguir[i] = 'Seguindo'
+    } else this.seguir[i] = 'Seguir'
+  }
 }
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
@@ -34,11 +34,11 @@
   border: 1px solid #dbdbdb;
   background-color: var(--app-background-color);
   outline: none;
-  border-radius: 3px;
-  height: 28px;
+  border-radius: 7px 7px 7px 7px;
+  height: 35px;
   font-size: 14px;
-  width: 215px;
-  padding: 0 5px;
+  width: 285px;
+  padding: 0px;
 }
 
 #navbar .search-area input[type="search"]::placeholder {
@@ -59,4 +59,4 @@
 
 #navbar .navigation .navigation-navbar .navigation-navbar-item:last-child {
   margin-right: 0;
-}
+}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -6,36 +6,55 @@
   </div>
 
   <div class="search-area">
-    <input type="search" name="search" id="search" placeholder="Search">
+    <input type="search" name="search" id="search" placeholder="Pesquisar">
   </div>
 
   <div class="navigation">
     <ul class="navigation-navbar">
       <li class="navigation-navbar-item">
         <a href="#">
           <svg aria-label="Home" class="_8-yf5 " fill="#262626" height="22" viewBox="0 0 48 48" width="22">
-            <path d="M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z"></path>
+            <path
+              d="M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z">
+            </path>
           </svg>
         </a>
       </li>
       <li class="navigation-navbar-item">
         <a href="#">
           <svg aria-label="Messenger" class="_8-yf5 " fill="#262626" height="22" viewBox="0 0 48 48" width="22">
-            <path d="M36.2 16.7L29 22.2c-.5.4-1.2.4-1.7 0l-5.4-4c-1.6-1.2-3.9-.8-5 .9l-6.8 10.7c-.7 1 .6 2.2 1.6 1.5l7.3-5.5c.5-.4 1.2-.4 1.7 0l5.4 4c1.6 1.2 3.9.8 5-.9l6.8-10.7c.6-1.1-.7-2.2-1.7-1.5zM24 1C11 1 1 10.5 1 23.3 1 30 3.7 35.8 8.2 39.8c.4.3.6.8.6 1.3l.2 4.1c0 1 .9 1.8 1.8 1.8.2 0 .5 0 .7-.2l4.6-2c.2-.1.5-.2.7-.2.2 0 .3 0 .5.1 2.1.6 4.3.9 6.7.9 13 0 23-9.5 23-22.3S37 1 24 1zm0 41.6c-2 0-4-.3-5.9-.8-.4-.1-.8-.2-1.3-.2-.7 0-1.3.1-2 .4l-3 1.3V41c0-1.3-.6-2.5-1.6-3.4C6.2 34 4 28.9 4 23.3 4 12.3 12.6 4 24 4s20 8.3 20 19.3-8.6 19.3-20 19.3z"></path>
+            <path
+              d="M36.2 16.7L29 22.2c-.5.4-1.2.4-1.7 0l-5.4-4c-1.6-1.2-3.9-.8-5 .9l-6.8 10.7c-.7 1 .6 2.2 1.6 1.5l7.3-5.5c.5-.4 1.2-.4 1.7 0l5.4 4c1.6 1.2 3.9.8 5-.9l6.8-10.7c.6-1.1-.7-2.2-1.7-1.5zM24 1C11 1 1 10.5 1 23.3 1 30 3.7 35.8 8.2 39.8c.4.3.6.8.6 1.3l.2 4.1c0 1 .9 1.8 1.8 1.8.2 0 .5 0 .7-.2l4.6-2c.2-.1.5-.2.7-.2.2 0 .3 0 .5.1 2.1.6 4.3.9 6.7.9 13 0 23-9.5 23-22.3S37 1 24 1zm0 41.6c-2 0-4-.3-5.9-.8-.4-.1-.8-.2-1.3-.2-.7 0-1.3.1-2 .4l-3 1.3V41c0-1.3-.6-2.5-1.6-3.4C6.2 34 4 28.9 4 23.3 4 12.3 12.6 4 24 4s20 8.3 20 19.3-8.6 19.3-20 19.3z">
+            </path>
+          </svg>
+        </a>
+      </li>
+      <li class="navigation-navbar-item">
+        <!-- editarrrrr -->
+        <a href="#">
+          <svg aria-label="New POst" class="_8-yf5 " height="22" width="22" viewBox="0 0 48 48" fill=" none "
+            stroke="#262626">
+            <path d="M28,36H9c-4.42,0-8-3.58-8-8V9c0-4.42,3.58-8,8-8h19c4.42,0,8,3.58,8,8v19C36,32.42,32.42,36,28,36z
+              M18.54,8.15v20.31 M28.7,18.54L8.39,18.5" stroke-width="3" transform="scale(1.3,1.3) translate(0,0)">
+            </path>
           </svg>
         </a>
       </li>
       <li class="navigation-navbar-item">
         <a href="#">
           <svg aria-label="Find People" class="_8-yf5 " fill="#262626" height="22" viewBox="0 0 48 48" width="22">
-            <path clip-rule="evenodd" d="M24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0zm0 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm10.2-33.2l-14.8 7c-.3.1-.6.4-.7.7l-7 14.8c-.3.6-.2 1.3.3 1.7.3.3.7.4 1.1.4.2 0 .4 0 .6-.1l14.8-7c.3-.1.6-.4.7-.7l7-14.8c.3-.6.2-1.3-.3-1.7-.4-.5-1.1-.6-1.7-.3zm-7.4 15l-5.5-5.5 10.5-5-5 10.5z" fill-rule="evenodd"></path>
+            <path clip-rule="evenodd"
+              d="M24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0zm0 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm10.2-33.2l-14.8 7c-.3.1-.6.4-.7.7l-7 14.8c-.3.6-.2 1.3.3 1.7.3.3.7.4 1.1.4.2 0 .4 0 .6-.1l14.8-7c.3-.1.6-.4.7-.7l7-14.8c.3-.6.2-1.3-.3-1.7-.4-.5-1.1-.6-1.7-.3zm-7.4 15l-5.5-5.5 10.5-5-5 10.5z"
+              fill-rule="evenodd"></path>
           </svg>
         </a>
       </li>
       <li class="navigation-navbar-item">
         <a href="#">
           <svg aria-label="Activity Feed" class="_8-yf5 " fill="#262626" height="22" viewBox="0 0 48 48" width="22">
-            <path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path>
+            <path
+              d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z">
+            </path>
           </svg>
         </a>
       </li>

diff --git a/src/app/components/post/post-footer/post-footer.component.css b/src/app/components/post/post-footer/post-footer.component.css
@@ -132,4 +132,7 @@ button.post {
   } 100% {
     transform: scale(1);
   }
+}
+.comment{
+  margin-top: 3px;
 }
diff --git a/src/app/components/post/post-footer/post-footer.component.html b/src/app/components/post/post-footer/post-footer.component.html
@@ -43,8 +43,11 @@
     <span class="comment">
       <span class="comment-author">{{ username }}</span> <span class="comment-content">{{ commentary }}</span>
     </span>
+    <span class="comment" *ngFor="let comment of insertComment">
+      <span class="comment-author">Renato3x</span> <span class="comment-content">{{comment}}</span>
+   </span>
   </div>
-  <span class="timestamp">1 Hour ago</span>
+  <span class="timestamp">{{ postTime }}</span>
 </div>
 <div class="new-comment">
   <button class="emoji">
@@ -54,5 +57,5 @@
     </svg>
   </button>
   <input type="text" placeholder="Adicione um comentário..." [(ngModel)]="comment" required minlength="1" #commentInput="ngModel" name="comment" class="comment-input">
-  <button type="button" [disabled]="commentInput.invalid" class="post">Post</button>
+  <button type="button" [disabled]="commentInput.invalid" (click)="addComment()" class="post">Post</button>
 </div>
diff --git a/src/app/components/post/post-footer/post-footer.component.ts b/src/app/components/post/post-footer/post-footer.component.ts
@@ -8,6 +8,9 @@ import * as faker from 'faker'
 })
 export class PostFooterComponent implements OnInit {
 
+  @Input()
+  postTime!: string | number
+
   @Input() username!: string
 
   pulse: boolean = false
@@ -18,17 +21,56 @@ export class PostFooterComponent implements OnInit {
   randomNumber: number = faker.datatype.number(999)
   commentary: string = faker.lorem.sentence()
   comment: string = ''
+  insertComment: String[] = []
 
   constructor() {
     faker.setLocale('pt_BR')
   }
 
   ngOnInit(): void {
+    this.postTimeRandom()
   }
 
   changeLikeCheckedValue() {
     this.pulse = true
     this.likeChecked = !this.likeChecked
     setTimeout(() => this.pulse = false, 300)
   }
+
+  addComment(): void {
+    this.insertComment.push(this.comment)
+    this.comment = ''
+
+  }
+
+  /*Os horários dos posts estavam estáticos, todos com "1 HOUR AGO". Implementamos a funcão postTimeRandom() no post-footer.component.ts para deixar o horário dos posts dinâmicos, com tempo aleatório, utilizando a função Math.random() e
+  Math.ceil. Utilizamos o decorator @Input() para passar a variável postTime por interpolação no post-footer.component.html e utilizamos o ciclo de vida ngOnInit() para iniciar a função postTimeRandom() assim que o componente é renderizado. 50% dos posts ficaram em minutos, 30% em horas e 20% em dias.*/
+
+  postTimeRandom() {
+    let valor = Math.random()
+    if (valor < 0.5) {
+      this.postTime = Math.ceil(Math.random()*59)
+      if( this.postTime == 1) {
+        this.postTime = `${this.postTime} minute ago`
+      } else {
+        this.postTime = `${this.postTime} minutes ago`
+      }
+    } else if (valor < 0.8) {
+      this.postTime = Math.ceil(Math.random()*23)
+      if( this.postTime == 1) {
+        this.postTime = `${this.postTime} hour ago`
+      } else {
+        this.postTime = `${this.postTime} hours ago`
+      }  
+    } else {
+      this.postTime = Math.ceil(Math.random()*30)
+      if( this.postTime == 1) {
+        this.postTime = `${this.postTime} day ago`
+      } else {
+        this.postTime = `${this.postTime} days ago`
+      }  
+    }
+  }
+  //this.postTime = `${Math.ceil(Math.random()*23)} hours ago`
 }
+
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
@@ -1,6 +1,6 @@
 <div class="post">
   <post-header [username]="username" [userImageSource]="userImageSource"></post-header>
-  <post-image></post-image>
+  <post-image (dblclick)="changeLikeCheckedValue()" ></post-image>
   <post-footer [username]="username"></post-footer>
 </div>
 

diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { PostFooterComponent } from './post-footer/post-footer.component';
 
 @Component({
   selector: 'post',
@@ -17,4 +18,9 @@ export class PostComponent implements OnInit {
 
   ngOnInit(): void {
   }
+
+  @ViewChild(PostFooterComponent) postFooterComponent: any;
+  changeLikeCheckedValue(): void {
+    this.postFooterComponent.changeLikeCheckedValue();
+  }
 }
diff --git a/src/app/components/stories/stories.component.css b/src/app/components/stories/stories.component.css
@@ -6,20 +6,50 @@
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
+  display: flex;
 }
 
+/* Adicionei rolagem no eixo x no container dos stories e aumentei um pouco o max-width, para compensar o aumento que a rolagem causa no container*/
 #stories .stories-container {
   display: flex;
-  max-width: 591px;
-  transition: transform .2s ease-in;
+  max-width: 639px;
+  transition: transform .8s ease-in;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  flex-grow: 1;
+}
+
+/* a baixo as estizações dos botões de rolangem */
+svg{
+  height: 26px;
+  width: 26px;
+  position: absolute;
+  margin-top: 20px;
+  align-self: baseline;
+  justify-self: end;
+
+  border-radius: 50%;
+  z-index: 1;
+  cursor: pointer;
+
+  border: 1px solid rgba(0, 0, 0, 0.034);
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.096);
+  background-color: transparent;
+}
+.rightScroll{
+  margin-left: 600px;
+}
+
+.leftScroll{
+  margin-left: 8px;
 }
 
 #stories .stories-container .story {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-left: 15px;
+  margin-left: 12px;
 }
 
 #stories .stories-container .story + .story {
@@ -55,4 +85,4 @@
   width: 74px;
   overflow: hidden;
   text-align: center;
-}
+}
diff --git a/src/app/components/stories/stories.component.html b/src/app/components/stories/stories.component.html
@@ -1,10 +1,18 @@
 <div id="stories">
-  <div class="stories-container">
+  <!-- Colocamos os botões de rolagem dos stories, com a mesma estilização do instagram pra desktop -->
+  <svg class="leftScroll" *ngIf="leftScroll" (click)="scrollBack()">
+    <path tranform="rotate" stroke-width="1" fill="white" stroke="none" d="M 3 4 A 1 1 0 0 0 17 17 A 1 1 0 0 0 3 4 M 9 6 L 14 11 L 9 16 L 8 15 L 12 11 L 8 7 L 9 6" transform="scale(-1.3,1.3) translate(-20,-0.5)"/>
+  </svg>
+  <div class="stories-container" #scrollMe>
     <div class="story" *ngFor="let user of users">
       <div class="story-user-img">
         <img [src]="user.userImageSource" [alt]="user.userImageSource">
       </div>
       <span class="story-username">{{ user.username }}</span>
     </div>
   </div>
+  <!-- Botão que delisza para a direita -->
+  <svg *ngIf="rightScroll" (click)="scroll()" class="rightScroll">
+    <path tranform="rotate" stroke-width="1" fill="white" stroke="none" d="M 3 4 A 1 1 0 0 0 17 17 A 1 1 0 0 0 3 4 M 9 6 L 14 11 L 9 16 L 8 15 L 12 11 L 8 7 L 9 6" transform="scale(1.3,1.3) translate(0,0)"/>
+  </svg>
 </div>
diff --git a/src/app/components/stories/stories.component.ts b/src/app/components/stories/stories.component.ts
@@ -11,12 +11,19 @@ export class StoriesComponent {
 
   users: User[] = this.generateStories()
 
+  //Aqui foi necessário criar duas variáveis para controlar se os botões são visíveis ou não, o a esquerda desaparece quando a rolagem ainda não foi iniciada e o da direita desaparece quando a rolagem chegou ao fim
+  rightScroll: boolean = true
+  leftScroll: boolean = false
+  //foi necessário também manipular o scroll a partir do .ts, então precisamos trazer uma referência ao elemento aqui
+  @ViewChild('scrollMe') scrollMe!: ElementRef;
+
   constructor() {}
 
   generateStories(): User[] {
     let storiesQuantity = 0
 
-    while (storiesQuantity < 9) {
+    //aumentei a quantidade mínima de stories para que sempre seja gerada uma rolagem
+    while (storiesQuantity < 16) {
       storiesQuantity = faker.datatype.number(50)
     }
 
@@ -28,4 +35,41 @@ export class StoriesComponent {
 
     return users
   }
+
+  // as funções abaixo manipulam as ações realizadas com o botão de rolagem
+  scroll(){
+    this.leftScroll = true;
+    let i = 0;
+    let position = this.scrollMe.nativeElement.scrollLeft
+    //usei o setInterval porque não consegui fazer com que o scroll fosse gradativo, então fiz com que o scroll fosse "arrastado" aos poucos
+    let time = setInterval(()=>
+      {
+        this.scrollMe.nativeElement.scrollLeft += 8;
+        i++;
+        if (this.scrollMe.nativeElement.scrollLeft == position) this.rightScroll = false;
+        else position = this.scrollMe.nativeElement.scrollLeft
+        if (i==75) clearInterval(time)  
+      },
+      10
+    )
+  }
+
+  scrollBack(){
+    this.rightScroll =true;
+    let i = 0;
+    let time = setInterval(()=>
+      {
+        this.scrollMe.nativeElement.scrollLeft -= 8;
+        i++;
+        if (i==75) clearInterval(time)  
+      },
+      10
+    )
+    let time2 = setTimeout(() => {
+      if(this.scrollMe.nativeElement.scrollLeft == 0){
+        this.leftScroll = false
+      }
+    }, 760);
+  }
+
 }
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
diff --git a/src/assets/icon16.ico b/src/assets/icon16.ico
diff --git a/src/assets/icons32.ico b/src/assets/icons32.ico
diff --git a/src/assets/icons8-instagram-32.png b/src/assets/icons8-instagram-32.png
diff --git a/src/favicon.ico b/src/favicon.ico