fix(view, viewmodel, service): use full file name as file identifier (#1590)

* fix(view, viewmodel): use full file name as file identifier

* Apply suggestion

Author: huyenltnguyen

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

@@ -7,6 +7,10 @@ import 'package:html/parser.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 class LearnFileService {
+  String getFullFileName(ChallengeFile file) {
+    return '${file.name}.${file.ext.value}';
+  }
+
   // This function returns a specific file content from the cache.
   // If testing is enabled on the function it will return
   // the first file with the given file name.
@@ -20,11 +24,12 @@ class LearnFileService {
 
     if (testing) {
       cache = challenge.files
-          .firstWhere((element) => element.name == file.name)
+          .firstWhere(
+              (element) => getFullFileName(element) == getFullFileName(file))
           .contents;
     } else {
       SharedPreferences prefs = await SharedPreferences.getInstance();
-      cache = prefs.getString('${challenge.id}.${file.name}');
+      cache = prefs.getString('${challenge.id}.${getFullFileName(file)}');
     }
 
     return cache ?? file.contents;
@@ -40,7 +45,7 @@ class LearnFileService {
     await prefs.setString('${challenge.id}.$currentSelectedFile', value);
   }
 
-  // This funciton returns the first file content with the given extension from the
+  // This function returns the first file content with the given extension from the
   // cache. If testing is enabled it will return the file directly from the challenge.
   // If a CSS extension is put as a parameter it will return the first HTML file instead.
 
@@ -67,7 +72,7 @@ class LearnFileService {
       SharedPreferences prefs = await SharedPreferences.getInstance();
 
       fileContent = prefs.getString(
-            '${challenge.id}.${firstChallenge[0].name}',
+            '${challenge.id}.${getFullFileName(firstChallenge[0])}',
           ) ??
           firstChallenge[0].contents;
     }
@@ -98,7 +103,7 @@ class LearnFileService {
 
     if (fileWithEditableRegion.isNotEmpty) {
       cache = prefs.getString(
-            '${challenge.id}.${fileWithEditableRegion[0].name}',
+            '${challenge.id}.${getFullFileName(fileWithEditableRegion[0])}',
           ) ??
           '';
 
@@ -204,7 +209,7 @@ class LearnFileService {
           testing: testing,
         );
 
-        if (!await cssFileIsLinked(content, '${file.name}.${file.ext.name}')) {
+        if (!await cssFileIsLinked(content, getFullFileName(file))) {
           continue;
         }
 
@@ -246,7 +251,7 @@ class LearnFileService {
 
     if (jsFiles.isNotEmpty) {
       for (ChallengeFile file in jsFiles) {
-        String filename = '${file.name}.${file.ext.name}';
+        String filename = getFullFileName(file);
         String? fileContents = await getExactFileFromCache(
           challenge,
           file,

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

@@ -122,7 +122,8 @@ class LearnService {
     List challengeFiles = challenge.files.map((file) {
       return {
         'contents':
-            prefs.getString('${challenge.id}.${file.name}') ?? file.contents,
+            prefs.getString('${challenge.id}.${file.name}.${file.ext.value}') ??
+                file.contents,
         'ext': file.ext.name,
         'history': file.history,
         'key': file.fileKey,

mobile-app/lib/ui/views/learn/challenge/challenge_view.dart

@@ -376,15 +376,17 @@ class ChallengeView extends StatelessWidget {
         items: [
           for (ChallengeFile file in challenge.files)
             DropdownMenuItem(
-              value: file.name,
+              value: model.getFullFileName(file),
               child: Text(
-                '${file.name}.${file.ext.name}',
+                model.getFullFileName(file),
                 style: TextStyle(
-                  color: model.currentSelectedFile == file.name &&
+                  color: model.currentSelectedFile ==
+                              model.getFullFileName(file) &&
                           !model.showTestsPanel
                       ? FccColors.blue50
                       : Colors.white,
-                  fontWeight: model.currentSelectedFile == file.name &&
+                  fontWeight: model.currentSelectedFile ==
+                              model.getFullFileName(file) &&
                           !model.showTestsPanel
                       ? FontWeight.bold
                       : FontWeight.normal,
@@ -394,7 +396,8 @@ class ChallengeView extends StatelessWidget {
         ],
         onChanged: (file) {
           model.setShowTestsPanel = false;
-          model.setCurrentSelectedFile = file ?? challenge.files[0].name;
+          model.setCurrentSelectedFile =
+              file ?? model.getFullFileName(challenge.files[0]);
           model.setMounted = false;
           ChallengeFile currFile = model.currentFile(challenge);
           model.initFile(challenge, currFile);
@@ -404,13 +407,15 @@ class ChallengeView extends StatelessWidget {
           return challenge.files.map((file) {
             return Center(
               child: Text(
-                '${file.name}.${file.ext.name}',
+                model.getFullFileName(file),
                 style: TextStyle(
-                  color: model.currentSelectedFile == file.name &&
+                  color: model.currentSelectedFile ==
+                              model.getFullFileName(file) &&
                           !model.showTestsPanel
                       ? FccColors.blue50
                       : Colors.white,
-                  fontWeight: model.currentSelectedFile == file.name &&
+                  fontWeight: model.currentSelectedFile ==
+                              model.getFullFileName(file) &&
                           !model.showTestsPanel
                       ? FontWeight.bold
                       : FontWeight.normal,

mobile-app/lib/ui/views/learn/challenge/challenge_viewmodel.dart

@@ -318,7 +318,7 @@ class ChallengeViewModel extends BaseViewModel {
         currFile,
       );
 
-      setCurrentSelectedFile = currFile.name;
+      setCurrentSelectedFile = getFullFileName(currFile);
       setEditorText = fileContents;
       setEditorLanguage = currFile.ext.value;
       initEditor(challenge, currFile);
@@ -343,7 +343,7 @@ class ChallengeViewModel extends BaseViewModel {
       key: ValueKey(editorText),
       defaultLanguage: editorLanguage,
       defaultValue: editorText ?? '',
-      path: '/${challenge.id}/${file.name}',
+      path: '/${challenge.id}/${getFullFileName(file)}',
       options: options,
     );
 
@@ -541,10 +541,14 @@ class ChallengeViewModel extends BaseViewModel {
     notifyListeners();
   }
 
+  String getFullFileName(ChallengeFile file) {
+    return '${file.name}.${file.ext.value}';
+  }
+
   ChallengeFile currentFile(Challenge challenge) {
     if (currentSelectedFile.isNotEmpty) {
       ChallengeFile file = challenge.files.firstWhere(
-        (file) => file.name == currentSelectedFile,
+        (file) => getFullFileName(file) == currentSelectedFile,
       );
       return file;
     }
@@ -575,8 +579,7 @@ class ChallengeViewModel extends BaseViewModel {
       Challenge? currChallenge = challenge;
 
       for (ChallengeFile file in currChallenge!.files) {
-        await prefs.remove('${currChallenge.id}.${file.name}');
-        await prefs.remove('${currChallenge.id}${file.name}');
+        await prefs.remove('${currChallenge.id}.${getFullFileName(file)}');
       }
 
       var challengeIndex = block!.challengeTiles.indexWhere(