From 3bda07de58a599912c023f2686478e4726570144 Mon Sep 17 00:00:00 2001
From: Thombrix <bruno.thomas-caruso@outlook.com>
Date: Fri, 5 Apr 2024 04:31:56 +0200
Subject: [PATCH 1/7] tags are now an attribute of user and and tag no longer
 has users attribute & added two route, random_user and user_by_id

---
 backend/kodecupid/urls.py                     | 20 ++++++-
 .../0004_remove_tag_users_user_tags.py        | 22 ++++++++
 backend/kodecupidapp/models/tag.py            |  1 -
 backend/kodecupidapp/models/user.py           |  1 +
 backend/kodecupidapp/views/__init__.py        |  3 +-
 backend/kodecupidapp/views/swipe.py           | 38 +++++++++++++
 backend/kodecupidapp/views/tag.py             |  4 +-
 backend/kodecupidapp/views/user.py            | 54 ++++---------------
 frontend/src/plugins/axiosPlugin.js           | 21 +++++---
 9 files changed, 108 insertions(+), 56 deletions(-)
 create mode 100644 backend/kodecupidapp/migrations/0004_remove_tag_users_user_tags.py
 create mode 100644 backend/kodecupidapp/views/swipe.py

diff --git a/backend/kodecupid/urls.py b/backend/kodecupid/urls.py
index fb76a05..37d0cf7 100644
--- a/backend/kodecupid/urls.py
+++ b/backend/kodecupid/urls.py
@@ -16,7 +16,17 @@
 """
 from django.contrib import admin
 from django.urls import path
-from kodecupidapp.views import UserView, TagView, PictureView, LikeView, UserTagView
+
+from kodecupidapp.views import (
+    UserView, 
+    TagView,
+    PictureView,
+    LikeView,
+    UserTagView,
+    user_by_id,
+    random_user
+)
+
 from rest_framework_simplejwt.views import (
     TokenObtainPairView,
     TokenRefreshView,
@@ -24,11 +34,17 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+
     path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
     path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+
     path('api/user/', UserView.as_view(), name='user'),
     path('api/picture/', PictureView.as_view(), name='picture'),
     path('api/tags/', TagView.as_view(), name='tag-list'),
     path('api/like/', LikeView.as_view(), name='like-create'),
-    path('api/user/tags', UserTagView.as_view(), name='user-tag')
+
+    path('api/user/tags', UserTagView.as_view(), name='user-tag'),
+
+    path('api/user/random', random_user, name='random-user'),
+    path('api/user/<int:id>', user_by_id, name='user-by-id')
 ]
\ No newline at end of file
diff --git a/backend/kodecupidapp/migrations/0004_remove_tag_users_user_tags.py b/backend/kodecupidapp/migrations/0004_remove_tag_users_user_tags.py
new file mode 100644
index 0000000..996b36f
--- /dev/null
+++ b/backend/kodecupidapp/migrations/0004_remove_tag_users_user_tags.py
@@ -0,0 +1,22 @@
+# Generated by Django 5.0.4 on 2024-04-03 22:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('kodecupidapp', '0003_like_unique_like'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='tag',
+            name='users',
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='tags',
+            field=models.ManyToManyField(related_name='tags', to='kodecupidapp.tag'),
+        ),
+    ]
diff --git a/backend/kodecupidapp/models/tag.py b/backend/kodecupidapp/models/tag.py
index 9f0b963..cd419af 100644
--- a/backend/kodecupidapp/models/tag.py
+++ b/backend/kodecupidapp/models/tag.py
@@ -2,6 +2,5 @@
 
 class Tag(models.Model):
   name = models.CharField(max_length=100)
-  users = models.ManyToManyField('kodecupidapp.User', related_name='tags')
   created = models.DateTimeField(auto_now_add=True)
   updated = models.DateTimeField(auto_now=True)
\ No newline at end of file
diff --git a/backend/kodecupidapp/models/user.py b/backend/kodecupidapp/models/user.py
index a064b99..2a8e7a9 100644
--- a/backend/kodecupidapp/models/user.py
+++ b/backend/kodecupidapp/models/user.py
@@ -6,4 +6,5 @@ class User(AbstractUser):
     # Add additional fields
     bio = models.CharField(max_length=100)
     looking_for = models.CharField(max_length=100)
+    tags = models.ManyToManyField('kodecupidapp.Tag', related_name='tags')
     pfp = models.ForeignKey(Picture, related_name='pfp', on_delete=models.CASCADE, null=True, blank=True)
diff --git a/backend/kodecupidapp/views/__init__.py b/backend/kodecupidapp/views/__init__.py
index d9623b4..a3d39b4 100644
--- a/backend/kodecupidapp/views/__init__.py
+++ b/backend/kodecupidapp/views/__init__.py
@@ -1,4 +1,5 @@
 from .like import LikeView
 from .user import UserView, UserTagView
 from .tag import TagView
-from .picture import PictureView
\ No newline at end of file
+from .picture import PictureView
+from .swipe import random_user, user_by_id
\ No newline at end of file
diff --git a/backend/kodecupidapp/views/swipe.py b/backend/kodecupidapp/views/swipe.py
new file mode 100644
index 0000000..9b46b2b
--- /dev/null
+++ b/backend/kodecupidapp/views/swipe.py
@@ -0,0 +1,38 @@
+from rest_framework import status
+from rest_framework.decorators import api_view, permission_classes
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+from ..serializers import UserSerializer
+
+from ..models import User
+
+import random
+
+
+@api_view(['GET'])
+@permission_classes([IsAuthenticated])
+def user_by_id(request, id):
+    if User.objects.filter(id = id).exists():
+        user = User.objects.get(id = id)
+        serializer = UserSerializer(user, many=False)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+    else:
+        return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
+
+@api_view(['GET'])
+@permission_classes([IsAuthenticated])
+def random_user(request):
+    users = User.objects.exclude(id=request.user.id)
+
+    # TODO: retreive only the one not liked by the user !
+
+    if len(users) == 0:
+        return Response({"message": "Looks like you liked them all"}, status=status.HTTP_404_NOT_FOUND)
+
+    user = random.choice(users)
+
+    serializer = UserSerializer(user, many=False)
+
+    return Response(serializer.data, status=status.HTTP_200_OK)
+
+
diff --git a/backend/kodecupidapp/views/tag.py b/backend/kodecupidapp/views/tag.py
index 698da39..a8db001 100644
--- a/backend/kodecupidapp/views/tag.py
+++ b/backend/kodecupidapp/views/tag.py
@@ -26,10 +26,10 @@ def post(self, request):
         tag_name = serializer.validated_data['name']
         tag = get_object_or_404(Tag, name=tag_name)
 
-        if user in tag.users.all():
+        if tag in user.tags.all():
             return Response({'message': 'User already has tag'}, status=status.HTTP_400_BAD_REQUEST)
 
-        tag.users.add(user)
+        user.tags.add(tag)
 
         return Response({'message': 'Tag added to user'}, status=status.HTTP_201_CREATED)
     
diff --git a/backend/kodecupidapp/views/user.py b/backend/kodecupidapp/views/user.py
index 0ce1405..8fb02e1 100644
--- a/backend/kodecupidapp/views/user.py
+++ b/backend/kodecupidapp/views/user.py
@@ -2,11 +2,9 @@
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
-from ..models import User, Tag
+from ..models import User
 from ..serializers import UserSerializer, UserRegistrationSerializer, UserConfigurationSerializer, TagSerializer
 
-import random
-
 class UserView(APIView):
 
     def get_permissions(self):
@@ -17,6 +15,7 @@ def get_permissions(self):
 
     def post(self, request):
         serializer = UserRegistrationSerializer(data=request.data)
+
         if serializer.is_valid():
             serializer.save()
             return Response({"message": "User created successfully."}, status=status.HTTP_201_CREATED)
@@ -24,61 +23,28 @@ def post(self, request):
     
     def patch(self, request):
         serializer = UserConfigurationSerializer(request.user, data=request.data)
+
         if serializer.is_valid():
             serializer.save()
             return Response({"message": "User configured successfully."}, status=status.HTTP_204_NO_CONTENT)   
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def get(self, request):
-        if "id" in request.query_params:
-            id = request.query_params["id"]
-
-            if id == "random":
-                try:
-                    users = User.objects.all()
-                    user = random.choice(users)
-                    # while loop not safe if only 1 user (infinite loop)
-                    while user.id == request.user.id:
-                        user = random.choice(users) 
-                    serializer = UserSerializer(user, many=False)
-                    return Response(serializer.data, status=status.HTTP_200_OK)
-                except:
-                    return Response({"message": "No random user could be found."}, status=status.HTTP_404_NOT_FOUND)
+        
+        id = request.user.id
 
-            else:
-                if User.objects.filter(id = id).exists():
-                    user = User.objects.get(id = id)
-                    serializer = UserSerializer(user, many=False)
-                    return Response(serializer.data, status=status.HTTP_200_OK)
-                else:
-                    return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
-        else:
-            id = request.user.id
-            if User.objects.filter(id = id).exists():
-                user = User.objects.get(id = id)
-                serializer = UserSerializer(user, many=False)
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
-
-            
-    def delete(self, request):
-        id = int(request.data["id"])
         if User.objects.filter(id = id).exists():
-            if id == request.user.id:
-                user = User.objects.get(id = id)
-                user.delete()
-                return Response({"message": "User successfully deleted."},status=status.HTTP_204_NO_CONTENT)
-            return Response({"message": "User cannot be deleted."}, status=status.HTTP_403_FORBIDDEN)
+            user = User.objects.get(id = id)
+            serializer = UserSerializer(user, many=False)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        
         return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
     
-
 class UserTagView(APIView):
 
     def get(self, request):
         user = request.user
 
-        tags = Tag.objects.filter(users=user)
-
-        serializer = TagSerializer(tags, many=True)
+        serializer = TagSerializer(user.tags, many=True)
 
         return Response(serializer.data)
\ No newline at end of file
diff --git a/frontend/src/plugins/axiosPlugin.js b/frontend/src/plugins/axiosPlugin.js
index 1f6782e..ef8725b 100644
--- a/frontend/src/plugins/axiosPlugin.js
+++ b/frontend/src/plugins/axiosPlugin.js
@@ -13,19 +13,28 @@ export default {
                 originalRequest._retry = true;
                 const refreshToken = localStorage.getItem('refreshToken');
 
-                return axios.post(store.routes['USER_TOKEN_REFRESH'], {
+                return axios.post(store.routes['USER_TOKEN_REFRESH'], 
+                {
                     'refresh': refreshToken
-                }, {
+                },
+                {
                     withCredentials: true
-                }).then((response) => {
-                    if (response.status === 200) {
+                })
+                .then((response) => 
+                {
+                    if (response.status === 200)
+                    {
                         localStorage.setItem('accessToken', response.data.access);
                         axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
                         return axios(originalRequest);
-                    } else {
+                    }
+                    else
+                    {
                         router.push({ name: 'signin',replace: true, force: true });
                     }
-                }).catch(() => {
+                })
+                .catch(() => 
+                {
                     router.push({ name: 'signin',replace: true, force: true });
                 });
             }

From 88fd6691ce61865b37a591bd9b54a8be3e0d9641 Mon Sep 17 00:00:00 2001
From: Thombrix <bruno.thomas-caruso@outlook.com>
Date: Fri, 5 Apr 2024 05:06:47 +0200
Subject: [PATCH 2/7] refactor frontend to use the new routes & enabled hot
 reload

---
 frontend/src/configs/constants.js       | 5 +++--
 frontend/src/views/account/EditView.vue | 4 ++--
 frontend/src/views/account/ShowView.vue | 2 +-
 frontend/src/views/cupid/SearchView.vue | 2 +-
 frontend/vite.config.js                 | 3 +++
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/configs/constants.js b/frontend/src/configs/constants.js
index 3cb643a..dbc1df0 100644
--- a/frontend/src/configs/constants.js
+++ b/frontend/src/configs/constants.js
@@ -18,14 +18,15 @@ export const API_ROUTES = {
     USER_SIGNIN: API_SERVER_URL+'/api/token/',
     USER_TOKEN_REFRESH: API_SERVER_URL+'/api/token/refresh/',
     
-    USER_DETAIL: API_SERVER_URL+'/api/user/',
+    USER: API_SERVER_URL+'/api/user/',
+    USER_RANDOM: API_SERVER_URL+'/api/user/random',
     
     TAG_LIST: API_SERVER_URL+'/api/tags/',
     
     USER_TAG_ADD: API_SERVER_URL+'/api/tags/',
     USER_TAG_REMOVE: API_SERVER_URL+'/api/tags/',
 
-    USER_TAGS: API_SERVER_URL+'/api/user/tags',
+    USER_TAGS: API_SERVER_URL+'/api/user/tags'
 
 };
 
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
index 592c700..ed39c33 100644
--- a/frontend/src/views/account/EditView.vue
+++ b/frontend/src/views/account/EditView.vue
@@ -107,7 +107,7 @@ const handleSubmit = async () => {
 
     const jsonForm = JSON.stringify(user.value);
 
-    axios.patch(store.routes['USER_DETAIL'], jsonForm, {
+    axios.patch(store.routes['USER'], jsonForm, {
         headers: {
             'Content-Type': 'application/json'
         }
@@ -124,7 +124,7 @@ const handleSubmit = async () => {
 };
 
 const fetchUser = async () => {
-    axios.get(store.routes['USER_DETAIL']).catch((error) => {
+    axios.get(store.routes['USER']).catch((error) => {
         console.error(error.response.data);
         setError(error.response.data,'error');
         return error
diff --git a/frontend/src/views/account/ShowView.vue b/frontend/src/views/account/ShowView.vue
index 381405f..7809eca 100644
--- a/frontend/src/views/account/ShowView.vue
+++ b/frontend/src/views/account/ShowView.vue
@@ -51,7 +51,7 @@ const user = ref({
 
 
 const fetchUser = async ()=> {
-    await axios.get(store.routes['USER_DETAIL']).catch((error) => {
+    await axios.get(store.routes['USER']).catch((error) => {
         console.error(error.response.data);
         setError(error.response.data,'error');
         return error
diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
index 0af380e..3b71949 100644
--- a/frontend/src/views/cupid/SearchView.vue
+++ b/frontend/src/views/cupid/SearchView.vue
@@ -42,7 +42,7 @@ const dislike = async () => {
 };
 
 const fetchUser = async () => {
-    axios.get(store.routes['USER_SEARCH'], {params : {id : "random"}}).catch((error) => {
+    axios.get(store.routes['USER_RANDOM']).catch((error) => {
         console.error(error.response.data);
         setError(error.response.data,'error');
         return error
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9ac5a5d..0c4899e 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -11,6 +11,9 @@ export default defineConfig({
   },
   server: {
     port: 80,
+    watch: {
+      usePolling: true,
+    },
   },
   plugins: [
     vue(),

From 17b93b6d58da397bb6052741b807364857a0c1b4 Mon Sep 17 00:00:00 2001
From: Thombrix <bruno.thomas-caruso@outlook.com>
Date: Fri, 12 Apr 2024 00:23:15 +0200
Subject: [PATCH 3/7] test pictures

---
 backend/kodecupid/urls.py                   |  4 +-
 backend/kodecupidapp/views/picture.py       | 14 ++---
 frontend/src/components/ImageUploader.vue   | 60 +++++++++++++++++++++
 frontend/src/components/PicturesDisplay.vue | 51 ++++++++++++++++++
 frontend/src/configs/constants.js           |  4 +-
 frontend/src/views/account/EditView.vue     |  5 ++
 frontend/src/views/cupid/SearchView.vue     |  1 +
 7 files changed, 130 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/ImageUploader.vue
 create mode 100644 frontend/src/components/PicturesDisplay.vue

diff --git a/backend/kodecupid/urls.py b/backend/kodecupid/urls.py
index 37d0cf7..82ef28e 100644
--- a/backend/kodecupid/urls.py
+++ b/backend/kodecupid/urls.py
@@ -45,6 +45,6 @@
 
     path('api/user/tags', UserTagView.as_view(), name='user-tag'),
 
-    path('api/user/random', random_user, name='random-user'),
-    path('api/user/<int:id>', user_by_id, name='user-by-id')
+    path('api/user/random/', random_user, name='random-user'),
+    path('api/user/<int:id>/', user_by_id, name='user-by-id')
 ]
\ No newline at end of file
diff --git a/backend/kodecupidapp/views/picture.py b/backend/kodecupidapp/views/picture.py
index a1be098..57af8f1 100644
--- a/backend/kodecupidapp/views/picture.py
+++ b/backend/kodecupidapp/views/picture.py
@@ -12,16 +12,18 @@ class PictureView(APIView):
     permission_classes = [IsAuthenticated]
 
     def post(self, request):
-        serializer = PictureSerializer(data=request.data)
+
+        modified_data = request.data.copy()
+        modified_data['user'] = request.user.id
+
+        serializer = PictureSerializer(data=modified_data)
         if serializer.is_valid():
-            if request.user.id == int(request.data["user"]):
-                serializer.save()
-                return Response({"message": "Picture added successfully."}, status=status.HTTP_201_CREATED)
-            return Response({"message": "Picture cannot be added to another user."}, status=status.HTTP_403_FORBIDDEN)
+            serializer.save()
+            return Response({"message": "Picture added successfully."}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
     
     def get(self, request):
-        id = request.data["id"]
+        id = request.user.id
         if Picture.objects.filter(id = id).exists():
             pic = Picture.objects.get(id = id)
             serializer = PictureSerializer(pic, many=False)
diff --git a/frontend/src/components/ImageUploader.vue b/frontend/src/components/ImageUploader.vue
new file mode 100644
index 0000000..978d2b0
--- /dev/null
+++ b/frontend/src/components/ImageUploader.vue
@@ -0,0 +1,60 @@
+<template>
+    <v-row>
+        <v-col>
+            <v-label for="imageUpload">Profile Picture:</v-label>
+            <input type="file" id="imageUpload" @change="previewImage" accept="image/*">
+            <v-img v-if="imagePreview" :src="imagePreview" class="rounded-circle border border-secondary" width="100" height="100"></v-img>
+            <v-btn @click="handleSubmit" class="bg-like"><v-icon>mdi-thumb-up</v-icon></v-btn>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+
+import { store } from '@/store';
+import axios from 'axios';
+
+export default {
+    data() {
+        return {
+            // Existing data properties
+            imagePreview: null, // For displaying the selected image preview
+            selectedFile: null, // To hold the selected file
+            // Other existing data properties
+        };
+    },
+    methods: {
+        previewImage(event) {
+            // Method to preview image before uploading
+            this.selectedFile = event.target.files[0];
+            if (this.selectedFile) {
+                this.imagePreview = URL.createObjectURL(this.selectedFile);
+            }
+        },
+        handleSubmit() {
+            const formData = new FormData();
+
+            // Append the selected file if there is one
+            if (this.selectedFile) {
+                formData.append('image', this.selectedFile);
+            }
+
+            // Perform the API call with formData
+            axios.post(store.routes['USER_PICTURE'], formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(response => {
+                // Handle success
+                console.log('Profile updated successfully.', response.data);
+            }).catch(error => {
+                // Handle error
+                console.error('Error updating profile:', error);
+            });
+        },
+        // Other methods...
+    },
+    // Other options...
+}
+
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/PicturesDisplay.vue b/frontend/src/components/PicturesDisplay.vue
new file mode 100644
index 0000000..2c38d34
--- /dev/null
+++ b/frontend/src/components/PicturesDisplay.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="user-images">
+      <v-container>
+        <v-row>
+          <v-col cols="12" sm="6" md="4" lg="3" v-for="image in images" :key="image.id">
+            <v-img :src="image.url" class="mb-4" aspect-ratio="1"></v-img>
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'UserImages',
+    props: {
+      userId: Number,
+    },
+    data() {
+      return {
+        images: [],
+      };
+    },
+    created() {
+      this.fetchImages();
+    },
+    methods: {
+      async fetchImages() {
+        try {
+          const response = await this.axios.get(`/api/pictures/`, {
+            params: {
+              user: this.userId,
+            },
+          });
+          this.images = response.data;
+        } catch (error) {
+          console.error('Error fetching images:', error);
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .user-images {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/configs/constants.js b/frontend/src/configs/constants.js
index dbc1df0..fe249cf 100644
--- a/frontend/src/configs/constants.js
+++ b/frontend/src/configs/constants.js
@@ -26,7 +26,9 @@ export const API_ROUTES = {
     USER_TAG_ADD: API_SERVER_URL+'/api/tags/',
     USER_TAG_REMOVE: API_SERVER_URL+'/api/tags/',
 
-    USER_TAGS: API_SERVER_URL+'/api/user/tags'
+    USER_TAGS: API_SERVER_URL+'/api/user/tags',
+
+    USER_PICTURE: API_SERVER_URL+'/api/picture/'
 
 };
 
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
index ed39c33..04529b0 100644
--- a/frontend/src/views/account/EditView.vue
+++ b/frontend/src/views/account/EditView.vue
@@ -60,6 +60,10 @@
                         </v-chip-group>
                     </v-col>
                 </v-row>
+
+                <v-row>
+                    <image-uploader></image-uploader>
+                </v-row>
             </v-container>
         </v-card>
     </v-form>
@@ -72,6 +76,7 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import axios from 'axios';
 import { computed } from 'vue';
+import ImageUploader from '@/components/ImageUploader.vue';
 
 const user = ref({
     username: ref(''),
diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
index 3b71949..cc9e46b 100644
--- a/frontend/src/views/cupid/SearchView.vue
+++ b/frontend/src/views/cupid/SearchView.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup>
+
 import { onMounted, ref } from 'vue';
 import PeopleCard from '@/components/PeopleCard.vue';
 

From 4922211a8a1ff3ee13a6010dc4d142be6e7a4142 Mon Sep 17 00:00:00 2001
From: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date: Fri, 19 Apr 2024 08:44:31 +0200
Subject: [PATCH 4/7] Squashed commit of the following:

commit 5b047840f62914e09e24136aea8070c678fac026
Merge: 88fd669 027f466
Author: lugopi <lucas.gosteli@he-arc.ch>
Date:   Fri Apr 19 08:31:21 2024 +0200

    Merge pull request #15 from HE-Arc/14-ajout-swagger

    14 ajout swagger + clientjs + fixes

commit 027f466605924826c7c69134f9e09f85c3cf9531
Author: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date:   Fri Apr 19 08:29:52 2024 +0200

    smalls fixes

commit a3542cbf120ea24ba841a6b7ad48340c1f5bf1be
Author: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date:   Thu Apr 18 20:42:35 2024 +0200

    add matches

commit 357d550f283def134bcb09ef63f6d63cbc5ab670
Author: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date:   Thu Apr 18 20:30:27 2024 +0200

    add client and make the change

commit 5b755a4f2c9417f777d0408200f3b6d44b05cacb
Author: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date:   Thu Apr 18 13:59:52 2024 +0200

    change urls to suit rest and swagger

commit 88f2ba4992d5c83097ed540ec60def1a70c290d5
Author: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date:   Sun Apr 14 16:41:13 2024 +0200

    add swagger api view
---
 .gitignore                                    |   1 +
 backend/Pipfile                               |   1 +
 backend/kodecupid/settings.py                 |   9 +
 backend/kodecupid/urls.py                     |  37 ++--
 backend/kodecupidapp/views/__init__.py        |   4 +-
 backend/kodecupidapp/views/like.py            |  13 +-
 backend/kodecupidapp/views/picture.py         |  45 ++--
 backend/kodecupidapp/views/swipe.py           |  60 ++++--
 backend/kodecupidapp/views/tag.py             |  55 +----
 backend/kodecupidapp/views/user.py            |  89 ++++++--
 deploy.sh                                     |   2 +
 docker-images/django/Dockerfile               |   2 +-
 docker-images/django/startup.sh               |   2 +
 docker-images/vuejs/Dockerfile                |   2 +-
 frontend/src/clients/apiClient.js             | 204 ++++++++++++++++++
 frontend/src/configs/constants.js             | 106 ++++++---
 frontend/src/main.js                          |   3 -
 frontend/src/plugins/axiosPlugin.js           |  36 +---
 frontend/src/store/index.js                   |  17 +-
 frontend/src/views/account/EditView.vue       | 118 ++++------
 frontend/src/views/account/ShowView.vue       |  47 ++--
 .../src/views/authentication/SigninView.vue   |  40 +---
 .../src/views/authentication/SignupView.vue   |  31 +--
 frontend/src/views/cupid/MatchView.vue        |  15 +-
 frontend/src/views/cupid/SearchView.vue       |  29 ++-
 25 files changed, 568 insertions(+), 400 deletions(-)
 create mode 100644 frontend/src/clients/apiClient.js

diff --git a/.gitignore b/.gitignore
index 8fa4114..6df6c00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -167,3 +167,4 @@ frontend/package-lock.lock
 .vscode/
 
 backend/pictures
+backend/schema.yml
diff --git a/backend/Pipfile b/backend/Pipfile
index 6072366..fb95431 100644
--- a/backend/Pipfile
+++ b/backend/Pipfile
@@ -10,6 +10,7 @@ djangorestframework = "3.14.0"
 django-cors-headers = "4.3.1"
 pillow="10.2.0"
 djangorestframework-simplejwt="5.3.1"
+drf-spectacular = "0.27.2"
 
 [dev-packages]
 black = "24.2.0"
diff --git a/backend/kodecupid/settings.py b/backend/kodecupid/settings.py
index f4f908c..ef160a5 100644
--- a/backend/kodecupid/settings.py
+++ b/backend/kodecupid/settings.py
@@ -48,6 +48,7 @@
     'corsheaders',
     "kodecupidapp",
     "rest_framework",
+    'drf_spectacular',
 ]
 
 REST_FRAMEWORK = {
@@ -57,6 +58,7 @@
     'DEFAULT_PERMISSION_CLASSES': (
         'rest_framework.permissions.IsAuthenticated',
     ),
+    'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
 }
 
 MIDDLEWARE = [
@@ -88,6 +90,13 @@
     },
 ]
 
+SPECTACULAR_SETTINGS = {
+    'TITLE': 'KodeCupid API',
+    'DESCRIPTION': 'KodeCupid API Documentation',
+    'VERSION': '1.0.0',
+    'SERVE_INCLUDE_SCHEMA': False,
+}
+
 WSGI_APPLICATION = 'kodecupid.wsgi.application'
 
 # Database
diff --git a/backend/kodecupid/urls.py b/backend/kodecupid/urls.py
index 82ef28e..efe95c1 100644
--- a/backend/kodecupid/urls.py
+++ b/backend/kodecupid/urls.py
@@ -15,16 +15,18 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
+
+from rest_framework import routers
+
+from drf_spectacular.views import SpectacularAPIView, SpectacularSwaggerView
 
 from kodecupidapp.views import (
-    UserView, 
+    UserView,
     TagView,
     PictureView,
     LikeView,
-    UserTagView,
-    user_by_id,
-    random_user
+    SwipeView,
 )
 
 from rest_framework_simplejwt.views import (
@@ -32,19 +34,24 @@
     TokenRefreshView,
 )
 
+base_url = 'api/'
+
+router = routers.DefaultRouter()
+router.register('users', UserView, basename='user')
+router.register('tags', TagView, basename='tag')
+router.register('pictures', PictureView, basename='picture')
+router.register('likes', LikeView, basename='like')
+router.register('swipes', SwipeView, basename='swipe')
+
 urlpatterns = [
+
     path('admin/', admin.site.urls),
 
+    path('api/schema/', SpectacularAPIView.as_view(), name='schema'),
+    path('api/', SpectacularSwaggerView.as_view(url_name='schema'), name='docs'),
+
     path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
     path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
-
-    path('api/user/', UserView.as_view(), name='user'),
-    path('api/picture/', PictureView.as_view(), name='picture'),
-    path('api/tags/', TagView.as_view(), name='tag-list'),
-    path('api/like/', LikeView.as_view(), name='like-create'),
-
-    path('api/user/tags', UserTagView.as_view(), name='user-tag'),
-
-    path('api/user/random/', random_user, name='random-user'),
-    path('api/user/<int:id>/', user_by_id, name='user-by-id')
+    
+    path(base_url, include(router.urls)),
 ]
\ No newline at end of file
diff --git a/backend/kodecupidapp/views/__init__.py b/backend/kodecupidapp/views/__init__.py
index a3d39b4..257cbe8 100644
--- a/backend/kodecupidapp/views/__init__.py
+++ b/backend/kodecupidapp/views/__init__.py
@@ -1,5 +1,5 @@
 from .like import LikeView
-from .user import UserView, UserTagView
+from .user import UserView
 from .tag import TagView
 from .picture import PictureView
-from .swipe import random_user, user_by_id
\ No newline at end of file
+from .swipe import SwipeView
\ No newline at end of file
diff --git a/backend/kodecupidapp/views/like.py b/backend/kodecupidapp/views/like.py
index cb6e25c..6a98c1b 100644
--- a/backend/kodecupidapp/views/like.py
+++ b/backend/kodecupidapp/views/like.py
@@ -1,13 +1,15 @@
-from rest_framework.views import APIView
+from rest_framework.viewsets import GenericViewSet
+from rest_framework.mixins import CreateModelMixin
 from rest_framework.response import Response
 from rest_framework import status
 from ..serializers import LikeSerializer
 from ..models import Like
 
-class LikeView(APIView):
+class LikeView(GenericViewSet, CreateModelMixin):
+    serializer_class = LikeSerializer
 
-    def post(self, request):
-        serializer = LikeSerializer(data=request.data, context={'request': request})
+    def create(self, request, *args, **kwargs):
+        serializer = self.get_serializer(data=request.data, context={'request': request})
         if serializer.is_valid():
             like_instance = serializer.save()
 
@@ -16,9 +18,8 @@ def post(self, request):
 
             match_exists = Like.objects.filter(source_user=target_user, target_user=source_user).exists()
 
-            
             response_data = serializer.data
             response_data['match'] = match_exists
 
             return Response(response_data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
\ No newline at end of file
diff --git a/backend/kodecupidapp/views/picture.py b/backend/kodecupidapp/views/picture.py
index 57af8f1..9dd3976 100644
--- a/backend/kodecupidapp/views/picture.py
+++ b/backend/kodecupidapp/views/picture.py
@@ -1,43 +1,36 @@
-from rest_framework.views import APIView
+from rest_framework.viewsets import GenericViewSet
+from rest_framework.mixins import CreateModelMixin, RetrieveModelMixin, DestroyModelMixin
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.permissions import IsAuthenticated
 from ..models import Picture
 from ..serializers import PictureSerializer
 
-import random
-
-class PictureView(APIView):
 
+class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, DestroyModelMixin):
+    queryset = Picture.objects.all()
+    serializer_class = PictureSerializer
     permission_classes = [IsAuthenticated]
 
-    def post(self, request):
+    def create(self, request):
 
         modified_data = request.data.copy()
         modified_data['user'] = request.user.id
 
-        serializer = PictureSerializer(data=modified_data)
+        serializer = self.get_serializer(data=modified_data)
         if serializer.is_valid():
             serializer.save()
             return Response({"message": "Picture added successfully."}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-    
-    def get(self, request):
-        id = request.user.id
-        if Picture.objects.filter(id = id).exists():
-            pic = Picture.objects.get(id = id)
-            serializer = PictureSerializer(pic, many=False)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        else:
-            return Response({"message": "Picture not found."}, status=status.HTTP_404_NOT_FOUND)
-            
-    def delete(self, request):
-        id = int(request.data["id"])
-        if Picture.objects.filter(id = id).exists():
-            pic = Picture.objects.get(id = id)
-            if request.user.id == pic.user.id:
-                pic.delete()
-                return Response({"message": "Picture successfully deleted."},status=status.HTTP_204_NO_CONTENT)
-            return Response({"message": "Picture cannot be deleted by another user."}, status=status.HTTP_403_FORBIDDEN)
-        return Response({"message": "Picture not found."}, status=status.HTTP_404_NOT_FOUND)
-    
\ No newline at end of file
+
+    def retrieve(self, request):
+        instance = self.get_object()
+        serializer = self.get_serializer(instance)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def destroy(self, request):
+        instance = self.get_object()
+        if request.user.id == instance.user.id:
+            self.perform_destroy(instance)
+            return Response({"message": "Picture successfully deleted."}, status=status.HTTP_204_NO_CONTENT)
+        return Response({"message": "Picture cannot be deleted by another user."}, status=status.HTTP_403_FORBIDDEN)
diff --git a/backend/kodecupidapp/views/swipe.py b/backend/kodecupidapp/views/swipe.py
index 9b46b2b..0afa97b 100644
--- a/backend/kodecupidapp/views/swipe.py
+++ b/backend/kodecupidapp/views/swipe.py
@@ -1,38 +1,58 @@
 from rest_framework import status
-from rest_framework.decorators import api_view, permission_classes
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
+from rest_framework.decorators import action
+
+from drf_spectacular.utils import extend_schema, OpenApiParameter
+
+from rest_framework.viewsets import GenericViewSet
+
 from ..serializers import UserSerializer
 
-from ..models import User
+from ..models import User, Like
 
 import random
 
 
-@api_view(['GET'])
-@permission_classes([IsAuthenticated])
-def user_by_id(request, id):
-    if User.objects.filter(id = id).exists():
-        user = User.objects.get(id = id)
-        serializer = UserSerializer(user, many=False)
+
+class SwipeView(GenericViewSet):
+    permission_classes = [IsAuthenticated]
+    serializer_class = UserSerializer
+
+    @action(detail=False, methods=['get'],url_path='<int:pk>')
+    def user_by_id(self,request, pk):
+        if User.objects.filter(id = pk).exists():
+            user = User.objects.get(id = pk)
+            serializer = self.serializer_class(user, many=False)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        else:
+            return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
+
+    @action(detail=False, methods=['get'])  
+    def matches(self, request):
+        user = request.user
+        
+        likes_target_user = Like.objects.filter(target_user=user).values_list('source_user', flat=True)
+        users = User.objects.filter(id__in=likes_target_user)
+
+        serializer = self.serializer_class(users, many=True)
+
         return Response(serializer.data, status=status.HTTP_200_OK)
-    else:
-        return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
 
-@api_view(['GET'])
-@permission_classes([IsAuthenticated])
-def random_user(request):
-    users = User.objects.exclude(id=request.user.id)
+    @action(detail=False, methods=['get'])
+    def random_user(self,request):
+        users = User.objects.exclude(id=request.user.id)
 
-    # TODO: retreive only the one not liked by the user !
+        likes_source_user = Like.objects.filter(source_user=request.user).values_list('target_user', flat=True)
+        users = users.exclude(id__in=likes_source_user)
 
-    if len(users) == 0:
-        return Response({"message": "Looks like you liked them all"}, status=status.HTTP_404_NOT_FOUND)
+        if len(users) == 0:
+            return Response({"message": "Looks like you liked them all"}, status=status.HTTP_404_NOT_FOUND)
 
-    user = random.choice(users)
+        user = random.choice(users)
 
-    serializer = UserSerializer(user, many=False)
+        serializer = self.serializer_class(user, many=False)
 
-    return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
diff --git a/backend/kodecupidapp/views/tag.py b/backend/kodecupidapp/views/tag.py
index a8db001..e71ead2 100644
--- a/backend/kodecupidapp/views/tag.py
+++ b/backend/kodecupidapp/views/tag.py
@@ -1,54 +1,15 @@
-from rest_framework.views import APIView
+from rest_framework.viewsets import GenericViewSet
+from rest_framework.mixins import ListModelMixin
 from rest_framework.response import Response
-from django.shortcuts import get_object_or_404
 from rest_framework import status
 from ..models import Tag
 from ..serializers import TagSerializer
-from ..models import User
 
+class TagView(GenericViewSet, ListModelMixin):
+    queryset = Tag.objects.all()
+    serializer_class = TagSerializer
 
-class TagView(APIView):
-
-    def get(self, request):
-        tags = Tag.objects.all()
-        serializer = TagSerializer(tags, many=True)
+    def list(self, request, *args, **kwargs):
+        queryset = self.get_queryset()
+        serializer = self.get_serializer(queryset, many=True)
         return Response(serializer.data)
-    
-    def post(self, request):
-
-        serializer = TagSerializer(data=request.data)
-
-        if not serializer.is_valid():
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        user = request.user
-
-        tag_name = serializer.validated_data['name']
-        tag = get_object_or_404(Tag, name=tag_name)
-
-        if tag in user.tags.all():
-            return Response({'message': 'User already has tag'}, status=status.HTTP_400_BAD_REQUEST)
-
-        user.tags.add(tag)
-
-        return Response({'message': 'Tag added to user'}, status=status.HTTP_201_CREATED)
-    
-
-    def delete(self, request):
-
-        serializer = TagSerializer(data=request.data)
-
-        if not serializer.is_valid():
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        user = request.user
-
-        tag_name = serializer.validated_data['name']
-        tag = get_object_or_404(Tag, name=tag_name)
-
-        if user not in tag.users.all():
-            return Response({'message': 'User does not have tag'}, status=status.HTTP_400_BAD_REQUEST)
-
-        tag.users.remove(user)
-
-        return Response({'message': 'Tag removed from user'}, status=status.HTTP_204_NO_CONTENT)
diff --git a/backend/kodecupidapp/views/user.py b/backend/kodecupidapp/views/user.py
index 8fb02e1..4ffec56 100644
--- a/backend/kodecupidapp/views/user.py
+++ b/backend/kodecupidapp/views/user.py
@@ -1,50 +1,97 @@
-from rest_framework.views import APIView
+from rest_framework.viewsets import GenericViewSet
+from rest_framework.mixins import  CreateModelMixin
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
-from ..models import User
+
+from django.shortcuts import get_object_or_404
+
+from ..models import User, Tag
 from ..serializers import UserSerializer, UserRegistrationSerializer, UserConfigurationSerializer, TagSerializer
 
-class UserView(APIView):
+from rest_framework.decorators import action
+
+class UserView(GenericViewSet, CreateModelMixin):
+    queryset = User.objects.all()
 
+    def get_serializer_class(self):
+        if self.action == "create":
+            return UserRegistrationSerializer
+        elif self.action == "partial_update":
+            return UserConfigurationSerializer
+        else:
+            return UserSerializer
+    
     def get_permissions(self):
-        if self.request.method in ["POST"]:
+        if self.action == "create":
             return [AllowAny()]
         else:
             return [IsAuthenticated()]
 
-    def post(self, request):
-        serializer = UserRegistrationSerializer(data=request.data)
+    def create(self, request):
+        serializer = self.get_serializer_class()(data=request.data)
 
         if serializer.is_valid():
             serializer.save()
             return Response({"message": "User created successfully."}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
     
-    def patch(self, request):
-        serializer = UserConfigurationSerializer(request.user, data=request.data)
+    def partial_update(self, request, pk=None):
+        user = request.user
+        serializer = self.get_serializer_class()(user, data=request.data, partial=True)
 
         if serializer.is_valid():
             serializer.save()
             return Response({"message": "User configured successfully."}, status=status.HTTP_204_NO_CONTENT)   
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def get(self, request):
-        
-        id = request.user.id
 
-        if User.objects.filter(id = id).exists():
-            user = User.objects.get(id = id)
-            serializer = UserSerializer(user, many=False)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        
-        return Response({"message": "User not found."}, status=status.HTTP_404_NOT_FOUND)
+    @action(detail=False, methods=['get'])
+    def current(self, request):
+        user = request.user
+        serializer = self.get_serializer_class()(user)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+    
+    @action(detail=True, methods=['get'])
+    def tags(self, request, pk=None):
+        user = self.get_object()
+        serializer = TagSerializer(user.tags, many=True)
+        return Response(serializer.data)
     
-class UserTagView(APIView):
+    @action(detail=False, methods=['post'])
+    def add_tag(self, request):
+        serializer = TagSerializer(data=request.data)
+
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def get(self, request):
         user = request.user
 
-        serializer = TagSerializer(user.tags, many=True)
+        tag_name = serializer.validated_data['name']
+        tag = get_object_or_404(Tag, name=tag_name)
+
+        if tag in user.tags.all():
+            return Response({'message': 'User already has tag'}, status=status.HTTP_400_BAD_REQUEST)
+
+        user.tags.add(tag)
+
+        return Response({'message': 'Tag added to user'}, status=status.HTTP_201_CREATED)
+
+    @action(detail=False, methods=['delete'])
+    def remove_tag(self, request):
+        serializer = TagSerializer(data=request.data)
+
+        if not serializer.is_valid():
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        user = request.user
+
+        tag_name = serializer.validated_data['name']
+        tag = get_object_or_404(Tag, name=tag_name)
+
+        if tag not in user.tags.all():
+            return Response({'message': 'User does not have tag'}, status=status.HTTP_400_BAD_REQUEST)
+
+        user.tags.remove(tag)
 
-        return Response(serializer.data)
\ No newline at end of file
+        return Response({'message': 'Tag removed from user'}, status=status.HTTP_204_NO_CONTENT)
\ No newline at end of file
diff --git a/deploy.sh b/deploy.sh
index 5e0b6ee..6b24184 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -23,6 +23,8 @@ pipenv install --deploy
 pipenv run python3 manage.py migrate
 
 pipenv run python3 manage.py import_tags
+
+pipenv run python3 manage.py spectacular --file schema.yml
 pipenv run python3 manage.py collectstatic --noinput
 
 pipenv run pip freeze > requirement.txt
diff --git a/docker-images/django/Dockerfile b/docker-images/django/Dockerfile
index ba8b013..840dad7 100644
--- a/docker-images/django/Dockerfile
+++ b/docker-images/django/Dockerfile
@@ -5,7 +5,7 @@ ARG user_id
 ARG grp_id
 
 RUN apt-get update
-RUN apt-get upgrade
+RUN apt-get upgrade -y
 RUN apt-get install -y \
   pipenv
   
diff --git a/docker-images/django/startup.sh b/docker-images/django/startup.sh
index 0fee711..a8a0c07 100755
--- a/docker-images/django/startup.sh
+++ b/docker-images/django/startup.sh
@@ -1,10 +1,12 @@
 #!/bin/sh
 cd /files
 
+rm -f Pipfile.lock
 pipenv install --deploy --python "/usr/bin/python3"
 
 while [ true ];
 do
+    pipenv run python3 manage.py spectacular --file schema.yml
     pipenv run python3 manage.py collectstatic --noinput
     pipenv run python3 manage.py migrate
     pipenv run python3 manage.py runserver 0.0.0.0:$KODECUPID_BACKEND_PORT
diff --git a/docker-images/vuejs/Dockerfile b/docker-images/vuejs/Dockerfile
index 3e707f0..d827593 100644
--- a/docker-images/vuejs/Dockerfile
+++ b/docker-images/vuejs/Dockerfile
@@ -5,7 +5,7 @@ ARG user_id
 ARG grp_id
 
 RUN apt-get update
-RUN apt-get upgrade
+RUN apt-get upgrade -y
 RUN apt-get install -y \
   lsb-release \
   ca-certificates \
diff --git a/frontend/src/clients/apiClient.js b/frontend/src/clients/apiClient.js
new file mode 100644
index 0000000..eb8f6dd
--- /dev/null
+++ b/frontend/src/clients/apiClient.js
@@ -0,0 +1,204 @@
+import {setError} from '@/store';
+import axios from 'axios';
+
+import {RouteEnum, routes_api} from '../configs/constants';
+
+const API_SERVER_URL = import.meta.env.VITE_API_URL;
+
+export class ApiClient {
+  // users
+  static async signupUser(data) {
+    try {
+      const response =
+          await axios.post(handleRoute(RouteEnum.USER_LIST), data, {
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': 'anonymous'
+            }
+          });
+
+      if (response.status === 201) {
+        localStorage.setItem('uninitialized', true);
+        setError({message: 'Votre compte a été bien enregistre'}, 'success');
+        return true
+      }
+    } catch (error) {
+      setError(error.response.data, 'error');
+      return false;
+    }
+  }
+  static async signinUser(data) {
+    try {
+      const response =
+          await axios.post(handleRoute(RouteEnum.TOKEN_OBTAIN_PAIR), data, {
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': 'anonymous'
+            }
+          });
+      if (response.status === 200) {
+        localStorage.setItem('accessToken', response.data.access);
+        axios.defaults.headers.common['Authorization'] =
+            `Bearer ${localStorage.getItem('accessToken')}`;
+        localStorage.setItem('refreshToken', response.data.refresh);
+        return true;
+      }
+    } catch (error) {
+      console.error(error);
+      setError(error.response?.data, 'error');
+      return false;
+    }
+  }
+
+  static async getUserRandom() {
+    try {
+      const response = await axios.get(handleRoute(RouteEnum.SWIPE_RANDOM_USER));
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  }
+
+  static async getUserMatches() {
+    try {
+      const response = await axios.get(handleRoute(RouteEnum.SWIPE_MATCHES));
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  }
+
+  static async likeUser(id) {
+
+    console.log('likeUser', id);
+    try {
+      await axios.post(handleRoute(RouteEnum.LIKE_LIST),{target_user_id: id });
+      return true;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return false;
+    }
+  }
+
+  static async getUser() {
+    try {
+      const response = await axios.get(handleRoute(RouteEnum.USER_CURRENT));
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  };
+
+  static async getUserTags(id) {
+    try {
+      const response = await axios.get(
+          handleRoute(RouteEnum.USER_TAGS, id));
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  };
+
+  static async updateUser(user,id) {
+    try {
+        await axios.patch(handleRoute(RouteEnum.USER_DETAIL,id), user, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true
+        });
+    
+        setError({ message: 'L\'utilisateur a été mis à jour' }, 'success');
+        localStorage.setItem('uninitialized', false);
+        return true;
+    } catch (error) {
+        console.error(error);
+        setError(error.response?.data, 'error');
+        return false;
+    }
+  }
+
+  static async addUserTag(tag) {
+    try {
+      const response = await axios.post(
+          handleRoute(RouteEnum.USER_ADD_TAG), tag);
+          setError(response.data, 'success');
+      return true;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return false;
+    }
+  };
+
+  static async deleteUserTag(tag) {
+    try {
+      const response = await axios.delete(
+          handleRoute(RouteEnum.USER_REMOVE_TAG), {data: tag});
+      setError(response.data, 'success');
+      return true;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return false;
+    }
+  };
+
+  // tags
+
+  static async getTags() {
+    try {
+      const response = await axios.get(handleRoute(RouteEnum.TAG_LIST));
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  };
+
+  // token
+
+  static async refreshToken(refreshToken) {
+    try {
+      const response = await axios.post(
+          handleRoute(RouteEnum.TOKEN_REFRESH), {'refresh': refreshToken},
+          {withCredentials: true});
+
+      if (response.status === 200) {
+        localStorage.setItem('accessToken', response.data.access);
+        axios.defaults.headers.common['Authorization'] =`Bearer ${localStorage.getItem('accessToken')}`;
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      return false;
+    }
+  }
+}
+
+const handleRoute = (function() {
+  function handleRoute(routeName, id) {
+    const route = routes_api[routeName];
+    if (!route) {
+      throw new Error(`Route with name '${routeName}' not found`);
+    }
+
+    let routeUrl = route;
+    if (id !== undefined) {
+      routeUrl = routeUrl.replace('{id}', id);
+    }
+    return API_SERVER_URL +routeUrl;
+  }
+  return handleRoute;
+})();
\ No newline at end of file
diff --git a/frontend/src/configs/constants.js b/frontend/src/configs/constants.js
index fe249cf..d3f7738 100644
--- a/frontend/src/configs/constants.js
+++ b/frontend/src/configs/constants.js
@@ -1,35 +1,85 @@
-const API_SERVER_URL = import.meta.env.VITE_API_URL;
 
 /*
-'admin/'
-'api/token/'
-'api/token/refresh/'
-'api/user/'
-'api/tags/'
-'api/like/'
+api/users/$ [name='user-list']
+api/users\.(?P<format>[a-z0-9]+)/?$ [name='user-list']
+api/users/add_tag/$ [name='user-add-tag']
+api/users/add_tag\.(?P<format>[a-z0-9]+)/?$ [name='user-add-tag']
+api/users/remove_tag/$ [name='user-remove-tag']
+api/users/remove_tag\.(?P<format>[a-z0-9]+)/?$ [name='user-remove-tag']
+api/users/(?P<pk>[^/.]+)/$ [name='user-detail']
+api/users/(?P<pk>[^/.]+)\.(?P<format>[a-z0-9]+)/?$ [name='user-detail']
+api/users/(?P<pk>[^/.]+)/tags/$ [name='user-tags']
+api/users/(?P<pk>[^/.]+)/tags\.(?P<format>[a-z0-9]+)/?$ [name='user-tags']
+
+api/tags/$ [name='tag-list']
+api/tags\.(?P<format>[a-z0-9]+)/?$ [name='tag-list']
+
+api/pictures/$ [name='picture-list']
+api/pictures\.(?P<format>[a-z0-9]+)/?$ [name='picture-list']
+api/pictures/(?P<pk>[^/.]+)/$ [name='picture-detail']
+api/pictures/(?P<pk>[^/.]+)\.(?P<format>[a-z0-9]+)/?$ [name='picture-detail']
+
+api/likes/$ [name='like-list']
+api/likes\.(?P<format>[a-z0-9]+)/?$ [name='like-list']
+
+api/swipes/random_user/$ [name='swipe-random-user']
+api/swipes/random_user\.(?P<format>[a-z0-9]+)/?$ [name='swipe-random-user']
+api/swipes/(?P<pk>[^/.]+)/<int:pk>/$ [name='swipe-user-by-id']
+api/swipes/(?P<pk>[^/.]+)/<int:pk>\.(?P<format>[a-z0-9]+)/?$ [name='swipe-user-by-id']
+
+api/token/ [name='token_obtain_pair']
+api/token/refresh/ [name='token_refresh']
 */
 
-export const API_ROUTES = {
-    USER_SEARCH: API_SERVER_URL+'/api/user/',
-    USER_MATCH: API_SERVER_URL+'/api/users/match/',
-    USER_LIKE: API_SERVER_URL+'/api/like/',
-    
-    USER_SIGNUP: API_SERVER_URL+'/api/user/',
-    USER_SIGNIN: API_SERVER_URL+'/api/token/',
-    USER_TOKEN_REFRESH: API_SERVER_URL+'/api/token/refresh/',
-    
-    USER: API_SERVER_URL+'/api/user/',
-    USER_RANDOM: API_SERVER_URL+'/api/user/random',
-    
-    TAG_LIST: API_SERVER_URL+'/api/tags/',
-    
-    USER_TAG_ADD: API_SERVER_URL+'/api/tags/',
-    USER_TAG_REMOVE: API_SERVER_URL+'/api/tags/',
-
-    USER_TAGS: API_SERVER_URL+'/api/user/tags',
-
-    USER_PICTURE: API_SERVER_URL+'/api/picture/'
 
+
+const routes_api = {
+    'user-list':  '/api/users/',
+    'user-add-tag':'/api/users/add_tag/',
+    'user-remove-tag': '/api/users/remove_tag/',
+    'user-current':'/api/users/current/',
+    'user-tags':'/api/users/{id}/tags/',
+
+    'user-detail':'/api/users/{id}/',
+
+    'tag-list':'/api/tags/',
+
+    'picture-list':'/api/pictures/',
+    'picture-detail':'/api/pictures/{id}/',
+
+    'like-list':'/api/likes/',
+
+    'swipe-random-user':'/api/swipes/random_user/',
+    'swipe-user-by-id':'/api/swipes/{id}/',
+    'swipe-matches':'/api/swipes/matches/',
+
+    'token_obtain_pair':'/api/token/',
+    'token_refresh':'/api/token/refresh/',
+
+};
+
+const RouteEnum = {
+    USER_LIST: 'user-list',
+    USER_ADD_TAG: 'user-add-tag',
+    USER_REMOVE_TAG: 'user-remove-tag',
+    USER_CURRENT: 'user-current',
+    USER_TAGS: 'user-tags',
+
+    USER_DETAIL: 'user-detail',
+
+    TAG_LIST: 'tag-list',
+
+    PICTURE_LIST: 'picture-list',
+    PICTURE_DETAIL: 'picture-detail',
+
+    LIKE_LIST: 'like-list',
+
+    SWIPE_RANDOM_USER: 'swipe-random-user',
+    SWIPE_USER_BY_ID: 'swipe-user-by-id',
+    SWIPE_MATCHES: 'swipe-matches',
+
+    TOKEN_OBTAIN_PAIR: 'token_obtain_pair',
+    TOKEN_REFRESH: 'token_refresh',
 };
 
-export default API_ROUTES
\ No newline at end of file
+export {routes_api, RouteEnum };
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 4d3cc5e..ac039a5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -12,9 +12,6 @@ import { aliases, mdi } from 'vuetify/iconsets/mdi';
 
 import axiosPluging from '@/plugins/axiosPlugin';
 
-// import axios from 'axios';
-// axios.defaults.baseURL = import.meta.env.VITE_API_URL;
-
 const app = createApp(App);
 
 const vuetify = createVuetify({
diff --git a/frontend/src/plugins/axiosPlugin.js b/frontend/src/plugins/axiosPlugin.js
index ef8725b..5b47d67 100644
--- a/frontend/src/plugins/axiosPlugin.js
+++ b/frontend/src/plugins/axiosPlugin.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
-import { store } from '@/store';
-import router from '@/router'; // Assuming you have Vue Router set up
+import {ApiClient} from '@/clients/apiClient.js';
+import router from '@/router';
 
 export default {
     install: (app) => {
@@ -12,31 +12,15 @@ export default {
             if (error.response.status === 401 && !originalRequest._retry) {
                 originalRequest._retry = true;
                 const refreshToken = localStorage.getItem('refreshToken');
+                
+                
+                const response = ApiClient.refreshToken(refreshToken);
 
-                return axios.post(store.routes['USER_TOKEN_REFRESH'], 
-                {
-                    'refresh': refreshToken
-                },
-                {
-                    withCredentials: true
-                })
-                .then((response) => 
-                {
-                    if (response.status === 200)
-                    {
-                        localStorage.setItem('accessToken', response.data.access);
-                        axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
-                        return axios(originalRequest);
-                    }
-                    else
-                    {
-                        router.push({ name: 'signin',replace: true, force: true });
-                    }
-                })
-                .catch(() => 
-                {
-                    router.push({ name: 'signin',replace: true, force: true });
-                });
+                if (response) {
+                    return axios(originalRequest);
+                }else{
+                    router.push({name: 'signin', replace: true, force: true});
+                }
             }
             return Promise.reject(error);
         });
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 96d0ef4..1736737 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -1,15 +1,16 @@
-import { reactive, ref } from 'vue';
-import API_ROUTES from '@/configs/constants.js';
+import {reactive, ref} from 'vue';
+
 
 export const store = reactive({
-  routes:API_ROUTES,
-  error: {message:{},type:''},
+  routes: null,
+  error: {message: {}, type: ''},
 });
 
 
-export const setError = (message,type) => {
-    store.error.message = message;
-    store.error.type = type;
-}
+export const setError =
+    (message, type) => {
+      store.error.message = message;
+      store.error.type = type;
+    }
 
 export default {store, setError};
\ No newline at end of file
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
index 04529b0..eda544c 100644
--- a/frontend/src/views/account/EditView.vue
+++ b/frontend/src/views/account/EditView.vue
@@ -25,15 +25,17 @@
                 <v-row>
                     <v-col>
                         <v-card-subtitle>
-                            <v-text-field v-model="user.bio" label="Bio" type="bio" :rules="bioRules" :value="user.bio" required />
+                            <v-text-field v-model="user.bio" label="Bio" type="bio" :rules="bioRules" :value="user.bio"
+                                required />
                         </v-card-subtitle>
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col>
                         <v-card-subtitle>
-                            <v-text-field v-model="user.looking_for" :rules="looking_forRules" label="Préférences de recherche" type="looking_for"
-                                :value="user.looking_for" required />
+                            <v-text-field v-model="user.looking_for" :rules="looking_forRules"
+                                label="Préférences de recherche" type="looking_for" :value="user.looking_for"
+                                required />
                         </v-card-subtitle>
                     </v-col>
                 </v-row>
@@ -70,21 +72,15 @@
 </template>
 
 <script setup>
-import { store } from '@/store';
-import { setError } from '@/store';
 import { ref } from 'vue';
 import { onMounted } from 'vue';
-import axios from 'axios';
 import { computed } from 'vue';
 import ImageUploader from '@/components/ImageUploader.vue';
+import { ApiClient } from '@/clients/apiClient.js';
+import { watch } from 'vue';
+import router from '@/router';
 
-const user = ref({
-    username: ref(''),
-    bio: ref(''),
-    looking_for: ref(''),
-    pfp: ref('https://picsum.photos/170'),
-    tags: ref([])
-});
+const user = ref({});
 
 const all_tags = [];
 const list_tags = ref([]);
@@ -109,67 +105,41 @@ const looking_forRules = [
 
 const handleSubmit = async () => {
     user.value.tags = user.value.tags?.map(tag => tag.id);
+    
+    const response = await ApiClient.updateUser(JSON.stringify(user.value), user.value.id);
 
-    const jsonForm = JSON.stringify(user.value);
-
-    axios.patch(store.routes['USER'], jsonForm, {
-        headers: {
-            'Content-Type': 'application/json'
-        }
-    }, { withCredentials: true }).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        uninitialized.value = false;
-        setError({message:'L\'utilisateur a été mis à jour'},'success');
-        localStorage.setItem('uninitialized', false);
+    if (response) {
         router.push({ name: 'account-show', replace: true, force: true });
-    });
+    }
 };
 
 const fetchUser = async () => {
-    axios.get(store.routes['USER']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        user.value = response.data;
-    });
+    const fetchedUser = await ApiClient.getUser();
+    const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
+
+    user.value.id = fetchedUser.id;
+    user.value.username = fetchedUser.username;
+    user.value.bio = fetchedUser.bio;
+    user.value.looking_for = fetchedUser.looking_for;
+    user.value.pfp = fetchedUser.pfp;
+    user.value.tags = fetchedTags;
 };
 
 const fetchTags = async () => {
-    axios.get(store.routes['TAG_LIST']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        all_tags.push(...response.data);
-    });
-};
-
-const fetchUserTags = async () => {
-    axios.get(store.routes['USER_TAGS']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        user.value.tags = response.data;
-    });
+    const fetchedTags = await ApiClient.getTags();
+    all_tags.push(...fetchedTags);
 };
 
 onMounted(() => {
     fetchUser();
     fetchTags();
-    fetchUserTags();
 });
 
 computed(() => {
     filteredTags();
 });
 
-import { watch } from 'vue';
-import router from '@/router';
+
 
 watch(search, () => {
     // Reset scroll position when search changes
@@ -194,30 +164,22 @@ const openTagList = () => {
     showTagList.value = true; // Show the tag list
 };
 
-const addTag = (tag) => {
-    axios.post(store.routes['USER_TAG_ADD'], JSON.stringify(tag))
-        .catch((error) => {
-            console.error(error.response.data);
-            setError(error.response.data,'error');
-            return error
-        }).then(response => {
-            user.value.tags.push(tag);
-            list_tags.value = all_tags.filter((tag) => !user.value.tags.includes(tag))
-        });
-
-    showTagList.value = false;
-    search.value = '';
+const addTag = async (tag) => {
+    const jsonTag = JSON.stringify(tag);
+    const response = await ApiClient.addUserTag(jsonTag);
+    if (response) {
+        user.value.tags.push(tag);
+        showTagList.value = false;
+        search.value = '';
+    }
 }
 
-const deleteTag = (tag) => {
-    user.value.tags = user.value.tags.filter((t) => t.id !== tag.id);
-    axios.delete(store.routes['USER_TAG_REMOVE'], { data: JSON.stringify(tag) })
-        .catch((error) => {
-            console.error(error.response.data);
-            setError(error.response.data,'error');
-            return error
-        }).then(response => {
-            list_tags.value = all_tags.filter((tag) => !user.value.tags.includes(tag))
-        });
+const deleteTag = async (tag) => {
+    const jsonTag = JSON.stringify(tag);
+    const response = await ApiClient.deleteUserTag(jsonTag);
+    if (response) {
+        user.value.tags = user.value.tags.filter((t) => t.id !== tag.id);
+        list_tags.value = all_tags.filter((tag) => !user.value.tags.includes(tag))
+    }
 }
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/account/ShowView.vue b/frontend/src/views/account/ShowView.vue
index 7809eca..5a9398e 100644
--- a/frontend/src/views/account/ShowView.vue
+++ b/frontend/src/views/account/ShowView.vue
@@ -1,5 +1,5 @@
 <template v-if="config">
-    <v-card v-model="user" class="rounded-xl">
+    <v-card class="rounded-xl">
         <v-container>
             <v-row>
                 <v-col>
@@ -35,46 +35,25 @@
 </template>
 
 <script setup>
-import { store } from '@/store';
-import { setError } from '@/store';
+
 import { ref } from 'vue';
 import { onMounted } from 'vue';
-import axios from 'axios';
-
-const user = ref({
-    username: ref(''),
-    bio: ref(''),
-    looking_for: ref(''),
-    pfp: ref('https://picsum.photos/170'),
-    tags: ref([])
-});
-
+import { ApiClient } from '@/clients/apiClient.js';
 
-const fetchUser = async ()=> {
-    await axios.get(store.routes['USER']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        console.log(response.data);
-        user.value = response.data;
-    });
-};
+const user = ref({});
 
-const fetchUserTags = async () => {
-    axios.get(store.routes['USER_TAGS']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        console.log('user tags', response.data);
-        user.value.tags = response.data;
-    });
-};
+const fetchUser = async () => {
+    const fetchedUser = await ApiClient.getUser();
+    const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
 
+    user.value.username = fetchedUser.username;
+    user.value.bio = fetchedUser.bio;
+    user.value.looking_for = fetchedUser.looking_for;
+    user.value.pfp = fetchedUser.pfp;
+    user.value.tags = fetchedTags;
+}
 
 onMounted(() => {
     fetchUser();
-    fetchUserTags();
 });
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/authentication/SigninView.vue b/frontend/src/views/authentication/SigninView.vue
index eb2b8f3..7029f3f 100644
--- a/frontend/src/views/authentication/SigninView.vue
+++ b/frontend/src/views/authentication/SigninView.vue
@@ -34,16 +34,10 @@
 </template>
 
 <script setup>
-import axios from 'axios';
-
 import { ref } from 'vue';
-import { store } from '@/store';
-import { setError } from '@/store';
-
+import { ApiClient } from '@/clients/apiClient.js';
 import router from '@/router';
 
-const uninitialized = ref(localStorage.getItem('uninitialized'));
-
 const form = ref({
   username: '',
   password: ''
@@ -62,31 +56,15 @@ const passwordRules = [
 const handleSubmit = async () => {
   const jsonForm = JSON.stringify(form.value);
 
-  axios.post(store.routes['USER_SIGNIN'], jsonForm, {
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `anonymous`
-    }
-  })
-    .catch((error) => {
-      console.error("Signin error", error.response.data);
-      setError(error.response.data,'error');
-      return error
-    })
-    .then(response => {
-      if (response.status === 200) {
-        localStorage.setItem('accessToken', response.data.access);
-        axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
-        localStorage.setItem('refreshToken', response.data.refresh);
-        if (uninitialized.value) {
-          router.push({ name: 'account-edit', replace: true, force: true });
-        }
-        else {
-          router.push({ name: 'account-show', replace: true, force: true });
-        }
+  const response = await ApiClient.signinUser(jsonForm);
 
-      }
-    });
+  if (response){
+    if (localStorage.getItem('uninitialized') === 'true') {
+          router.push({name: 'account-edit', replace: true, force: true});
+        } else {
+          router.push({name: 'account-show', replace: true, force: true});
+        }
+  }
 };
 
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/authentication/SignupView.vue b/frontend/src/views/authentication/SignupView.vue
index e892143..77b7c09 100644
--- a/frontend/src/views/authentication/SignupView.vue
+++ b/frontend/src/views/authentication/SignupView.vue
@@ -34,10 +34,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { store } from '@/store';
-import { setError } from '@/store';
-import axios from 'axios';
-import router from '@/router';
+import {ApiClient} from '@/clients/apiClient.js';
 
 const form = ref({
   username: '',
@@ -56,24 +53,12 @@ const passwordRules = [
 
 const handleSubmit = async () => {
   const jsonForm = JSON.stringify(form.value);
-  axios.post(store.routes['USER_SIGNUP'], jsonForm, {
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': "anonymous"
-    }}
-    , {  })
-    .catch((error) => {
-      console.error(error.response.data);
-      setError(error.response.data,'error');
-      return error
-    })
-    .then(response => {
-      console.log(response);
-      if (response.status === 201) {
-        localStorage.setItem('uninitialized', true);
-        setError({message: "Votre compte a été bien enregistre"},'success');
-        router.push({ name: 'signin', replace: true, force: true});
-      }
-    });
+
+  const response = await ApiClient.signupUser(jsonForm);
+
+  if (response){
+    router.push({name: 'signin', replace: true, force: true});
+  }
+  
 };
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/cupid/MatchView.vue b/frontend/src/views/cupid/MatchView.vue
index 5aad56c..7943c62 100644
--- a/frontend/src/views/cupid/MatchView.vue
+++ b/frontend/src/views/cupid/MatchView.vue
@@ -20,24 +20,13 @@
 
 <script setup>
 import { onMounted, ref } from 'vue';
+import { ApiClient } from '@/clients/apiClient.js';
 import PeopleCard from '@/components/PeopleCard.vue';
 
-import { store } from '@/store';
-import { setError } from '@/store';
-import axios from 'axios';
-
 const match = ref([]);
 
 const fetchUserMatch = async () => {
-    // TODO not implemented yet -> will be done in the future
-    // axios.get(store.routes['USER_MATCH'], {}).catch((error) => {
-    //     console.error(error.response.data);
-    //     store.error.value = error.response.data;
-    //     return error
-    // })
-    //     .then(response => {
-    //         match.value = response.data;
-    //     });
+    match.value = await ApiClient.getUserMatches();
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
index cc9e46b..24537e4 100644
--- a/frontend/src/views/cupid/SearchView.vue
+++ b/frontend/src/views/cupid/SearchView.vue
@@ -21,21 +21,16 @@
 import { onMounted, ref } from 'vue';
 import PeopleCard from '@/components/PeopleCard.vue';
 
-
-import { store } from '@/store';
-import { setError } from '@/store';
-import axios from 'axios';
+import { ApiClient } from '@/clients/apiClient.js';
 
 const user = ref({});
 
 const like = async () => {
-    axios.post(store.routes['USER_LIKE'], { target_user_id: user.value.id }).catch((error) => {
-        setError(error.response.data,'error');
-        fetchUser();
-    })
-    .then(response => {
+    console.log(user.value);
+    const liked = await ApiClient.likeUser(user.value.id);
+    if (liked) {
         fetchUser();
-    });
+    }
 };
 
 const dislike = async () => {
@@ -43,13 +38,13 @@ const dislike = async () => {
 };
 
 const fetchUser = async () => {
-    axios.get(store.routes['USER_RANDOM']).catch((error) => {
-        console.error(error.response.data);
-        setError(error.response.data,'error');
-        return error
-    }).then(response => {
-        user.value = response.data;
-    });
+    const fetchedUser = await ApiClient.getUserRandom();
+
+    user.value.id = fetchedUser.id;
+    user.value.username = fetchedUser.username;
+    user.value.bio = fetchedUser.bio;
+    user.value.looking_for = fetchedUser.looking_for;
+    user.value.pfp = fetchedUser.pfp;
 };
 
 onMounted(() => {

From 1c7c164dfab4429ddb46ac674a46d82905ceeea7 Mon Sep 17 00:00:00 2001
From: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date: Sat, 20 Apr 2024 14:36:57 +0200
Subject: [PATCH 5/7] fixes

---
 backend/kodecupid/settings.py               |   3 +
 backend/kodecupidapp/serializers/picture.py |   4 +-
 backend/kodecupidapp/views/picture.py       |  37 ++++++--
 backend/kodecupidapp/views/user.py          |   9 +-
 frontend/src/clients/apiClient.js           | 100 +++++++++++++++-----
 frontend/src/components/ImageUploader.vue   |  84 +++++++---------
 frontend/src/components/PeopleCard.vue      |   9 +-
 frontend/src/configs/constants.js           |   8 +-
 frontend/src/plugins/axiosPlugin.js         |   7 +-
 frontend/src/views/account/EditView.vue     |  50 ++++++++--
 frontend/src/views/account/ShowView.vue     |   8 +-
 frontend/src/views/cupid/SearchView.vue     |  17 +++-
 12 files changed, 231 insertions(+), 105 deletions(-)

diff --git a/backend/kodecupid/settings.py b/backend/kodecupid/settings.py
index ef160a5..55ec6eb 100644
--- a/backend/kodecupid/settings.py
+++ b/backend/kodecupid/settings.py
@@ -97,6 +97,9 @@
     'SERVE_INCLUDE_SCHEMA': False,
 }
 
+MEDIA_URL = '/files/'
+MEDIA_ROOT = BASE_DIR
+
 WSGI_APPLICATION = 'kodecupid.wsgi.application'
 
 # Database
diff --git a/backend/kodecupidapp/serializers/picture.py b/backend/kodecupidapp/serializers/picture.py
index bf90f24..9f4acfd 100644
--- a/backend/kodecupidapp/serializers/picture.py
+++ b/backend/kodecupidapp/serializers/picture.py
@@ -1,7 +1,9 @@
 from rest_framework import serializers
 from ..models import Picture
 
+
 class PictureSerializer(serializers.ModelSerializer):
+
     class Meta:
         model = Picture
-        fields = ['id', 'image', 'user']
\ No newline at end of file
+        fields = ['id', 'image']
diff --git a/backend/kodecupidapp/views/picture.py b/backend/kodecupidapp/views/picture.py
index 9dd3976..d29396a 100644
--- a/backend/kodecupidapp/views/picture.py
+++ b/backend/kodecupidapp/views/picture.py
@@ -6,6 +6,10 @@
 from ..models import Picture
 from ..serializers import PictureSerializer
 
+from django.http import HttpResponse
+
+import os
+
 
 class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, DestroyModelMixin):
     queryset = Picture.objects.all()
@@ -13,20 +17,41 @@ class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, DestroyM
     permission_classes = [IsAuthenticated]
 
     def create(self, request):
-
         modified_data = request.data.copy()
         modified_data['user'] = request.user.id
 
         serializer = self.get_serializer(data=modified_data)
         if serializer.is_valid():
-            serializer.save()
-            return Response({"message": "Picture added successfully."}, status=status.HTTP_201_CREATED)
+            instance = serializer.save()
+            # Access the ID of the newly created instance
+            new_id = instance.id
+            return Response({"message": "Picture added successfully.", "id": new_id}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def retrieve(self, request):
+    def retrieve(self, request, *args, **kwargs):
         instance = self.get_object()
-        serializer = self.get_serializer(instance)
-        return Response(serializer.data, status=status.HTTP_200_OK)
+        # serializer = self.get_serializer(instance)
+        
+        # Get the image path
+        image_path = instance.image.path
+        # Read the image data
+        with open(image_path, 'rb') as image_file:
+            image_data = image_file.read()
+
+        # Return the image data in an HTTP response
+        response = HttpResponse(image_data, content_type='image/jpeg')
+        response['Content-Disposition'] = 'attachment; filename="image.jpg"'
+        return response
+
+    # def retrieve(self, request, pk=None):
+    #     instance = self.get_object()
+    #     serializer = self.get_serializer(instance)
+
+    #     # content_type = "image/png"  # Adjust according to the actual image type
+
+    # # Return the picture data in an HTTP response
+    # # return HttpResponse(picture_data, content_type=content_type)
+    #     return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request):
         instance = self.get_object()
diff --git a/backend/kodecupidapp/views/user.py b/backend/kodecupidapp/views/user.py
index 4ffec56..958f9d2 100644
--- a/backend/kodecupidapp/views/user.py
+++ b/backend/kodecupidapp/views/user.py
@@ -94,4 +94,11 @@ def remove_tag(self, request):
 
         user.tags.remove(tag)
 
-        return Response({'message': 'Tag removed from user'}, status=status.HTTP_204_NO_CONTENT)
\ No newline at end of file
+        return Response({'message': 'Tag removed from user'}, status=status.HTTP_204_NO_CONTENT)
+    
+    @action(detail=False, methods=['post'])
+    def add_picture(self, request):
+        user = request.user
+        user.pfp = request.data['pfp']
+        user.save()
+        return Response({"message": "Picture added successfully."}, status=status.HTTP_201_CREATED)
\ No newline at end of file
diff --git a/frontend/src/clients/apiClient.js b/frontend/src/clients/apiClient.js
index eb8f6dd..c7aaa47 100644
--- a/frontend/src/clients/apiClient.js
+++ b/frontend/src/clients/apiClient.js
@@ -52,7 +52,8 @@ export class ApiClient {
 
   static async getUserRandom() {
     try {
-      const response = await axios.get(handleRoute(RouteEnum.SWIPE_RANDOM_USER));
+      const response =
+          await axios.get(handleRoute(RouteEnum.SWIPE_RANDOM_USER));
       return response.data;
     } catch (error) {
       console.error(error.response?.data);
@@ -73,10 +74,9 @@ export class ApiClient {
   }
 
   static async likeUser(id) {
-
     console.log('likeUser', id);
     try {
-      await axios.post(handleRoute(RouteEnum.LIKE_LIST),{target_user_id: id });
+      await axios.post(handleRoute(RouteEnum.LIKE_LIST), {target_user_id: id});
       return true;
     } catch (error) {
       console.error(error.response?.data);
@@ -98,8 +98,8 @@ export class ApiClient {
 
   static async getUserTags(id) {
     try {
-      const response = await axios.get(
-          handleRoute(RouteEnum.USER_TAGS, id));
+      const response =
+          await axios.get(handleRoute(RouteEnum.USER_TAGS_LIST, id));
       return response.data;
     } catch (error) {
       console.error(error.response?.data);
@@ -108,30 +108,28 @@ export class ApiClient {
     }
   };
 
-  static async updateUser(user,id) {
+  static async updateUser(user, id) {
     try {
-        await axios.patch(handleRoute(RouteEnum.USER_DETAIL,id), user, {
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            withCredentials: true
-        });
-    
-        setError({ message: 'L\'utilisateur a été mis à jour' }, 'success');
-        localStorage.setItem('uninitialized', false);
-        return true;
+      await axios.patch(handleRoute(RouteEnum.USER_DETAIL, id), user, {
+        headers: {'Content-Type': 'application/json'},
+        withCredentials: true
+      });
+
+      setError({message: 'L\'utilisateur a été mis à jour'}, 'success');
+      localStorage.setItem('uninitialized', false);
+      return true;
     } catch (error) {
-        console.error(error);
-        setError(error.response?.data, 'error');
-        return false;
+      console.error(error);
+      setError(error.response?.data, 'error');
+      return false;
     }
   }
 
   static async addUserTag(tag) {
     try {
-      const response = await axios.post(
-          handleRoute(RouteEnum.USER_ADD_TAG), tag);
-          setError(response.data, 'success');
+      const response =
+          await axios.post(handleRoute(RouteEnum.USER_ADD_TAG), tag);
+      setError(response.data, 'success');
       return true;
     } catch (error) {
       console.error(error.response?.data);
@@ -174,9 +172,11 @@ export class ApiClient {
           handleRoute(RouteEnum.TOKEN_REFRESH), {'refresh': refreshToken},
           {withCredentials: true});
 
+      console.log(response);
       if (response.status === 200) {
         localStorage.setItem('accessToken', response.data.access);
-        axios.defaults.headers.common['Authorization'] =`Bearer ${localStorage.getItem('accessToken')}`;
+        axios.defaults.headers.common['Authorization'] =
+            `Bearer ${localStorage.getItem('accessToken')}`;
         return true;
       } else {
         return false;
@@ -185,8 +185,60 @@ export class ApiClient {
       return false;
     }
   }
+
+  // images
+
+  static async getPicture(id) {
+    const arrayBufferToBase64 = buffer => btoa(String.fromCharCode(...new Uint8Array(buffer)));
+
+    try {
+      const response = await axios.get(
+          handleRoute(RouteEnum.PICTURE_DETAIL, id),
+          {responseType: 'arraybuffer'});
+
+      return `data:image/jpeg;base64,${arrayBufferToBase64(response.data)}`;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  }
+
+  static async addPicture(image) {
+    try {
+      const response =
+          await axios.post(handleRoute(RouteEnum.PICTURE_LIST), image, {
+            headers: {'Content-Type': 'multipart/form-data'},
+            withCredentials: true
+          });
+
+      console.log(response.data);
+      return response.data.id;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  }
+  static async addProfilePicture(image) {
+    try {
+      console.log('addProfilePicture', image);
+      const response = await axios.post(
+          handleRoute(RouteEnum.USER_ADD_PICTURE), image,
+          {headers: {'Content-Type': 'json'}, withCredentials: true});
+
+      console.log(response.data);
+      return response.data;
+    } catch (error) {
+      console.error(error.response?.data);
+      setError(error.response?.data, 'error');
+      return error;
+    }
+  }
 }
 
+
+
 const handleRoute = (function() {
   function handleRoute(routeName, id) {
     const route = routes_api[routeName];
@@ -198,7 +250,7 @@ const handleRoute = (function() {
     if (id !== undefined) {
       routeUrl = routeUrl.replace('{id}', id);
     }
-    return API_SERVER_URL +routeUrl;
+    return API_SERVER_URL + routeUrl;
   }
   return handleRoute;
 })();
\ No newline at end of file
diff --git a/frontend/src/components/ImageUploader.vue b/frontend/src/components/ImageUploader.vue
index 978d2b0..13d1f42 100644
--- a/frontend/src/components/ImageUploader.vue
+++ b/frontend/src/components/ImageUploader.vue
@@ -1,60 +1,46 @@
-<template>
+<template slot="pfp">
     <v-row>
         <v-col>
             <v-label for="imageUpload">Profile Picture:</v-label>
-            <input type="file" id="imageUpload" @change="previewImage" accept="image/*">
-            <v-img v-if="imagePreview" :src="imagePreview" class="rounded-circle border border-secondary" width="100" height="100"></v-img>
+            <v-file-input :rules="rules" @change="previewImage" accept="image/png, image/jpeg, image/bmp" label="Avatar"
+                placeholder="Pick an avatar" prepend-icon="mdi-camera"></v-file-input>
+            <v-img v-if="imagePreview" :src="pfp" class="rounded-circle border border-secondary" width="100"
+                height="100"></v-img>
             <v-btn @click="handleSubmit" class="bg-like"><v-icon>mdi-thumb-up</v-icon></v-btn>
         </v-col>
     </v-row>
 </template>
 
-<script>
-
-import { store } from '@/store';
-import axios from 'axios';
-
-export default {
-    data() {
-        return {
-            // Existing data properties
-            imagePreview: null, // For displaying the selected image preview
-            selectedFile: null, // To hold the selected file
-            // Other existing data properties
-        };
-    },
-    methods: {
-        previewImage(event) {
-            // Method to preview image before uploading
-            this.selectedFile = event.target.files[0];
-            if (this.selectedFile) {
-                this.imagePreview = URL.createObjectURL(this.selectedFile);
-            }
-        },
-        handleSubmit() {
-            const formData = new FormData();
-
-            // Append the selected file if there is one
-            if (this.selectedFile) {
-                formData.append('image', this.selectedFile);
-            }
-
-            // Perform the API call with formData
-            axios.post(store.routes['USER_PICTURE'], formData, {
-                headers: {
-                    'Content-Type': 'multipart/form-data'
-                }
-            }).then(response => {
-                // Handle success
-                console.log('Profile updated successfully.', response.data);
-            }).catch(error => {
-                // Handle error
-                console.error('Error updating profile:', error);
-            });
-        },
-        // Other methods...
-    },
-    // Other options...
+<script setup>
+import { ApiClient } from '@/clients/apiClient.js';
+import { ref } from 'vue';
+
+const imagePreview = ref(null);
+const selectedFile = ref(null);
+
+const rules = ref([
+    v => !v,
+    v => !v.length,
+    v => v[0].size < 200000 || 'Avatar size should be less than 2 MB!'
+])
+
+const previewImage = async (event) => {
+    // Method to preview image before uploading
+    selectedFile.value = event.target.files[0];
+    if (selectedFile) {
+        imagePreview.value = URL.createObjectURL(selectedFile.value);
+    }
+}
+
+const handleSubmit = async () => {
+    const formData = new FormData();
+
+    if (selectedFile.value) {
+        formData.append('image', selectedFile.value);
+    }
+
+    // await ApiClient.addPicture(formData);
+    // await ApiClient.addProfilePicture(selectedFile.value);
 }
 
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/PeopleCard.vue b/frontend/src/components/PeopleCard.vue
index 6e8d07e..bef6584 100644
--- a/frontend/src/components/PeopleCard.vue
+++ b/frontend/src/components/PeopleCard.vue
@@ -1,15 +1,18 @@
 <template slot="user">
     <v-card class="rounded-xl">
         <v-card-item>
-            <v-img cover class=" rounded-lg" src="https://picsum.photos/160">
-            </v-img>
+            <template slot="pfp">
+
+                <v-img cover class=" rounded-lg" :src=pfp>
+                </v-img>
+            </template>
         </v-card-item>
         <v-card-item>
             <v-container>
                 <v-row>
                     <v-col>
                         <v-img cover class="rounded-circle border border-secondary border-lg" width="100" height="100"
-                            src="https://picsum.photos/170">
+                            src="https://picsum.photos/160">
                         </v-img>
                     </v-col>
                     <v-col>
diff --git a/frontend/src/configs/constants.js b/frontend/src/configs/constants.js
index d3f7738..03d62a9 100644
--- a/frontend/src/configs/constants.js
+++ b/frontend/src/configs/constants.js
@@ -38,7 +38,9 @@ const routes_api = {
     'user-add-tag':'/api/users/add_tag/',
     'user-remove-tag': '/api/users/remove_tag/',
     'user-current':'/api/users/current/',
-    'user-tags':'/api/users/{id}/tags/',
+    'user-tags-list':'/api/users/{id}/tags/',
+    'user-pictures-list':'/api/users/{id}/pictures/',
+    'user-add-picture':'/api/users/add_picture/',
 
     'user-detail':'/api/users/{id}/',
 
@@ -63,7 +65,9 @@ const RouteEnum = {
     USER_ADD_TAG: 'user-add-tag',
     USER_REMOVE_TAG: 'user-remove-tag',
     USER_CURRENT: 'user-current',
-    USER_TAGS: 'user-tags',
+    USER_TAGS_LIST: 'user-tags-list',
+    USER_PICTURES_LIST: 'user-pictures-list',
+    USER_ADD_PICTURE: 'user-add-picture',
 
     USER_DETAIL: 'user-detail',
 
diff --git a/frontend/src/plugins/axiosPlugin.js b/frontend/src/plugins/axiosPlugin.js
index 5b47d67..05a8032 100644
--- a/frontend/src/plugins/axiosPlugin.js
+++ b/frontend/src/plugins/axiosPlugin.js
@@ -7,15 +7,12 @@ export default {
         axios.defaults.headers.common['Content-Type'] = 'application/json';
         axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`;
 
-        axios.interceptors.response.use(response => response, error => {
+        axios.interceptors.response.use(response => response, async error => {
             const originalRequest = error.config;
             if (error.response.status === 401 && !originalRequest._retry) {
                 originalRequest._retry = true;
                 const refreshToken = localStorage.getItem('refreshToken');
-                
-                
-                const response = ApiClient.refreshToken(refreshToken);
-
+                const response = await ApiClient.refreshToken(refreshToken);
                 if (response) {
                     return axios(originalRequest);
                 }else{
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
index eda544c..6bae7ab 100644
--- a/frontend/src/views/account/EditView.vue
+++ b/frontend/src/views/account/EditView.vue
@@ -4,9 +4,14 @@
             <v-container>
                 <v-row>
                     <v-col>
-                        <v-img cover class="rounded-circle border border-secondary border-lg" width="100" height="100"
-                            :src="user.pfp">
+                        <v-img cover class="rounded-circle border border-secondary border-lg mr-3" width="100"
+                            height="100" :src="pfp">
+                            <v-img cover v-if="imagePreview" :src="imagePreview" width="100" height="100"></v-img>
                         </v-img>
+                        <v-file-input :rules="pfprules" @change="previewImage" @click:clear="imagePreview = null"
+                            accept="image/png, image/jpeg" label="Avatar" prepend-icon="mdi-camera">
+                        </v-file-input>
+                        <!-- <image-uploader :pfp=user.pfp></image-uploader> -->
                     </v-col>
 
                     <v-col>
@@ -62,10 +67,6 @@
                         </v-chip-group>
                     </v-col>
                 </v-row>
-
-                <v-row>
-                    <image-uploader></image-uploader>
-                </v-row>
             </v-container>
         </v-card>
     </v-form>
@@ -75,12 +76,16 @@
 import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { computed } from 'vue';
-import ImageUploader from '@/components/ImageUploader.vue';
 import { ApiClient } from '@/clients/apiClient.js';
 import { watch } from 'vue';
 import router from '@/router';
+// import ImageUploader from '@/components/ImageUploader.vue';
 
 const user = ref({});
+const pfp = ref({});
+
+const imagePreview = ref(null);
+const selectedFile = ref(null);
 
 const all_tags = [];
 const list_tags = ref([]);
@@ -89,6 +94,13 @@ const showTagList = ref(false);
 const search = ref('');
 const uninitialized = ref(localStorage.getItem('uninitialized'));
 
+
+const pfprules = ref([
+    v => !v,
+    v => !v.length,
+    v => v[0].size < 200000 || 'Avatar size should be less than 2 MB!'
+])
+
 const usernameRules = [
     v => !!v || 'Le nom d\'utilisateur est obligatoire',
     v => v.length >= 3 || 'Le nom d\'utilisateur doit contenir min. 3 caractères'
@@ -105,7 +117,15 @@ const looking_forRules = [
 
 const handleSubmit = async () => {
     user.value.tags = user.value.tags?.map(tag => tag.id);
-    
+
+
+
+    if (selectedFile.value) {
+        const formdata = new FormData();
+        formdata.append('image', selectedFile.value);
+        user.value.pfp = await ApiClient.addPicture(formdata);
+    }
+
     const response = await ApiClient.updateUser(JSON.stringify(user.value), user.value.id);
 
     if (response) {
@@ -113,9 +133,21 @@ const handleSubmit = async () => {
     }
 };
 
+const previewImage = async (event) => {
+    selectedFile.value = event.target.files[0];
+    if (selectedFile) {
+        imagePreview.value = URL.createObjectURL(selectedFile.value);
+    }
+}
+
 const fetchUser = async () => {
     const fetchedUser = await ApiClient.getUser();
     const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
+    const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
+
+    if (fetchedUserPfp) {
+        pfp.value = fetchedUserPfp;
+    }
 
     user.value.id = fetchedUser.id;
     user.value.username = fetchedUser.username;
@@ -161,7 +193,7 @@ const filteredTags = () => {
 }
 
 const openTagList = () => {
-    showTagList.value = true; // Show the tag list
+    showTagList.value = true;
 };
 
 const addTag = async (tag) => {
diff --git a/frontend/src/views/account/ShowView.vue b/frontend/src/views/account/ShowView.vue
index 5a9398e..b5703a0 100644
--- a/frontend/src/views/account/ShowView.vue
+++ b/frontend/src/views/account/ShowView.vue
@@ -4,7 +4,7 @@
             <v-row>
                 <v-col>
                     <v-img cover class="rounded-circle border border-secondary border-lg" width="100" height="100"
-                        :src="user.pfp">
+                        :src=pfp>
                     </v-img>
                 </v-col>
 
@@ -41,10 +41,16 @@ import { onMounted } from 'vue';
 import { ApiClient } from '@/clients/apiClient.js';
 
 const user = ref({});
+const pfp = ref({});
 
 const fetchUser = async () => {
     const fetchedUser = await ApiClient.getUser();
     const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
+    const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
+
+    if (fetchedUserPfp) {
+        pfp.value = fetchedUserPfp;
+    }
 
     user.value.username = fetchedUser.username;
     user.value.bio = fetchedUser.bio;
diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
index 24537e4..b960c3e 100644
--- a/frontend/src/views/cupid/SearchView.vue
+++ b/frontend/src/views/cupid/SearchView.vue
@@ -2,7 +2,7 @@
     <v-container>
         <v-row justify="center">
             <v-col>
-                <PeopleCard :user=user />
+                <PeopleCard :user=user :pfp=pfp />
             </v-col>
         </v-row>
         <v-row>
@@ -24,6 +24,7 @@ import PeopleCard from '@/components/PeopleCard.vue';
 import { ApiClient } from '@/clients/apiClient.js';
 
 const user = ref({});
+const pfp = ref({});
 
 const like = async () => {
     console.log(user.value);
@@ -37,15 +38,23 @@ const dislike = async () => {
     fetchUser();
 };
 
+
 const fetchUser = async () => {
-    const fetchedUser = await ApiClient.getUserRandom();
+    const fetchedUser = await ApiClient.getUser();
+    const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
+    const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
+
+    if (fetchedUserPfp) {
+        pfp.value = fetchedUserPfp;
+    }
 
-    user.value.id = fetchedUser.id;
     user.value.username = fetchedUser.username;
     user.value.bio = fetchedUser.bio;
     user.value.looking_for = fetchedUser.looking_for;
     user.value.pfp = fetchedUser.pfp;
-};
+    user.value.tags = fetchedTags;
+}
+
 
 onMounted(() => {
     fetchUser();

From 1aded014073d3ab25fbeb6f0c4fc067ee8b3df2c Mon Sep 17 00:00:00 2001
From: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date: Thu, 25 Apr 2024 15:35:47 +0200
Subject: [PATCH 6/7] add picture to other views

---
 backend/kodecupidapp/views/picture.py   | 22 +++++-------
 frontend/src/clients/apiClient.js       | 11 +++---
 frontend/src/components/PeopleCard.vue  | 46 +++++++++++++++----------
 frontend/src/plugins/axiosPlugin.js     |  3 +-
 frontend/src/views/cupid/MatchView.vue  | 16 +++++++++
 frontend/src/views/cupid/SearchView.vue | 43 +++++++++++++++++++----
 6 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/backend/kodecupidapp/views/picture.py b/backend/kodecupidapp/views/picture.py
index d29396a..a508a3a 100644
--- a/backend/kodecupidapp/views/picture.py
+++ b/backend/kodecupidapp/views/picture.py
@@ -1,5 +1,5 @@
 from rest_framework.viewsets import GenericViewSet
-from rest_framework.mixins import CreateModelMixin, RetrieveModelMixin, DestroyModelMixin
+from rest_framework.mixins import CreateModelMixin, RetrieveModelMixin, ListModelMixin, DestroyModelMixin
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.permissions import IsAuthenticated
@@ -11,7 +11,7 @@
 import os
 
 
-class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, DestroyModelMixin):
+class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, ListModelMixin, DestroyModelMixin):
     queryset = Picture.objects.all()
     serializer_class = PictureSerializer
     permission_classes = [IsAuthenticated]
@@ -28,9 +28,14 @@ def create(self, request):
             return Response({"message": "Picture added successfully.", "id": new_id}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def retrieve(self, request, *args, **kwargs):
+
+    def list(self, request):
+        queryset = self.filter_queryset(self.get_queryset())
+        serializer = self.get_serializer(queryset, many=True)
+        return Response(serializer.data)
+
+    def retrieve(self, request):
         instance = self.get_object()
-        # serializer = self.get_serializer(instance)
         
         # Get the image path
         image_path = instance.image.path
@@ -43,15 +48,6 @@ def retrieve(self, request, *args, **kwargs):
         response['Content-Disposition'] = 'attachment; filename="image.jpg"'
         return response
 
-    # def retrieve(self, request, pk=None):
-    #     instance = self.get_object()
-    #     serializer = self.get_serializer(instance)
-
-    #     # content_type = "image/png"  # Adjust according to the actual image type
-
-    # # Return the picture data in an HTTP response
-    # # return HttpResponse(picture_data, content_type=content_type)
-    #     return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request):
         instance = self.get_object()
diff --git a/frontend/src/clients/apiClient.js b/frontend/src/clients/apiClient.js
index c7aaa47..be07a34 100644
--- a/frontend/src/clients/apiClient.js
+++ b/frontend/src/clients/apiClient.js
@@ -58,7 +58,7 @@ export class ApiClient {
     } catch (error) {
       console.error(error.response?.data);
       setError(error.response?.data, 'error');
-      return error;
+      return false;
     }
   }
 
@@ -166,13 +166,13 @@ export class ApiClient {
 
   // token
 
-  static async refreshToken(refreshToken) {
+  static async refreshToken() {
+    const refreshToken = localStorage.getItem('refreshToken');
+    localStorage.removeItem('accessToken');
     try {
       const response = await axios.post(
           handleRoute(RouteEnum.TOKEN_REFRESH), {'refresh': refreshToken},
           {withCredentials: true});
-
-      console.log(response);
       if (response.status === 200) {
         localStorage.setItem('accessToken', response.data.access);
         axios.defaults.headers.common['Authorization'] =
@@ -189,7 +189,8 @@ export class ApiClient {
   // images
 
   static async getPicture(id) {
-    const arrayBufferToBase64 = buffer => btoa(String.fromCharCode(...new Uint8Array(buffer)));
+    const arrayBufferToBase64 = buffer =>
+        btoa(String.fromCharCode(...new Uint8Array(buffer)));
 
     try {
       const response = await axios.get(
diff --git a/frontend/src/components/PeopleCard.vue b/frontend/src/components/PeopleCard.vue
index bef6584..999c371 100644
--- a/frontend/src/components/PeopleCard.vue
+++ b/frontend/src/components/PeopleCard.vue
@@ -1,38 +1,48 @@
 <template slot="user">
     <v-card class="rounded-xl">
-        <v-card-item>
-            <template slot="pfp">
-
-                <v-img cover class=" rounded-lg" :src=pfp>
-                </v-img>
-            </template>
-        </v-card-item>
         <v-card-item>
             <v-container>
                 <v-row>
                     <v-col>
                         <v-img cover class="rounded-circle border border-secondary border-lg" width="100" height="100"
-                            src="https://picsum.photos/160">
+                            :src=user.pfp_src>
                         </v-img>
                     </v-col>
                     <v-col>
                         <v-card-title>{{ user.username }}</v-card-title>
                         <v-card-text>{{ user.bio }}</v-card-text>
                     </v-col>
+                    <v-col>
+                        <v-label>Tags:</v-label>
+                        <v-chip-group column>
+                            <v-chip v-if="user.tags && user.tags.length" v-for="tag in user.tags">{{ tag.name
+                                }}</v-chip>
+                            <v-chip v-else>aucun</v-chip>
+                        </v-chip-group>
+                    </v-col>
                 </v-row>
             </v-container>
         </v-card-item>
+        <v-card-item>
+            <v-img cover class=" rounded-lg" src="https://picsum.photos/160">
+            </v-img>
+        </v-card-item>
     </v-card>
 </template>
 
-<script>
-export default {
-    props: {
-        user: {
-            type: Object,
-            required: true
-        }
-    },
-    name: 'PeopleCard',
-}
+<script setup>
+
+
+
+const { user, pfp } = defineProps({
+    user: {
+        type: Object,
+        required: true
+    }
+});
+
+// Component name
+const name = 'PeopleCard';
+
+
 </script>
\ No newline at end of file
diff --git a/frontend/src/plugins/axiosPlugin.js b/frontend/src/plugins/axiosPlugin.js
index 05a8032..2692c4a 100644
--- a/frontend/src/plugins/axiosPlugin.js
+++ b/frontend/src/plugins/axiosPlugin.js
@@ -11,8 +11,7 @@ export default {
             const originalRequest = error.config;
             if (error.response.status === 401 && !originalRequest._retry) {
                 originalRequest._retry = true;
-                const refreshToken = localStorage.getItem('refreshToken');
-                const response = await ApiClient.refreshToken(refreshToken);
+                const response = await ApiClient.refreshToken();
                 if (response) {
                     return axios(originalRequest);
                 }else{
diff --git a/frontend/src/views/cupid/MatchView.vue b/frontend/src/views/cupid/MatchView.vue
index 7943c62..7a9a3c9 100644
--- a/frontend/src/views/cupid/MatchView.vue
+++ b/frontend/src/views/cupid/MatchView.vue
@@ -27,6 +27,22 @@ const match = ref([]);
 
 const fetchUserMatch = async () => {
     match.value = await ApiClient.getUserMatches();
+
+    match.value.forEach(async (user) => {
+        console.log(user);
+        if (user.pfp) {
+            const fetchedUserPfp = await ApiClient.getPicture(user.pfp);
+            if (fetchedUserPfp) {
+                user.pfp_src = fetchedUserPfp;
+            }
+        }
+
+        const fetchedTags = ApiClient.getUserTags(user.id);
+        if (fetchedTags) {
+            user.tags = fetchedTags;
+        }
+
+    });
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/cupid/SearchView.vue b/frontend/src/views/cupid/SearchView.vue
index b960c3e..71b1b7a 100644
--- a/frontend/src/views/cupid/SearchView.vue
+++ b/frontend/src/views/cupid/SearchView.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-container>
+    <v-container v-if="userx">
         <v-row justify="center">
             <v-col>
-                <PeopleCard :user=user :pfp=pfp />
+                <PeopleCard :user=user />
             </v-col>
         </v-row>
         <v-row>
@@ -14,6 +14,27 @@
             </v-col>
         </v-row>
     </v-container>
+    <v-container v-else>
+        <v-row>
+            <v-col>
+                <p>Hé, tu le croirais ça ? Plus un seul profil à liker sur KodeCupid 😱 !
+                    C'est comme si t'avais vidé tout le stock de jus de Mynthos et qu'il ne reste plus qu'un verre vide.
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col>
+                <p>
+                    T'as tout cliqué, tout swipé, et là, c'est le désert digital.
+                    Mais bon, au moins tu continues de faire connaissance avec ton clavier, c'est pas si mal, non ?</p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col>
+                <v-img cover class="rounded-lg" src="/jdg-joueur-du-grenier.gif"></v-img>
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <script setup>
@@ -24,7 +45,7 @@ import PeopleCard from '@/components/PeopleCard.vue';
 import { ApiClient } from '@/clients/apiClient.js';
 
 const user = ref({});
-const pfp = ref({});
+const userx = ref(false);
 
 const like = async () => {
     console.log(user.value);
@@ -40,14 +61,22 @@ const dislike = async () => {
 
 
 const fetchUser = async () => {
-    const fetchedUser = await ApiClient.getUser();
+    const fetchedUser = await ApiClient.getUserRandom();
+    userx.value = fetchedUser;
+    if (!fetchedUser) {
+        return;
+    }
+
     const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
-    const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
 
-    if (fetchedUserPfp) {
-        pfp.value = fetchedUserPfp;
+    if (fetchedUser.pfp) {
+        const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
+        if (fetchedUserPfp) {
+            user.value.pfp_src = fetchedUserPfp;
+        }
     }
 
+    user.value.id = fetchedUser.id;
     user.value.username = fetchedUser.username;
     user.value.bio = fetchedUser.bio;
     user.value.looking_for = fetchedUser.looking_for;

From c6043c03dc855a97f44ee41732a36852b801782e Mon Sep 17 00:00:00 2001
From: Lucas Gosteli <lucas.gosteli@he-arc.ch>
Date: Fri, 26 Apr 2024 09:25:21 +0200
Subject: [PATCH 7/7] more fixes

---
 backend/kodecupidapp/serializers/picture.py |  2 +-
 backend/kodecupidapp/views/picture.py       | 10 ++--------
 docker-images/django/startup.sh             |  3 ++-
 frontend/src/clients/apiClient.js           |  2 +-
 frontend/src/views/account/EditView.vue     | 15 +++++----------
 5 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/backend/kodecupidapp/serializers/picture.py b/backend/kodecupidapp/serializers/picture.py
index 9f4acfd..5d58bfe 100644
--- a/backend/kodecupidapp/serializers/picture.py
+++ b/backend/kodecupidapp/serializers/picture.py
@@ -6,4 +6,4 @@ class PictureSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Picture
-        fields = ['id', 'image']
+        fields = ['id', 'image', 'user']
diff --git a/backend/kodecupidapp/views/picture.py b/backend/kodecupidapp/views/picture.py
index a508a3a..3f60d97 100644
--- a/backend/kodecupidapp/views/picture.py
+++ b/backend/kodecupidapp/views/picture.py
@@ -11,7 +11,7 @@
 import os
 
 
-class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, ListModelMixin, DestroyModelMixin):
+class PictureView(GenericViewSet, CreateModelMixin, RetrieveModelMixin, DestroyModelMixin):
     queryset = Picture.objects.all()
     serializer_class = PictureSerializer
     permission_classes = [IsAuthenticated]
@@ -28,13 +28,7 @@ def create(self, request):
             return Response({"message": "Picture added successfully.", "id": new_id}, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-
-    def list(self, request):
-        queryset = self.filter_queryset(self.get_queryset())
-        serializer = self.get_serializer(queryset, many=True)
-        return Response(serializer.data)
-
-    def retrieve(self, request):
+    def retrieve(self, request, pk=None):
         instance = self.get_object()
         
         # Get the image path
diff --git a/docker-images/django/startup.sh b/docker-images/django/startup.sh
index a8a0c07..0af82a2 100755
--- a/docker-images/django/startup.sh
+++ b/docker-images/django/startup.sh
@@ -7,8 +7,9 @@ pipenv install --deploy --python "/usr/bin/python3"
 while [ true ];
 do
     pipenv run python3 manage.py spectacular --file schema.yml
-    pipenv run python3 manage.py collectstatic --noinput
     pipenv run python3 manage.py migrate
+    pipenv run python3 manage.py import_tags
+    pipenv run python3 manage.py collectstatic --noinput
     pipenv run python3 manage.py runserver 0.0.0.0:$KODECUPID_BACKEND_PORT
 done
 
diff --git a/frontend/src/clients/apiClient.js b/frontend/src/clients/apiClient.js
index be07a34..51813d9 100644
--- a/frontend/src/clients/apiClient.js
+++ b/frontend/src/clients/apiClient.js
@@ -218,7 +218,7 @@ export class ApiClient {
     } catch (error) {
       console.error(error.response?.data);
       setError(error.response?.data, 'error');
-      return error;
+      return false;
     }
   }
   static async addProfilePicture(image) {
diff --git a/frontend/src/views/account/EditView.vue b/frontend/src/views/account/EditView.vue
index 6bae7ab..92c8679 100644
--- a/frontend/src/views/account/EditView.vue
+++ b/frontend/src/views/account/EditView.vue
@@ -11,7 +11,6 @@
                         <v-file-input :rules="pfprules" @change="previewImage" @click:clear="imagePreview = null"
                             accept="image/png, image/jpeg" label="Avatar" prepend-icon="mdi-camera">
                         </v-file-input>
-                        <!-- <image-uploader :pfp=user.pfp></image-uploader> -->
                     </v-col>
 
                     <v-col>
@@ -117,9 +116,6 @@ const looking_forRules = [
 
 const handleSubmit = async () => {
     user.value.tags = user.value.tags?.map(tag => tag.id);
-
-
-
     if (selectedFile.value) {
         const formdata = new FormData();
         formdata.append('image', selectedFile.value);
@@ -143,10 +139,11 @@ const previewImage = async (event) => {
 const fetchUser = async () => {
     const fetchedUser = await ApiClient.getUser();
     const fetchedTags = await ApiClient.getUserTags(fetchedUser.id);
-    const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
-
-    if (fetchedUserPfp) {
-        pfp.value = fetchedUserPfp;
+    if (fetchedUser.pfp) {
+        const fetchedUserPfp = await ApiClient.getPicture(fetchedUser.pfp);
+        if (fetchedUserPfp) {
+            pfp.value = fetchedUserPfp;
+        }
     }
 
     user.value.id = fetchedUser.id;
@@ -171,8 +168,6 @@ computed(() => {
     filteredTags();
 });
 
-
-
 watch(search, () => {
     // Reset scroll position when search changes
     const list = document.querySelector('.tag-list .v-list');