fix the issues (#57, #67, #68, #69, #70) (#66)

* fix the bug that selected list row remains highlighted

* show the indicator of horizontal scrollView

* make the width of backdrop image more suitable on small screen size (4.0-inch)

* add bottom padding to avoid overlap between image and indicator of scrollview

* filter same people and sorted people by their name alphabetically

* add filter to avoid loading same data duplicately

MovieSwift/MovieSwift/views/components/custom list/CustomListForm.swift

@@ -78,9 +78,11 @@ struct CustomListForm : View {
                             self.searchTextWrapper.searchText = ""
                         }
                     }
-                }.padding(.leading, 16)
+                }
+                .padding(.bottom, 10)
             }
             .frame(height: 200)
+            .padding(.leading, 16)
             .listRowInsets(EdgeInsets())
         }
     }

MovieSwift/MovieSwift/views/components/fan club/FanClubHome.swift

@@ -20,7 +20,9 @@ struct FanClubHome: ConnectedView {
 
     func map(state: AppState , dispatch: @escaping DispatchFunction) -> Props {
         Props(peoples: state.peoplesState.fanClub.map{ $0 }.sorted(),
-              popular: state.peoplesState.popular.filter{ !state.peoplesState.fanClub.contains($0) },
+              popular: state.peoplesState.popular
+                .filter{ !state.peoplesState.fanClub.contains($0) }
+                .sorted() { state.peoplesState.peoples[$0]!.name < state.peoplesState.peoples[$1]!.name },
               dispatch: dispatch)
     }
 
@@ -58,7 +60,9 @@ struct FanClubHome: ConnectedView {
             .animation(.spring())
         }
         .onAppear {
-            props.dispatch(PeopleActions.FetchPopular(page: self.currentPage))
+            if self.currentPage == 1{
+                props.dispatch(PeopleActions.FetchPopular(page: self.currentPage))
+            }
         }
     }
 }

MovieSwift/MovieSwift/views/components/moviesHome/grid/rows/MoviesHomeGridMoviesRow.swift

@@ -28,7 +28,7 @@ struct MoviesHomeGridMoviesRow: ConnectedView {
     }
 
     func body(props: Props) -> some View {
-        ScrollView(.horizontal, showsIndicators: false) {
+        ScrollView(.horizontal, showsIndicators: true) {
             LazyHStack(spacing: 16) {
                 ForEach(props.movies) { movie in
                     NavigationLink(destination: MovieDetail(movieId: movie.id)) {
@@ -43,8 +43,9 @@ struct MoviesHomeGridMoviesRow: ConnectedView {
                 }
             }
             .frame(height: 150)
-            .padding(.horizontal, 16)
+            .padding(.bottom, 10)
         }
+        .padding(.horizontal, 16)
     }
 }
 

MovieSwift/MovieSwift/views/components/moviesList/base/MoviesList.swift

@@ -36,6 +36,10 @@ struct MoviesList: ConnectedView {
     let displaySearch: Bool
     var pageListener: MoviesPagesListener?
 
+    // MARK: - Private var
+    @State private var selectedItem: String? = nil
+    @State private var listViewId = UUID()
+
     // MARK: - Computed Props
     func map(state: AppState, dispatch: @escaping DispatchFunction) -> Props {
         if isSearching {
@@ -50,7 +54,7 @@ struct MoviesList: ConnectedView {
     // MARK: - Computed views
     private func moviesRows(props: Props) -> some View {
         ForEach(isSearching ? props.searchedMovies ?? [] : movies, id: \.self) { id in
-            NavigationLink(destination: MovieDetail(movieId: id)) {
+            NavigationLink(destination: MovieDetail(movieId: id), tag: String(id), selection:$selectedItem) {
                 MovieRow(movieId: id)
             }
         }
@@ -90,7 +94,7 @@ struct MoviesList: ConnectedView {
                 Text("No results")
             } else {
                 ForEach(props.searcherdPeoples ?? [], id: \.self) { id in
-                    NavigationLink(destination: PeopleDetail(peopleId: id)) {
+                    NavigationLink(destination: PeopleDetail(peopleId: id), tag: String(id), selection:$selectedItem) {
                         PeopleRow(peopleId: id)
                     }
                 }
@@ -142,8 +146,10 @@ struct MoviesList: ConnectedView {
 
             if isSearching && searchFilter == SearchFilter.peoples.rawValue {
                 peoplesSection(props: props)
+                    .id(listViewId)
             } else {
                 movieSection(props: props)
+                    .id(listViewId)
             }
 
             /// The pagination is done by appending a invisible rectancle at the bottom of the list, and trigerining the next page load as it appear.
@@ -162,6 +168,13 @@ struct MoviesList: ConnectedView {
             }
         }
         .listStyle(PlainListStyle())
+        .onAppear {
+            if selectedItem != nil {
+                selectedItem = nil
+                /// Changing view id to refresh view to avoid a bug of SwiftUI List that selected list row remains highlighted
+                listViewId = UUID()
+            }
+        }
     }
 }
 

MovieSwift/MovieSwift/views/shared/images/MovieBackdropImage.swift

@@ -24,7 +24,7 @@ struct MovieBackdropImage : View {
                 Image(uiImage: self.imageLoader.image!)
                     .resizable()
                     .renderingMode(.original)
-                    .frame(width: 300, height: displayMode == .normal ? 168 : 50)
+                    .frame(width: 280, height: displayMode == .normal ? 168 : 50)
                     .animation(.easeInOut)
                     .onAppear{
                         DispatchQueue.main.async {
@@ -35,7 +35,7 @@ struct MovieBackdropImage : View {
                 Rectangle()
                     .foregroundColor(.gray)
                     .opacity(0.1)
-                    .frame(width: 300, height: displayMode == .normal ? 168 : 50)
+                    .frame(width: 280, height: displayMode == .normal ? 168 : 50)
             }
         }
     }