Revert "Revert "Theme changes (#716)" (#772)" (#800)

This reverts commit e8cf60b.

Author: tuxology

zubhub_backend/zubhub/APIS/urls.py

@@ -1,7 +1,7 @@
 from django.urls import path, include
 from zubhub.views import (UploadFileAPIView, DeleteFileAPIView,
                           HeroAPIView, HelpAPIView, ChallengeAPIView, PrivacyAPIView, FAQAPIView, AmbassadorsAPIView,
-                          SigGenAPIView, UploadFileToLocalAPIView)
+                          SigGenAPIView, UploadFileToLocalAPIView, ThemeAPIView)
 
 
 urlpatterns = [
@@ -23,5 +23,6 @@
     path('ambassadors/', AmbassadorsAPIView.as_view(), name="ambassadors"),
     path('challenge/', ChallengeAPIView.as_view(), name="challenge"),
     path('signature/', SigGenAPIView,
-         name="signature_generator_api")
+         name="signature_generator_api"),
+     path('theme/', ThemeAPIView.as_view(), name="theme"),
 ]

zubhub_backend/zubhub/zubhub/admin.py

@@ -1,5 +1,6 @@
+from enum import Enum
 from django.contrib import admin
-from .models import AdminSettings, Hero, Privacy, FAQ, Help, Challenge, Ambassadors
+from .models import AdminSettings, Hero, Privacy, FAQ, Help, Challenge, Ambassadors, Theme
 
 ## these models are imported to be unregsitered
 from django_summernote.models import Attachment
@@ -44,6 +45,24 @@ class ChallengeAdmin(SummernoteModelAdmin):
 
     class Media:
         js = ('https://code.jquery.com/jquery-3.1.1.js', 'js/main.js',)
+        
+
+class StatusEnum(Enum):
+    INACTIVE = 0
+    ACTIVE = 1
+
+class ThemeAdmin(admin.ModelAdmin):
+    list_display = ['Theme_Name', 'status']
+    actions = ['make_selected_active']
+
+    def make_selected_active(self, request, queryset):
+        queryset.update(status=StatusEnum.INACTIVE.value)
+        selected_themes = queryset.first()
+        selected_themes.status = StatusEnum.ACTIVE.value
+        selected_themes.save()
+
+    make_selected_active.short_description = "Select and make active"
+
 
 class FAQAdmin(SummernoteModelAdmin):
     summernote_fields = ('answer',)
@@ -68,6 +87,7 @@ class Media:
 admin.site.register(Challenge, ChallengeAdmin)
 admin.site.register(FAQ, FAQAdmin)
 admin.site.register(Ambassadors, AmbassadorsAdmin)
+admin.site.register(Theme, ThemeAdmin)
 
 ## Unregister some default and third-party models
 admin.site.unregister(Attachment)

zubhub_backend/zubhub/zubhub/migrations/0010_theme.py

@@ -0,0 +1,37 @@
+# Generated by Django 3.2 on 2023-10-02 22:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('zubhub', '0009_challenge'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Theme',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('Theme_Name', models.CharField(max_length=20)),
+                ('Primary_Color1', models.CharField(default='#DC3545', help_text='Enter hexcode to replace color red', max_length=16)),
+                ('Primary_Color2', models.CharField(default='#FDCB00', help_text='Enter hexcode to replace color yellow', max_length=16)),
+                ('Primary_Color3', models.CharField(default='#00B8C4', help_text='Enter hexcode to replace color cyan', max_length=16)),
+                ('Secondary_Color1', models.CharField(default='#FFCDD2', help_text='Enter hexcode to replace color light red', max_length=16)),
+                ('Secondary_Color2', models.CharField(default='#A94442', help_text='Enter hexcode to replace color dark red', max_length=16)),
+                ('Secondary_Color3', models.CharField(default='#FFF7D4', help_text='Enter hexcode to replace color light yellow', max_length=16)),
+                ('Secondary_Color4', models.CharField(default='#9F861E', help_text='Enter hexcode to replace color dark yellow', max_length=16)),
+                ('Secondary_Color5', models.CharField(default='#E0F6F4', help_text='Enter hexcode to replace color light cyan', max_length=16)),
+                ('Secondary_Color6', models.CharField(default='#03848C', help_text='Enter hexcode to replace color dark cyan', max_length=16)),
+                ('Text_Color1', models.CharField(default='#212121', help_text='Enter hexcode to replace color black', max_length=16)),
+                ('Text_Color2', models.CharField(default='#757474', help_text='Enter hexcode to replace color dark gray', max_length=16)),
+                ('Text_Color3', models.CharField(default='#E4E4E4', help_text='Enter hexcode to replace color light gray', max_length=16)),
+                ('status', models.PositiveSmallIntegerField(choices=[(0, 'Inactive'), (1, 'Active')], default=0)),
+            ],
+            options={
+                'verbose_name': 'Theme',
+                'verbose_name_plural': 'Themes',
+            },
+        ),
+    ]

zubhub_backend/zubhub/zubhub/models.py

@@ -7,7 +7,7 @@
 from django.utils.text import slugify
 from .utils import MediaStorage, get_upload_path, clean_summernote_html
 from projects.models import Project 
-
+from django.utils.html import strip_tags
 
 class AdminSettings(models.Model):
     PUBLIC = 1
@@ -151,3 +151,31 @@ def __str__(self):
     def save(self, *args, **kwargs):
         self.edited_on = timezone.now()
         super().save(*args, **kwargs)
+
+class Theme(models.Model):
+    Theme_Name = models.CharField(max_length=20)
+    Primary_Color1 = models.CharField(max_length=16, help_text="Enter hexcode to replace color red", default="#DC3545")
+    Primary_Color2 = models.CharField(max_length=16, help_text="Enter hexcode to replace color yellow", default="#FDCB00")
+    Primary_Color3 = models.CharField(max_length=16, help_text="Enter hexcode to replace color cyan", default="#00B8C4")
+    Secondary_Color1 = models.CharField(max_length=16, help_text="Enter hexcode to replace color light red", default="#FFCDD2")
+    Secondary_Color2 = models.CharField(max_length=16, help_text="Enter hexcode to replace color dark red", default="#A94442")
+    Secondary_Color3 = models.CharField(max_length=16, help_text="Enter hexcode to replace color light yellow", default="#FFF7D4")
+    Secondary_Color4 = models.CharField(max_length=16, help_text="Enter hexcode to replace color dark yellow", default="#9F861E")
+    Secondary_Color5 = models.CharField(max_length=16, help_text="Enter hexcode to replace color light cyan", default="#E0F6F4")
+    Secondary_Color6 = models.CharField(max_length=16, help_text="Enter hexcode to replace color dark cyan", default="#03848C")
+    Text_Color1 = models.CharField(max_length=16, help_text="Enter hexcode to replace color black", default="#212121")
+    Text_Color2 = models.CharField(max_length=16, help_text="Enter hexcode to replace color dark gray", default="#757474")
+    Text_Color3 = models.CharField(max_length=16, help_text="Enter hexcode to replace color light gray", default="#E4E4E4")
+    status = models.PositiveSmallIntegerField(choices=((0, 'Inactive'), (1, 'Active')), default=0)
+
+    class Meta:
+        verbose_name = "Theme"
+        verbose_name_plural = "Themes"
+
+    def save(self, *args, **kwargs):
+        if self.status == 1:
+            Theme.objects.exclude(pk=self.pk).update(status=0)
+        super().save(*args, **kwargs)
+
+    def __str__(self):
+        return self.Theme_Name

zubhub_backend/zubhub/zubhub/serializers.py

@@ -1,5 +1,5 @@
 from rest_framework import serializers
-from .models import Hero, FAQ, Help, Challenge, Privacy, Ambassadors
+from .models import Hero, FAQ, Help, Challenge, Privacy, Ambassadors, Theme
 from projects.pagination import ProjectNumberPagination
 from projects.utils import get_published_projects_for_user
 from projects.serializers import ProjectSerializer
@@ -98,4 +98,10 @@ def paginated_projects(self, obj):
         else:
             next_page = None
 
-        return {"results": serializer.data, "prev": prev_page, "next": next_page, "count": count}
+        return {"results": serializer.data, "prev": prev_page, "next": next_page, "count": count}
+    
+class ThemeSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Theme
+        fields = '__all__'

zubhub_backend/zubhub/zubhub/urls.py

@@ -46,7 +46,7 @@
     from zubhub.views import (UploadFileAPIView, DeleteFileAPIView,
                             HeroAPIView, HelpAPIView, ChallengeAPIView, PrivacyAPIView, 
                             FAQAPIView, AmbassadorsAPIView, SigGenAPIView, UploadFileToLocalAPIView,
-                            MarkdownToHtmlAPIView, MediaSchemaAPIView, WebSchemaAPIView)
+                            MarkdownToHtmlAPIView, MediaSchemaAPIView, WebSchemaAPIView, ThemeAPIView)
 
     schema_url_patterns = [
             path('api/rest-auth/login/', LoginView.as_view()),
@@ -67,7 +67,8 @@
             path('api/privacy/', PrivacyAPIView.as_view()),
             path('api/faqs/', FAQAPIView.as_view()),
             path('api/ambassadors/', AmbassadorsAPIView.as_view()),
-            path('api/signature/', SigGenAPIView)
+            path('api/signature/', SigGenAPIView),
+            path('api/theme/', ThemeAPIView.as_view())
             ]
 
     urlpatterns = urlpatterns + [

zubhub_backend/zubhub/zubhub/views.py

@@ -1,7 +1,9 @@
 from math import floor
 import uuid
-from .serializers import HeroSerializer, FAQListSerializer, HelpSerializer, ChallengeSerializer, PrivacySerializer, AmbassadorsSerializer
-from .models import Hero, FAQ, Privacy, Help, Challenge, Ambassadors, AdminSettings
+from django.shortcuts import get_object_or_404
+from django.utils.html import format_html
+from .serializers import HeroSerializer, FAQListSerializer, HelpSerializer, ChallengeSerializer, PrivacySerializer, AmbassadorsSerializer, ThemeSerializer
+from .models import Hero, FAQ, Privacy, Help, Challenge, Ambassadors, AdminSettings, Theme
 from .utils import delete_file_from_media_server, upload_file_to_media_server, get_sig
 from projects.permissions import PostUserRateThrottle, GetUserRateThrottle, SustainedRateThrottle
 from rest_framework.permissions import IsAuthenticated
@@ -341,4 +343,17 @@ def MediaSchemaAPIView(request):
 
     from .utils import get_media_schema
     res = get_media_schema()
-    return Response(res.json())
+    return Response(res.json())
+
+class ThemeAPIView(RetrieveAPIView):
+    """
+    Get "Theme Zubhub".
+    """
+
+    queryset = Theme.objects.all()
+    serializer_class = ThemeSerializer
+    permission_classes = [AllowAny]
+    throttle_classes = [GetUserRateThrottle, SustainedRateThrottle]
+    
+    def get_object(self):
+        return get_object_or_404(Theme, status=1)

zubhub_frontend/zubhub/src/App.js

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext }  from 'react';
 import { withTranslation } from 'react-i18next';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import CreateActivity from './views/create_activity/CreateActivity';
-
+import CreateActivity from './views/create_activity/create_activity';
+import { useEffect, useState } from "react";
 import LoadingPage from './views/loading/LoadingPage';
 import PageWrapper from './views/PageWrapper';
+import ZubhubAPI from '../src/api/api';
+import { updateTheme } from './theme';
 import ScrollToTop from './ScrollToTop';
 
 const SearchResults = React.lazy(() =>
@@ -97,6 +99,7 @@ const About = React.lazy(() => import('./views/about/About'));
 const Challenge = React.lazy(() => import('./views/challenge/Challenge'));
 const FAQs = React.lazy(() => import('./views/faqs/FAQs'));
 const NotFound = React.lazy(() => import('./views/not_found/NotFound'));
+const API = new ZubhubAPI();
 const Settings = React.lazy(() => import('./views/settings/Settings'));
 
 
@@ -109,8 +112,28 @@ const LazyImport = props => {
   );
 };
 
+const ThemeContext = React.createContext();
+
 function App(props) {
+
+  const theme = useContext(ThemeContext);
+
+  useEffect(() => {
+    handleThemeChange();
+  }, []);
+
+  const handleThemeChange = async () => {
+    try {
+      const data = await API.theme();
+
+      updateTheme(data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
+    <ThemeContext.Provider value={theme}>
     <Router>
       <ScrollToTop />
       <Switch>
@@ -699,6 +722,7 @@ function App(props) {
         />
       </Switch>
     </Router>
+    </ThemeContext.Provider>
   );
 }
 

zubhub_frontend/zubhub/src/api/api.js

@@ -103,6 +103,20 @@ class API {
     return this.request({ url, method, body }).then(res => res.json());
   };
 
+  /**
+   * @method theme - get the latest theme from the backend
+   * @author Hemant Kumar Singh <[email protected]>
+   *
+   * @todo - describe method's signature
+   */
+  theme = () => {
+    const url = 'theme/';
+    const method = 'GET';
+    // const body = JSON.stringify({ username, password });
+
+    return this.request({ url, method }).then(res => res.json());
+  };
+
   /**
    * @method logout - logout a user with the user's token
    * @author Raymond Ndibe <[email protected]>