Nom, num etudiant : TSOLENYANU David , 28710114
Nom, num etudiant : DJEGHALI Racha Nadine , 21200169

# <center>Compte-rendu Projet Birdy</center>

## Cahier des Charges

>Tout comme twitter, il nous est demandé dans le cadre de l'UE technologies du Web de construire un réseau social à son image que nous nommons Birdy. Ce dernier permettrait à des utilisateurs d'échanger des messages avec d'autres utilisateurs.
En effet, quand un utilisateur n'est pas connecté, il n'a la possibilité que de se connecter ou de créer un compte.
Cependant, une fois connecté, il a accès au flux de tout Birdy c'est-à-dire les publications les plus récentes. Ainsi, il peut publier un message, consulter sa page de profil qui lui permettrait d'avoir accès à la liste de ses amis ou encore supprimer ses messages.
L'utilisateur peut également ajouter des gens ou les retirer de ses contacts de suivis. A cela s'ajoute des filtres qui lui permettrait de rechercher de rechercher des messages grâces à des mots clés ou encore de rechercher des utilisateurs. Et pour clôturer l'utilisateur peut se deconnecter.
***

## Arbre des composants

flowchart TD
    A1[Index.js]
    A1-->A
    
    A[App.js]
    A--->B[SignUp.js]
    A--->C[LogIn.js]
    A--->D[Home]
    A--->E[Profil.js]
    B-->C
    

    D--->D1[SideBar.js]
    D1--->D11[Item.js] 
    D<-->E
    
    D--->D2[NavBar.js]
    
    D--->D3[Feed.js]
    D3--->D31[NewPost.js]
    D3--->D32[...Posts.js]

    D--->D4[ListUsers.js]
    
    D4--->D41[...User.js]
    
    E--->E1[SideBar.js]
    E1--->E11[Item.js] 

    E--->E2[NavBar.js]
    
    E--->E5[ProfileTop.js]
    E--->E3[Feed.js]
    E3--->E31[NewPost.js]
    E3--->E32[...Posts.js]

    E--->E4[ListUsers.js]
    
    E4--->E41[...User.js]
    
    E--->E6[UserInfo.js]

***

>Pour ce faire, nous allons réaliser ce projet en react. Ainsi nous devons mettre en place une application faisant intervenir tous les composants nécessaires au bon déroulement du projet. D'où une partie sur la description du projet.

## Description du projet

>Dans cette partie, nous allons essentiellement aborder la notion de composants, des differents états et du rôle de chacun de nos composants dans notre application.

### LogIn :
> Ce composant permettrait à tout utilisateur déconnecté de se connecter pour accéder à la page d'acceuil ou aux autres ressources.
> Cependant nous avons une fonction qui est amenée à évoluer aussi : handleSubmit qui soumet le formulaire au serveur.

1. #### States contenues :
* login
* password
2. #### Composants contenus :
* Aucun

### signIn :
> L'utilisateur n'étant pas dans la base de donnée doit créer un compte afin de pouvoir se connecter et avoir accès à notre site
Ici aussi, nous avons une fonction qui est amenée à évoluer aussi : handleSubmit qui soumet le formulaire au serveur.

1. #### States contenues :
* login
* birthdate
* password
* confirmPassword
* isNewUser (un boolean initialisé a true qui verifie si l'utilisateur n'était pas déjà inscrit)
2. #### Composants contenus :
* Aucun

### Home.js:

>Ce composant représente la page d'accueil. Il contient la liste des tweets les plus récents, ainsi qu'une liste de personnes à suivre.

1. #### States contenues :
* Aucun
2. #### Composants contenus :
* SideBar
* NavBar
* Feed
* ListUsers

### Profil:
>C'est le composant qui se charge de la page de profil d'un utilisateur bien précis. On y trouve la photo de profil et potentiellement la photo de couverture d'un user, ainsi qu'un ensemble d'informations sur la personne.

1. #### States contenues :
* Un state 'user' : contenant les infos du user.
* Un state 'username' qui utilise le hook useParam qui permet de recuperer les parametres passés dans l'url afin de recuprer de la base de données les infos du user et les mettre dans le state user à l'aide d'un useEffect qu'on a definie.

2. #### Composants contenus :
* SideBar
* NavBar
* ProfileTop
* Feed
* UserInfo
* ListUsers

### SideBar :

> Il contient les statisques qu'on aura obtenues après des analyses précises, en plus de quelques liens comme par exemple un lien vers la page de profil.

1. #### Composants contenus :
Il contient une liste d'Item.

### Item :
>Il représentera chaque élément de la sideBar tel qu'un affichage d'une statistique par exemple, ou encore le lien qui mènera vers le profil de l'uilisateur connecté.

### NavBar :
>Il représente notre barre de navigation qui contient le logo de notre site, notre barre de recherche ainsi que quelques liens additionnels.

### Feed :
>Ce dernier représente la section de post, la liste de toutes les publications ainsi qu'un champs de saisie d'un nouveau tweet.

1. #### States contenues :
* Un state 'posts' : qui contient la liste des posts les plus récents récupérée de la base de données.

2. #### Composants contenus :
* NewPost .
* Un ensemble de composants de type : Post.

### Post :
>Ce composant contient l'ensemble des infos d'un post en particulier.

1. #### States contenues :
* Un state 'like' : qui contient le nombre de like du post.
* Un state 'isLike' : qui est un boolean qui est mis a true lorque le user connecté a deja aimé le post.

=> Ces 2 states sont mis à jour (+/-/true/false) par la fonction const likeHandeler.

2. #### Composants contenus :
* Aucun
3. ### Props :
On passe à ce composant en paramètre des objets post recupérés de la base de données par le composant qui est Feed .

### ListUsers :
> Ce composant contient l'ensemble des users inscrits à notre site web.
1. #### States contenues :
* Un state 'posts' : qui contient la liste des user de la base de données.

2. #### Composants contenus :
* Un ensemble de User .
3. ### Props :
Aucune.

### Post :
> Ce composant contient une photo de profil et un pseudo utilisateur ainsi que le message/tweet .
1. #### States contenues :
* Aucun(Pour le moment)

2. #### Composants contenus :
* Aucun
3. ### Props :
On passe à ce composant en parametre des objet user recupérés de la base de données par le composant parent qui est ListUsers.

### ProfileTop:

> Ce composant represente la partie supérieure de la page Profil, elle contient les photo de profil et de couverutre, ainsi que le nom et le pseudo de la personne.

1. #### States contenues :
* 'followed': Qui est mis à true ou false selon qu'on soit deja abonné ou pas à la personne.

2. #### Composants contenus :
* Aucun
3. ### Props :
* Aucune (pour le moment)

### UserInfo:

> Ce composant Contient les infos d'un utilisateur donné.
1. #### States contenues :
* Aucun (pour le moment)

2. #### Composants contenus :
* Aucun
3. ### Props :
* Ce composant reçois de la part de son parent(Profil dans ce cas) un objet de type user préalabelement recupéré de la base de données.