Update: Convert AboutUs to React (Adapt-9075) (#7)

HT2-Labs · May 31, 2024 · a4e1fee · a4e1fee
1 parent 69fa998
commit a4e1fee
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 362 deletions.
diff --git a/js/adapt-aboutUs.js b/js/adapt-aboutUs.js
@@ -5,47 +5,50 @@
  * Code was based on adapt-contrib-glossary and adapt-contrib-resources
  */
 
-define([
-    'core/js/adapt',
-    './adapt-aboutUsView'
-], function(Adapt, AboutUsView) {
+import Adapt from 'core/js/adapt'
+import AboutUsView from './adapt-aboutUsView'
 
-    function setupAboutUs(aboutUsModel, aboutUsItems, socialLinks) {
+class AboutUs extends Backbone.Controller {
+  initialize() {
+    this.listenTo(Adapt, 'app:dataReady', this.initAboutUs);
+  }
+
+  setupAboutUs(model) {
+    const aboutUsModel = new Backbone.Model(model);
+    const itemsCollection = new Backbone.Collection(model.aboutUsItems);
+    const socialLinksCollection = new Backbone.Collection(model.socialLinks);
 
-        var aboutUsModel = new Backbone.Model(aboutUsModel);
-        var itemsCollection = new Backbone.Collection(aboutUsItems);
-        var socialLinksCollection = new Backbone.Collection(socialLinks);
+    const options = {
+      model: aboutUsModel,
+      collection: itemsCollection,
+      sociallinks: socialLinksCollection
+    };
 
-        var options = {
-            model: aboutUsModel,
-            collection: itemsCollection,
-            sociallinks: socialLinksCollection
-        };
+    Adapt.on('aboutUs:showAboutUs', function() {
+      Adapt.drawer.triggerCustomView(new AboutUsView(options).$el);
+    });
+  }
 
-        Adapt.on('aboutUs:showAboutUs', function() {
-            Adapt.drawer.triggerCustomView(new AboutUsView(options).$el);
-        });
-    }
+  initAboutUs() {
+    const courseAboutUs = Adapt.course.get('_aboutUs');
 
-    function initAboutUs() {
-        var courseAboutUs = Adapt.course.get('_aboutUs');
+    if (!courseAboutUs?._isEnabled) return;
 
-        if (!courseAboutUs || !courseAboutUs._isEnabled) {
-            return;
-        }
+    const { title, description, _drawerOrder = 0 } = courseAboutUs
 
-        var drawerObject = {
-            title: courseAboutUs.title,
-            description: courseAboutUs.description,
-            className: 'is-aboutus',
-            drawerOrder: courseAboutUs._drawerOrder || 0
-        };
+    const drawerObject = {
+      title,
+      description,
+      className: 'is-aboutus',
+      drawerOrder: _drawerOrder
+    };
 
-        Adapt.drawer.addItem(drawerObject, 'aboutUs:showAboutUs');
+    Adapt.drawer.addItem(drawerObject, 'aboutUs:showAboutUs');
 
-        setupAboutUs(courseAboutUs, courseAboutUs._aboutUsItems, courseAboutUs._socialLinks);
-    }
+    this.setupAboutUs(courseAboutUs);
+  }
+};
 
-    Adapt.on('app:dataReady', initAboutUs);
+const aboutUs = new AboutUs();
 
-});
+export default aboutUs
diff --git a/js/adapt-aboutUsItemView.js b/js/adapt-aboutUsItemView.js
diff --git a/js/adapt-aboutUsSocialLinksView.js b/js/adapt-aboutUsSocialLinksView.js
diff --git a/js/adapt-aboutUsView.js b/js/adapt-aboutUsView.js
@@ -5,47 +5,30 @@
  * Code was based on adapt-contrib-glossary and adapt-contrib-resources
  */
 
-define([
-    'core/js/adapt',
-    './adapt-aboutUsItemView',
-    './adapt-aboutUsSocialLinksView'
-], function(Adapt, AboutUsItemView, SocialLinksView) {
-
-    var AboutUsView = Backbone.View.extend({
-
-        className: "aboutus",
-
-        initialize: function() {
-            this.listenTo(Adapt, 'remove drawer:closed', this.remove);
-            this.render();
-        },
-
-        render: function() {
-            var template = Handlebars.templates["aboutUs"];
-            this.$el.html(template(this.model.toJSON()));
-            this.renderAboutUsItems();
-            _.defer(_.bind(function() {
-                this.postRender();
-            }, this));
-            return this;
-        },
-
-        renderAboutUsItems: function() {
-            var $aboutUsItemContainer = this.$('.aboutus__items-container').empty();
-            _.each(this.collection.models, function(item, index) {
-                var itemView = new AboutUsItemView({model: item});
-                itemView.$el.appendTo($aboutUsItemContainer);
-            }, this);
-            new SocialLinksView({model: Adapt.course.get('_aboutUs')._socialLinks})
-                .$el.appendTo($aboutUsItemContainer);
-        },
-
-        postRender: function() {
-            this.listenTo(Adapt, 'drawer:openedItemView', this.remove);
-            this.listenTo(Adapt, 'drawer:triggerCustomView', this.remove);
-        }
-
+import Adapt from 'core/js/adapt';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { templates } from 'core/js/reactHelpers';
+
+class AboutUsView extends Backbone.View{
+  className() {
+    return 'aboutus'
+  }
+
+  initialize() {
+    this.listenTo(Adapt, 'remove drawer:closed', this.remove);
+    this.render()
+  }
+
+  render() {
+    ReactDOM.render(<templates.aboutUs {...this.model.toJSON()} />, this.el);
+
+    _.defer(() => {
+      Adapt.trigger('view:render', this);
     });
 
-    return AboutUsView;
-});
+    return this;
+    }
+  }
+
+export default AboutUsView;
diff --git a/less/aboutUs.less b/less/aboutUs.less
@@ -6,29 +6,27 @@
     padding: @item-padding;
     color: @drawer-item-inverted;
 
-        img {
-            display:inline-block;
+    img {
+      display:inline-block;
       margin-right: @item-margin;
-            vertical-align: middle;
+      vertical-align: middle;
       min-width: unset;
       max-width: unset;
     }
-        }
+  }
 
   &__headline {
-            display:inline-block;
-                    width:87%;
+    display:inline-block;
+    width:87%;
 
     &-inner {
       font-size: 1.4rem;
       font-weight: inherit;
       line-height: 1.4;
         }
-
     }
 
   &__items-container {
-        display:block;
-    }
-
+    display:block;
+  }
 }
diff --git a/less/aboutUsItem.less b/less/aboutUsItem.less
@@ -1,10 +1,9 @@
 .aboutus__item {
-        display:block;
+  display:block;
 
   .aboutus__item-body {
-        display:none;
     color: @drawer-item-inverted;
-            padding:@item-padding;
+    padding:@item-padding;
     border-bottom: 1px solid @drawer-item-hover;
   }
 
@@ -15,7 +14,6 @@
     .no-touch &:hover {
       color: @drawer-link-hover;
       .transition(color @duration ease-in);
-        }
     }
-
+  }
 }