feat: block layout v2

mobile-app/lib/models/learn/curriculum_model.dart

@@ -46,38 +46,40 @@ class SuperBlock {
   }
 }
 
+enum BlockType { lecture, workshop, lab, review, quiz, exam, legacy }
+
+enum BlockLayout {
+  challengeList,
+  challengeGrid,
+  challengeDialogue,
+  challengeLink,
+  project,
+}
+
 class Block {
   final String name;
   final String dashedName;
   final SuperBlock superBlock;
+  final BlockLayout layout;
+  final BlockType type;
   final List description;
-  final bool isStepBased;
   final int order;
 
   final List<ChallengeOrder> challenges;
   final List<ChallengeListTile> challengeTiles;
 
   Block({
     required this.superBlock,
+    required this.layout,
+    required this.type,
     required this.name,
     required this.dashedName,
     required this.description,
-    required this.isStepBased,
     required this.order,
     required this.challenges,
     required this.challengeTiles,
   });
 
-  static bool checkIfStepBased(String superblock) {
-    List<String> stepbased = [
-      '2022/responsive-web-design',
-      'a2-english-for-developers',
-      'b1-english-for-developers'
-    ];
-
-    return stepbased.contains(superblock);
-  }
-
   factory Block.fromJson(
     Map<String, dynamic> data,
     List description,
@@ -90,18 +92,36 @@ class Block {
 
     data['challengeTiles'] = [];
 
+    BlockLayout handleLayout(String? layout) {
+      switch (layout) {
+        case 'project-list':
+        case 'challenge-list':
+        case 'legacy-challenge-list':
+          return BlockLayout.challengeList;
+        case 'dialogue-grid':
+          return BlockLayout.challengeDialogue;
+        case 'challenge-grid':
+        case 'legacy-challenge-grid':
+          return BlockLayout.challengeGrid;
+        case 'link':
+        case 'legacy-link':
+          return BlockLayout.challengeLink;
+        default:
+          return BlockLayout.challengeGrid;
+      }
+    }
+
     return Block(
       superBlock: SuperBlock(
         dashedName: superBlockDashedName,
         name: superBlockName,
       ),
+      layout: handleLayout(data['blockLayout']),
+      type: BlockType.legacy,
       name: data['name'],
       dashedName: key,
       description: description,
       order: data['order'],
-      isStepBased: checkIfStepBased(
-        superBlockDashedName,
-      ),
       challenges: (data['challengeOrder'] as List)
           .map<ChallengeOrder>(
             (dynamic challenge) => ChallengeOrder(
@@ -125,22 +145,6 @@ class Block {
           .toList(),
     );
   }
-
-  static Map<String, dynamic> toCachedObject(Block block) {
-    return {
-      'superBlock': {
-        'dashedName': block.superBlock.dashedName,
-        'name': block.superBlock.name,
-      },
-      'name': block.name,
-      'dashedName': block.dashedName,
-      'description': block.description,
-      'order': block.order,
-      'isStepBased': block.isStepBased,
-      'challengeOrder': block.challenges,
-      'challengeTiles': block.challenges,
-    };
-  }
 }
 
 class ChallengeListTile {

mobile-app/lib/service/learn/learn_offline_service.dart

@@ -267,7 +267,7 @@ class LearnOfflineService {
     try {
       SharedPreferences prefs = await SharedPreferences.getInstance();
 
-      Map<String, dynamic> blockToJson = Block.toCachedObject(block);
+      Map<String, dynamic> blockToJson = {};
       List<String>? storedBlocks = prefs.getStringList('storedBlocks');
 
       if (storedBlocks == null) {

mobile-app/lib/ui/views/learn/block/block_template_view.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:freecodecamp/models/learn/curriculum_model.dart';
+import 'package:freecodecamp/ui/views/learn/block/block_template_viewmodel.dart';
+import 'package:stacked/stacked.dart';
+
+class BlockTemplateView extends StatelessWidget {
+  final Block block;
+  final bool isOpen;
+  final Function isOpenFunction;
+
+  const BlockTemplateView({
+    Key? key,
+    required this.block,
+    required this.isOpen,
+    required this.isOpenFunction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ViewModelBuilder<BlockTemplateViewModel>.reactive(
+      onViewModelReady: (model) async {
+        model.init(block.challengeTiles);
+        model.setIsDev = await model.developerService.developmentMode();
+      },
+      viewModelBuilder: () => BlockTemplateViewModel(),
+      builder: (
+        context,
+        model,
+        child,
+      ) {
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 16.0),
+          child: Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              border: Border.all(
+                color: const Color.fromRGBO(0x3b, 0x3b, 0x4f, 1),
+              ),
+              color: const Color.fromRGBO(0x1b, 0x1b, 0x32, 1),
+            ),
+            padding: const EdgeInsets.all(8),
+            width: MediaQuery.of(context).size.width,
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Expanded(
+                            child: Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: Text(
+                                block.name,
+                                style: const TextStyle(
+                                  wordSpacing: 0,
+                                  letterSpacing: 0,
+                                  fontSize: 18,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                      Row(
+                        children: [
+                          model.getLayout(
+                            block.layout,
+                            model,
+                            block,
+                            isOpen,
+                            isOpenFunction,
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile-app/lib/ui/views/learn/block/block_template_viewmodel.dart

@@ -0,0 +1,140 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:freecodecamp/app/app.locator.dart';
+import 'package:freecodecamp/app/app.router.dart';
+import 'package:freecodecamp/models/learn/completed_challenge_model.dart';
+import 'package:freecodecamp/models/learn/curriculum_model.dart';
+import 'package:freecodecamp/models/main/user_model.dart';
+import 'package:freecodecamp/service/authentication/authentication_service.dart';
+import 'package:freecodecamp/service/developer_service.dart';
+import 'package:freecodecamp/service/learn/learn_offline_service.dart';
+import 'package:freecodecamp/service/learn/learn_service.dart';
+import 'package:freecodecamp/ui/views/learn/block/templates/dialogue/dialogue_view.dart';
+import 'package:freecodecamp/ui/views/learn/block/templates/grid/grid_view.dart';
+import 'package:freecodecamp/ui/views/learn/block/templates/link/link_view.dart';
+import 'package:freecodecamp/ui/views/learn/block/templates/list/list_view.dart';
+import 'package:stacked/stacked.dart';
+import 'package:stacked_services/stacked_services.dart';
+
+class BlockTemplateViewModel extends BaseViewModel {
+  final NavigationService _navigationService = locator<NavigationService>();
+  final AuthenticationService _auth = locator<AuthenticationService>();
+
+  FccUserModel? user;
+
+  bool _isDev = false;
+  bool get isDev => _isDev;
+
+  int _challengesCompleted = 0;
+  int get challengesCompleted => _challengesCompleted;
+
+  final learnOfflineService = locator<LearnOfflineService>();
+
+  final developerService = locator<DeveloperService>();
+
+  final learnService = locator<LearnService>();
+
+  set setIsDev(bool value) {
+    _isDev = value;
+    notifyListeners();
+  }
+
+  void routeToChallengeView(Block block, String challengeId) {
+    _navigationService.navigateTo(
+      Routes.challengeTemplateView,
+      arguments: ChallengeTemplateViewArguments(
+        challengeId: challengeId,
+        block: block,
+        challengesCompleted: _challengesCompleted,
+      ),
+    );
+  }
+
+  Future<void> routeToCertification(Block block) async {
+    String challengeId = block.challengeTiles[0].id;
+
+    routeToChallengeView(
+      block,
+      challengeId,
+    );
+  }
+
+  void init(List<ChallengeListTile> challengeBatch) async {
+    user = await _auth.userModel;
+    setNumberOfCompletedChallenges(challengeBatch);
+    notifyListeners();
+  }
+
+  void setNumberOfCompletedChallenges(List<ChallengeListTile> challengeBatch) {
+    int count = 0;
+    if (user != null) {
+      Iterable<String> completedChallengeIds = user!.completedChallenges.map(
+        (e) => e.id,
+      );
+
+      for (ChallengeListTile challenge in challengeBatch) {
+        if (completedChallengeIds.contains(challenge.id)) {
+          count++;
+        }
+      }
+      _challengesCompleted = count;
+      notifyListeners();
+    }
+  }
+
+  bool completedChallenge(String incomingId) {
+    if (user != null) {
+      for (CompletedChallenge challenge in user!.completedChallenges) {
+        if (challenge.id == incomingId) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  Widget getLayout(
+    BlockLayout layout,
+    BlockTemplateViewModel model,
+    Block block,
+    bool isOpen,
+    Function isOpenFunction,
+  ) {
+    switch (layout) {
+      case BlockLayout.challengeGrid:
+        return BlockGridView(
+          block: block,
+          model: model,
+          isOpen: isOpen,
+          isOpenFunction: isOpenFunction,
+        );
+      case BlockLayout.challengeDialogue:
+        return BlockDialogueView(
+          block: block,
+          model: model,
+          isOpen: isOpen,
+          isOpenFunction: isOpenFunction,
+        );
+      case BlockLayout.challengeList:
+        return BlockListView(
+          block: block,
+          model: model,
+          isOpen: isOpen,
+          isOpenFunction: isOpenFunction,
+        );
+      case BlockLayout.challengeLink:
+        return BlockLinkView(
+          block: block,
+          model: model,
+        );
+      default:
+        return BlockGridView(
+          block: block,
+          model: model,
+          isOpen: isOpen,
+          isOpenFunction: isOpenFunction,
+        );
+    }
+  }
+}