Integrate Unsplash with Profile Pic

app/static/css/style.css

@@ -44,6 +44,10 @@ h6 {
   color: #4f4f4f;
 }
 
+.fa, .far, .fas {
+  font-family: "Font Awesome 5 Free" !important;
+}
+
 .fab {
   font-family: "Font Awesome 5 Brands" !important;
 }
@@ -841,3 +845,59 @@ a > .fa-reddit:hover {
     margin-right: 50px !important;
   }
 }
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}

app/static/js/base.js

@@ -167,8 +167,19 @@ function searchUnsplash() {
       var img = document.createElement('img');
       img.src = urlArray[i]; // img[i] refers to the current URL.
       list_element.appendChild(img);
-      list_element.addEventListener("click", function(event) { //Detect when an image is being clicked
-        console.log(event.target.src)
+      list_element.addEventListener("click", function(event) { //Detect when an image is being clicked, and make AJAX request
+        container.innerHTML = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>'
+        $.ajax({
+          type: "POST",
+          url: `/addUnsplashPicture/`,
+          data: {
+            'url': event.target.src,
+            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken').val(),
+          },
+          success: function() {
+          location.reload()
+          }
+        })
       })
       container.appendChild(list_element);
     }

app/templates/explore.html

@@ -154,7 +154,7 @@ <h1 class="challenge-card-title" style="min-height: 40px; margin-bottom: 5px; fo
               <hr noshade size="1" style="border-color: #F2F2F2;">
               <div class="card-description" style="padding: 0;">
                 <div class="challenge-card-creators row">
-                  <a href="${window.location.href}profile/${challenge.first_creator}">
+                  <a href="/profile/${challenge.first_creator}">
                     <img class="profile-icon challenge-card-profile-icon" src="${challenge.first_creator_profile}"/>
                     <div class="u-text-left">
                       <p class="challenge-card-profile-text" style="font-size: 14px; margin-bottom: 0">
@@ -174,7 +174,7 @@ <h1 class="challenge-card-title" style="min-height: 40px; margin-bottom: 5px; fo
     } else {
       for(var i = 0; i<challenges.length;i++) {
         let challenge = challenges[i];
-        challenge.image_url = challenge.image_url == 'false' ? `${window.location.href}static/img/fibonacci.png` : challenge.image_url;
+        challenge.image_url = challenge.image_url == 'false' ? `/static/img/fibonacci.png` : challenge.image_url;
         html_data += challengeHTML(challenge);
       };
     }
@@ -184,7 +184,7 @@ <h1 class="challenge-card-title" style="min-height: 40px; margin-bottom: 5px; fo
     const filterId = $(this).val();
     $.ajax({
       type: "POST",
-      url: `${window.location.href}get_challenges_ajax/`,
+      url: `/get_challenges_ajax/`,
       data: {
         'filter_id': filterId,
         'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken').val(),

app/urls.py

@@ -34,4 +34,5 @@
     path("get_challenges_ajax/", views.get_challenges_ajax, name="get_challenges_ajax"),
     path("follow_user/<int:pk>/", views.follow_user, name="follow_user"),
     path("unfollow_user/<int:pk>/", views.unfollow_user, name="unfollow_user"),
+    path("addUnsplashPicture/", views.addUnsplashPicture, name="addUnsplashPicture")
 ]

app/views.py

@@ -1,6 +1,7 @@
 from app.forms import ProfileUpdateForm, UserUpdateForm, SocialLinkFormSet, PasswordUpdateForm, OnboardingForm
 from app.models import Challenge, Profile, Project, SocialLinkAttachement, Tag, User, UserFollowing
 
+from django.core import files
 from django.core.exceptions import PermissionDenied
 from django.contrib.auth import login, update_session_auth_hash
 from django.contrib.auth.forms import UserCreationForm, PasswordChangeForm
@@ -19,6 +20,8 @@
 from django.views.generic.edit import CreateView, FormMixin, FormView, UpdateView
 
 from django.http import JsonResponse
+import requests
+import tempfile
 
 
 class AboutView(TemplateView):
@@ -411,6 +414,7 @@ def get_challenges_ajax(request):
             return JsonResponse(data)
         return JsonResponse(final_list, safe=False)
 
+
 def add_comment(request):
     if request.method == "POST":
         comment = request.POST['comment']
@@ -420,6 +424,8 @@ def add_comment(request):
         initiative.comments.create(text=comment, profile=profile)
 
     return JsonResponse("Success", safe=False)
+
+
 def follow_user(request, pk):
     following_user_id = pk
     data = {}
@@ -451,3 +457,29 @@ def unfollow_user(request, pk):
         data['error_message'] = 'error'
         return redirect('index')
     return redirect('user', following_user.username)
+
+
+def addUnsplashPicture(request):
+    if request.method == "POST":
+        url = request.POST["url"]
+        url += ".jpg"
+        response = requests.get(url, stream=True)
+        # Get the filename from the url, used for saving later
+        file_name = url.split('/')[-1]
+
+        # Create a temporary file
+        lf = tempfile.NamedTemporaryFile()
+
+        # Read the streamed image in sections
+        for block in response.iter_content(1024 * 8):
+
+            # If no more file then stop
+            if not block:
+                break
+
+            # Write image block to temporary file
+            lf.write(block)
+
+        request.user.profile.image.save(file_name, files.File(lf))
+
+    return JsonResponse("Success", safe=False)