Improve the layout of Web Socket case study (#1529)

* Improve layout of Web Socket case study

* Update Examples/CaseStudies/SwiftUICaseStudies/02-Effects-WebSocket.swift

Co-authored-by: Thomas Grapperon <[email protected]>

Co-authored-by: Thomas Grapperon <[email protected]>

Author: Jager-yoo

Examples/CaseStudies/SwiftUICaseStudies/02-Effects-WebSocket.swift

@@ -7,7 +7,7 @@ private let readMe = """
 
   A lightweight wrapper is made for `URLSession`'s API for web sockets so that we can send, \
   receive and ping a socket endpoint. To test, connect to the socket server, and then send a \
-  message. The socket server should immediately reply with the exact message you send it.
+  message. The socket server should immediately reply with the exact message you sent in.
   """
 
 // MARK: - Feature domain
@@ -111,7 +111,7 @@ struct WebSocket: ReducerProtocol {
       .cancellable(id: WebSocketID.self)
 
     case .sendResponse(didSucceed: false):
-      state.alert = AlertState(title: TextState("Could not send socket message. Try again."))
+      state.alert = AlertState(title: TextState("Could not send socket message. Connect to the server first, and try again."))
       return .none
 
     case .sendResponse(didSucceed: true):
@@ -123,6 +123,7 @@ struct WebSocket: ReducerProtocol {
 
     case .webSocket(.didOpen):
       state.connectivityState = .connected
+      state.receivedMessages.removeAll()
       return .none
     }
   }
@@ -135,41 +136,49 @@ struct WebSocketView: View {
 
   var body: some View {
     WithViewStore(self.store, observe: { $0 }) { viewStore in
-      VStack(alignment: .leading) {
-        AboutView(readMe: readMe)
-          .padding(.bottom)
-
-        HStack {
-          TextField(
-            "Message to send",
-            text: viewStore.binding(
-              get: \.messageToSend, send: WebSocket.Action.messageToSendChanged)
-          )
-
-          Button(
-            viewStore.connectivityState == .connected
+      Form {
+        Section {
+          AboutView(readMe: readMe)
+        }
+
+        Section {
+          VStack(alignment: .leading) {
+            Button(
+              viewStore.connectivityState == .connected
               ? "Disconnect"
               : viewStore.connectivityState == .disconnected
                 ? "Connect"
                 : "Connecting..."
-          ) {
-            viewStore.send(.connectButtonTapped)
+            ) {
+              viewStore.send(.connectButtonTapped)
+            }
+            .buttonStyle(.bordered)
+            .tint(viewStore.connectivityState == .connected ? .red : .green)
+
+            HStack {
+              TextField(
+                "Type message here",
+                text: viewStore.binding(
+                  get: \.messageToSend, send: WebSocket.Action.messageToSendChanged)
+              )
+              .textFieldStyle(.roundedBorder)
+
+              Button("Send") {
+                viewStore.send(.sendButtonTapped)
+              }
+              .buttonStyle(.borderless)
+            }
           }
         }
 
-        Button("Send message") {
-          viewStore.send(.sendButtonTapped)
+        Section {
+          Text("Status: \(viewStore.connectivityState.rawValue)")
+            .foregroundStyle(.secondary)
+          Text(viewStore.receivedMessages.reversed().joined(separator: "\n"))
+        } header: { 
+          Text("Received messages") 
         }
-
-        Spacer()
-
-        Text("Status: \(viewStore.connectivityState.rawValue)")
-          .foregroundStyle(.secondary)
-        Text("Received messages:")
-          .foregroundStyle(.secondary)
-        Text(viewStore.receivedMessages.joined(separator: "\n"))
       }
-      .padding()
       .alert(self.store.scope(state: \.alert), dismiss: .alertDismissed)
       .navigationTitle("Web Socket")
     }
@@ -336,7 +345,7 @@ struct WebSocketView_Previews: PreviewProvider {
     NavigationView {
       WebSocketView(
         store: Store(
-          initialState: WebSocket.State(receivedMessages: ["Echo"]),
+          initialState: WebSocket.State(receivedMessages: ["Hi"]),
           reducer: WebSocket()
         )
       )

Examples/CaseStudies/SwiftUICaseStudiesTests/02-Effects-WebSocketTests.swift

@@ -91,7 +91,7 @@ final class WebSocketTests: XCTestCase {
       $0.messageToSend = ""
     }
     await store.receive(.sendResponse(didSucceed: false)) {
-      $0.alert = AlertState(title: TextState("Could not send socket message. Try again."))
+      $0.alert = AlertState(title: TextState("Could not send socket message. Connect to the server first, and try again."))
     }
 
     // Disconnect from the socket