feat(view, viewmodel): display project demo

huyenltnguyen · huyenltnguyen · commit 98faf15586ec · 2025-07-02T04:01:10.000+07:00
diff --git a/mobile-app/lib/models/learn/challenge_model.dart b/mobile-app/lib/models/learn/challenge_model.dart
@@ -45,6 +45,23 @@ enum HelpCategory {
   const HelpCategory(this.value);
 }
 
+enum DemoType {
+  onLoad('onLoad'),
+  onClick('onClick');
+
+  final String value;
+  const DemoType(this.value);
+
+  static DemoType? fromValue(String? value) {
+    if (value == null) return null;
+    try {
+      return DemoType.values.firstWhere((type) => type.value == value);
+    } catch (_) {
+      return null;
+    }
+  }
+}
+
 class Challenge {
   final String id;
   final String block;
@@ -74,6 +91,7 @@ class Challenge {
   final List<String>? assignments;
 
   final List<List<SolutionFile>>? solutions;
+  final DemoType? demoType;
 
   Challenge({
     required this.id,
@@ -97,6 +115,7 @@ class Challenge {
     this.scene,
     required this.hooks,
     this.solutions,
+    this.demoType,
   });
 
   factory Challenge.fromJson(Map<String, dynamic> data) {
@@ -144,6 +163,7 @@ class Challenge {
                   .toList())
               .toList()
           : null,
+      demoType: DemoType.fromValue(data['demoType']),
     );
   }
 
@@ -194,6 +214,7 @@ class Challenge {
           ?.map((solutionList) =>
               solutionList.map((file) => file.toJson()).toList())
           .toList(),
+      'demoType': challenge.demoType?.value,
     };
   }
 }
diff --git a/mobile-app/lib/ui/views/learn/challenge/challenge_viewmodel.dart b/mobile-app/lib/ui/views/learn/challenge/challenge_viewmodel.dart
@@ -520,6 +520,69 @@ class ChallengeViewModel extends BaseViewModel {
     return document;
   }
 
+  Future<String> writeDemoDocument(String doc, Challenge challenge) async {
+    if (challenge.solutions == null || challenge.solutions!.isEmpty) {
+      return parse(doc).outerHtml;
+    }
+
+    List<SolutionFile> solutionFiles = challenge.solutions![0];
+    List<SolutionFile> cssFiles =
+        solutionFiles.where((file) => file.ext == 'css').toList();
+    List<SolutionFile> jsFiles =
+        solutionFiles.where((file) => file.ext == 'js').toList();
+    List<SolutionFile> htmlFiles =
+        solutionFiles.where((file) => file.ext == 'html').toList();
+
+    String text = htmlFiles.isNotEmpty ? htmlFiles[0].contents : doc;
+    Document document = parse(text);
+
+    if (cssFiles.isNotEmpty) {
+      // Insert CSS as <style> tags into <head>
+      StringBuffer cssBuffer = StringBuffer();
+      for (var css in cssFiles) {
+        cssBuffer.writeln('<style>${css.contents}</style>');
+      }
+      if (document.head != null) {
+        document.head!.append(parseFragment(cssBuffer.toString()));
+      }
+    }
+
+    if (jsFiles.isNotEmpty) {
+      // Insert JS as <script> tags before </body>
+      StringBuffer jsBuffer = StringBuffer();
+      for (var js in jsFiles) {
+        jsBuffer.writeln('<script>${js.contents}</script>');
+      }
+      if (document.body != null) {
+        document.body!.append(parseFragment(jsBuffer.toString()));
+      }
+    }
+
+    String viewPort = '''<meta content="width=device-width,
+         initial-scale=1.0, maximum-scale=1.0,
+         user-scalable=no" name="viewport">
+         <meta>''';
+    Document viewPortParsed = parse(viewPort);
+    Node meta = viewPortParsed.getElementsByTagName('META')[0];
+    document.getElementsByTagName('HEAD')[0].append(meta);
+
+    return document.outerHtml;
+  }
+
+  Future provideDemo(Challenge challenge) async {
+    // Use the first solution's HTML file as the base doc
+    if (challenge.solutions == null || challenge.solutions!.isEmpty) {
+      return null;
+    }
+
+    List<SolutionFile> htmlFiles =
+        challenge.solutions![0].where((file) => file.ext == 'html').toList();
+    String doc = htmlFiles.isNotEmpty ? htmlFiles[0].contents : '';
+    Future document = writeDemoDocument(doc, challenge);
+
+    return document;
+  }
+
   String parseUsersConsoleMessages(String string) {
     if (!string.startsWith('testMSG')) {
       return '<p>$string</p>';
diff --git a/mobile-app/lib/ui/views/learn/widgets/challenge_widgets/project_demo.dart b/mobile-app/lib/ui/views/learn/widgets/challenge_widgets/project_demo.dart
@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_inappwebview/flutter_inappwebview.dart';
+import 'package:freecodecamp/extensions/i18n_extension.dart';
+import 'package:freecodecamp/models/learn/challenge_model.dart';
+import 'package:freecodecamp/ui/views/learn/challenge/challenge_viewmodel.dart';
+
+class ProjectDemo extends StatelessWidget {
+  const ProjectDemo({
+    super.key,
+    required this.challenge,
+    required this.model,
+  });
+
+  final Challenge challenge;
+  final ChallengeViewModel model;
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      insetPadding: EdgeInsets.zero,
+      backgroundColor: Colors.transparent,
+      child: Container(
+        width: double.infinity,
+        height: double.infinity,
+        color: Theme.of(context).scaffoldBackgroundColor,
+        child: Column(
+          children: [
+            AppBar(
+              automaticallyImplyLeading: false,
+              title: Text('Demo'),
+              actions: [
+                IconButton(
+                  icon: const Icon(Icons.close),
+                  onPressed: () => Navigator.of(context).pop(),
+                ),
+              ],
+            ),
+            Expanded(
+              child: FutureBuilder(
+                future: model.provideDemo(challenge),
+                builder: (context, snapshot) {
+                  if (snapshot.hasData) {
+                    if (snapshot.data is String) {
+                      return InAppWebView(
+                        initialData: InAppWebViewInitialData(
+                          data: snapshot.data as String,
+                          mimeType: 'text/html',
+                        ),
+                        onWebViewCreated: (controller) {
+                          model.setWebviewController = controller;
+                        },
+                        initialSettings: InAppWebViewSettings(
+                          // TODO: Set this to true only in dev mode
+                          isInspectable: true,
+                        ),
+                      );
+                    }
+                  }
+
+                  if (snapshot.hasError) {
+                    return Center(
+                      child: Text(context.t.error),
+                    );
+                  }
+
+                  return const Center(
+                    child: CircularProgressIndicator(),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/mobile-app/lib/ui/views/learn/widgets/description/description_widget_view.dart b/mobile-app/lib/ui/views/learn/widgets/description/description_widget_view.dart
