WEBVTT 00:00.080 --> 00:01.720 Congratulations guys. 00:01.720 --> 00:06.080 We succeeded in getting all markers from Firebase Firestore. 00:06.240 --> 00:13.160 Now I'm going to show you another way to get and store markers in compose. 00:13.320 --> 00:17.480 As I told you this is a for compose and compose UI. 00:17.520 --> 00:20.760 So you can create a new ordinary XML file. 00:21.040 --> 00:28.200 Create a new um like Kotlin or Java code and use those variables with them. 00:28.200 --> 00:36.320 But since we are working with compose, I will show you the new type and the new version and new approach 00:36.560 --> 00:38.440 of this code. 00:38.480 --> 00:40.360 So comment this. 00:40.400 --> 00:46.440 I'll keep it if you if you want another way and keep it for later. 00:46.680 --> 00:47.600 Differences. 00:47.640 --> 01:00.040 Val markers equals to or it's of type snapshot state list destination marker mutable state list of. 01:00.080 --> 01:03.200 Let me explain what we've done here. 01:03.280 --> 01:13.260 This line Creates an observable, mutable list of destination marker items that Jetpack Compose can 01:13.260 --> 01:14.820 track for recomposition. 01:14.940 --> 01:23.100 This line creates an observable, mutable list of destination marker items that Jetpack Compose can 01:23.100 --> 01:24.660 track for recomposition. 01:24.660 --> 01:31.620 Mutable state list of creates a mutable list that is observable by compose. 01:31.660 --> 01:35.620 Snapshot aware compose keeps track of its state. 01:35.780 --> 01:43.500 You can use dot add items, dot remove items, and dot clear function whenever you change the list. 01:43.500 --> 01:47.020 Compose Recomposes anything that use it. 01:47.020 --> 01:53.820 Compose will automatically update the UI for any change and the snapshot state list. 01:53.820 --> 01:55.820 This is the type of list. 01:55.860 --> 02:05.460 Snapshot state list is basically a special compose collection that notifies recomposition when its content 02:05.460 --> 02:06.300 change. 02:06.340 --> 02:10.920 Think of it as a mutable list plus composite state awareness. 02:11.200 --> 02:12.120 Mutable list. 02:12.160 --> 02:20.000 We use it in and LiveData in the previous examples and in previous course with XML and Java. 02:20.120 --> 02:28.640 Now we are using mutable list plus composite state awareness, which is inside the state snapshot state 02:28.640 --> 02:29.760 list type. 02:30.040 --> 02:40.040 Any composable that reads markers will recompose when you add items, remove items, or update items. 02:40.160 --> 02:48.920 Please, please please guys, write those notes down because those are very important things and you 02:48.920 --> 02:57.640 should remember them when you work later in your future projects so you don't be confused when working 02:57.640 --> 03:01.000 with complex application and complex projects. 03:01.120 --> 03:10.440 I want from you to focus with me and learn the difference and how I think, and how you develop your 03:10.440 --> 03:12.600 code without any errors. 03:12.910 --> 03:14.470 And what things? 03:14.470 --> 03:20.270 What codes are specific and more convenient for your projects? 03:20.310 --> 03:23.510 Keep the init block the same. 03:23.750 --> 03:26.030 Load markers from Firestore. 03:26.310 --> 03:28.150 And here we need to modify. 03:28.390 --> 03:40.190 So instead of using this markers dot value we can directly use val new markers equals to repository 03:40.230 --> 03:41.390 marker repository. 03:41.430 --> 03:43.950 Get all from Firestore. 03:44.270 --> 03:49.230 Markers dot clear and then markers dot add all new markers. 03:49.230 --> 03:57.870 Here I'm clearing the list then adding the newly created markers and newly created and updated markers. 03:57.910 --> 04:02.030 Okay then here markers dot clear. 04:02.070 --> 04:07.230 Now let's move to the Uber clue map marker val markers by. 04:07.270 --> 04:09.510 Remember I need to remove it. 04:09.510 --> 04:17.770 And here equals to remember ViewModel dot markers alt plus enter to import it. 04:17.770 --> 04:23.010 This prevents recreating the state reference on recomposition. 04:23.010 --> 04:27.570 The snapshot state list is threadsafe for UI updates. 04:27.570 --> 04:31.890 All modifications should happen in Viewmodels coroutine scope. 04:32.010 --> 04:37.530 The pros are simpler code, direct access, no flow operations. 04:37.530 --> 04:43.490 The cons are ties viewmodels to compose runtime less flexible for non compose use. 04:43.490 --> 04:50.850 As I told you, this is the uh the the way or approach for compose only UI. 04:50.890 --> 05:01.370 So let me mark it like this for compose only twice and this for compose and compose UI approach. 05:01.370 --> 05:02.930 Let's run our application. 05:02.970 --> 05:03.810 Here we go. 05:03.850 --> 05:07.370 This is our map and this is our marker. 05:07.410 --> 05:10.610 Now let's create another document. 05:10.770 --> 05:14.850 The ID would be for example Paris. 05:15.050 --> 05:18.330 The first field is latitude. 05:18.330 --> 05:26.550 It's of type number the value for 8.8575. 05:26.750 --> 05:30.230 And let's add a new field. 05:30.350 --> 05:37.070 Longitude number 2.3514. 05:37.230 --> 05:39.310 It's east, so it's positive. 05:39.670 --> 05:45.950 Let me see if there is an instant initialization and inserting into the database. 05:46.070 --> 05:51.510 Click save and new marker being added to our database. 05:51.750 --> 05:53.590 So this is a big problem. 05:53.590 --> 06:01.310 We added the the marker but it um doesn't appear on the map. 06:01.430 --> 06:08.030 If we run the application again two markers are being displayed in France and in San Francisco. 06:08.030 --> 06:17.710 So we need to listen for the live updates and handle the live updates of the markers in the next video. 06:17.750 --> 06:19.950 We're gonna solve this issue.