Feature/improve news (#446)

* Improved the loading of the news view

* New button added to show more news; Changed arrow direction and added an animation

* Remove Package.resolved

* improve "load more" button design

* improve "load more news" button design

Co-authored-by: August Wittgenstein <august.wittgenstein@tum.de>

.gitignore

@@ -27,6 +27,9 @@ xcuserdata/
 *.dSYM.zip
 *.dSYM
 
+## Swift Package Manager
+*Package.resolved
+
 # CocoaPods
 #
 # We recommend against adding the Pods directory to your .gitignore. However

Campus-iOS/HelperViews/Collapsible.swift

@@ -25,20 +25,22 @@ struct Collapsible<Content: View>: View {
                     HStack {
                         self.title()
                         Spacer()
-                        Image(systemName: self.collapsed ? "chevron.down" : "chevron.up")
+                        Image(systemName: "chevron.right")
+                            .rotationEffect(Angle.degrees(self.collapsed ? 0 : 90))
                     }
                     .padding()
                     .background(Color.white.opacity(0.01))
                 }
             )
             .buttonStyle(PlainButtonStyle())
 
-
-            self.content()
-            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: collapsed ? 0 : .none, alignment: .top)
-            .clipped()
-            .animation(.easeOut, value: self.collapsed)
-            .transition(.slide)
+            if(!collapsed) {
+                self.content()
+                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: collapsed ? 0 : .none, alignment: .top)
+                .clipped()
+                .animation(.easeOut, value: self.collapsed)
+                .transition(.slide)
+            }
         }
     }
 }

Campus-iOS/NewsComponent/ViewModel/NewsViewModel.swift

@@ -17,6 +17,7 @@ class NewsViewModel: ObservableObject {
 
     init() {
         // TODO: Get from cache, if not found, then fetch
+
         fetch()
     }
 

Campus-iOS/NewsComponent/Views/NewsCard.swift

@@ -7,6 +7,32 @@
 
 import SwiftUI
 
+struct LoadMoreCard: View {
+    @Environment(\.colorScheme) var colorScheme
+
+    let loadingMethod: () -> ()
+
+    var body: some View {
+            Button {
+                withAnimation {
+                    loadingMethod()
+                }
+            } label: {
+                HStack {
+                    Text("Show more...")
+                        .font(.body)
+                        .foregroundColor(.blue)
+                }
+                .foregroundColor(colorScheme == .dark ? .white : .black)
+                .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.width * 0.6)
+            }
+            .background(Color(.systemGray6))
+            .cornerRadius(15)
+            .shadow(color: Color.black.opacity(0.2), radius: 7, x: 0, y: 2)
+            .contentShape(Rectangle())
+    }
+}
+
 struct NewsCard: View {
     var title: String
     var source: String?
@@ -33,6 +59,7 @@ struct NewsCard: View {
     }
 
     var body: some View {
+
         VStack(alignment: .center, spacing: 0) {
 
             if self.image.isEmpty {
@@ -134,11 +161,13 @@ struct NewsCard: View {
         .background(Color(.systemGray6))
         .cornerRadius(15)
         .shadow(color: Color.black.opacity(0.2), radius: 7, x: 0, y: 2)
+
     }
 }
 
 struct ProductCard_Previews: PreviewProvider {
     static var previews: some View {
-        NewsCard(title: "SMOOTHIE BOWL", source: "FEELING FIT", created: Date(), image: "https://app.tum.de/File/news/newspread/dab04abdf3954d3e1bf56cef44d68662.jpg", latest: true)
+        NewsCard(title: "SMOOTHIE BOWL", source: "FEELING FIT", created: Date(), image: "https://app.tum.de/File/news/newspread/dab04abdf3954d3e1bf56cef44d68662.jpg", latest: false)
+        LoadMoreCard(loadingMethod: {print("loading mehtod")})
     }
 }

Campus-iOS/NewsComponent/Views/NewsCardsHorizontalScrollingView.swift

@@ -12,11 +12,33 @@ struct NewsCardsHorizontalScrollingView: View {
     @AppStorage("useBuildInWebView") var useBuildInWebView: Bool = true
     @State var isWebViewShowed = false
     @State var news: [News]
+    @State var visibleNews: [News]
+    @State var showLoadButton = true
+
+    var sortedNews: [News] = []
+
+    init(news: [News]) {
+        sortedNews = news.sorted(by: { news1, news2 in
+            if let date1 = news1.date, let date2 = news2.date {
+                return date1.compare(date2) == .orderedDescending
+            } else {
+                return false
+            }
+        })
+
+        self.news = sortedNews
+
+        visibleNews = Array(sortedNews.prefix(upTo: 5))
+    }
+
+    func showMoreNews() {
+
+    }
 
     var body: some View {
         ScrollView(.horizontal, showsIndicators: false) {
             HStack(spacing: 30) {
-                ForEach(news, id: \.id) { news in
+                ForEach(visibleNews, id: \.id) { news in
                     GeometryReader { geometry in
                         if let link = news.link {
                             if self.useBuildInWebView {
@@ -41,6 +63,26 @@ struct NewsCardsHorizontalScrollingView: View {
                     .frame(width: 250, height: 250)
                     Spacer(minLength: 1)
                 }
+
+                if visibleNews.count < sortedNews.count {
+                    GeometryReader { geometry in
+
+                        LoadMoreCard(loadingMethod: {
+                            // Amount of how many news are still hidden
+                            let diffAmount = sortedNews.count - visibleNews.count
+
+                            if diffAmount > 0 {
+                                // If the diff is >= 5 than append the next 5 news. Otherwise (diff < 5) just append the last e.g. 2 news. (In this example: diffAmount = 2)
+                                // The -1 is neccessary due to the counting: We start from visibleNews.count to (visibleNews.count + 5 - 1) in order to get the next 5 news
+                                visibleNews.append(contentsOf: sortedNews[visibleNews.count...(visibleNews.count + (diffAmount >= 5 ? 5 : diffAmount) - 1)])
+                            }
+                        })
+                            .rotation3DEffect(Angle(degrees: Double(geometry.frame(in: .global).minX - 50) / -20), axis: (x: 0, y: 100.0, z: 0))
+
+                    }
+                    .frame(width: 150, height: 250)
+                    Spacer(minLength: 1)
+                }
             }
             .padding([.top, .leading], 30)
         }
@@ -52,6 +94,6 @@ struct NewsCardsHorizontalScrollingView_Previews: PreviewProvider {
     static let news = News(id: "1", sourceId: 1, date: Date(), created: Date(), title: "Dummy Title", link: URL(string: "https://github.com/orgs/TUM-Dev"), imageURL: "https://app.tum.de/File/news/newspread/dab04abdf3954d3e1bf56cef44d68662.jpg")
 
     static var previews: some View {
-        NewsCardsHorizontalScrollingView(news: [news, news])
+        NewsCardsHorizontalScrollingView(news: [news, news, news, news, news])
     }
 }