From 9463fbbe2ba8041e42bd6199937018804960f72e Mon Sep 17 00:00:00 2001 From: hunteraraujo Date: Sun, 24 Sep 2023 13:31:47 -0700 Subject: [PATCH] Refactor SettingsView to Accept External ViewModel Changed the architecture of the SettingsView to align with the existing pattern in the application. Instead of creating its own instance of SettingsViewModel, the view now accepts an external viewModel as a parameter. This ensures consistency across the application and allows for better modularity and reusability of components. --- frontend/lib/main.dart | 4 + frontend/lib/views/main_layout.dart | 4 +- .../lib/views/settings/settings_view.dart | 123 +++++++++--------- 3 files changed, 65 insertions(+), 66 deletions(-) diff --git a/frontend/lib/main.dart b/frontend/lib/main.dart index 97db9a02..07d267a3 100644 --- a/frontend/lib/main.dart +++ b/frontend/lib/main.dart @@ -1,4 +1,5 @@ import 'package:auto_gpt_flutter_client/services/leaderboard_service.dart'; +import 'package:auto_gpt_flutter_client/viewmodels/settings_viewmodel.dart'; import 'package:auto_gpt_flutter_client/views/auth/firebase_auth_view.dart'; import 'package:flutter/material.dart'; import 'views/main_layout.dart'; @@ -86,6 +87,9 @@ class MyApp extends StatelessWidget { if (snapshot.hasData && snapshot.data != null) { return MultiProvider( providers: [ + ChangeNotifierProvider( + create: (context) => SettingsViewModel(), + ), ChangeNotifierProvider( create: (context) => ChatViewModel( Provider.of(context, listen: false))), diff --git a/frontend/lib/views/main_layout.dart b/frontend/lib/views/main_layout.dart index 23c07df9..bbf24789 100644 --- a/frontend/lib/views/main_layout.dart +++ b/frontend/lib/views/main_layout.dart @@ -1,3 +1,4 @@ +import 'package:auto_gpt_flutter_client/viewmodels/settings_viewmodel.dart'; import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart'; import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart'; import 'package:auto_gpt_flutter_client/viewmodels/chat_viewmodel.dart'; @@ -23,6 +24,7 @@ class MainLayout extends StatelessWidget { // Access the various ViewModels from the context final taskViewModel = Provider.of(context); final chatViewModel = Provider.of(context); + final settingsViewModel = Provider.of(context); // Initialize the width for the SideBarView double sideBarWidth = 60.0; @@ -75,7 +77,7 @@ class MainLayout extends StatelessWidget { SizedBox( width: settingsViewWidth, // Render the SettingsView with the same width as TaskView - child: const SettingsView()), + child: SettingsView(viewModel: settingsViewModel)), SizedBox( width: chatViewWidth, // Render the ChatView next to the SettingsView diff --git a/frontend/lib/views/settings/settings_view.dart b/frontend/lib/views/settings/settings_view.dart index 3dafe4e6..758761b9 100644 --- a/frontend/lib/views/settings/settings_view.dart +++ b/frontend/lib/views/settings/settings_view.dart @@ -1,81 +1,74 @@ import 'package:auto_gpt_flutter_client/viewmodels/settings_viewmodel.dart'; import 'package:flutter/material.dart'; -import 'package:provider/provider.dart'; /// [SettingsView] displays a list of settings that the user can configure. /// It uses [SettingsViewModel] for state management and logic. class SettingsView extends StatelessWidget { - const SettingsView({super.key}); + final SettingsViewModel viewModel; + + /// Constructor for [SettingsView], requiring an instance of [SettingsViewModel]. + const SettingsView({Key? key, required this.viewModel}) : super(key: key); @override Widget build(BuildContext context) { - // [ChangeNotifierProvider] provides an instance of [SettingsViewModel] to the widget tree. - return ChangeNotifierProvider( - create: (context) => SettingsViewModel(), - child: Scaffold( - appBar: AppBar( - backgroundColor: Colors.grey, - foregroundColor: Colors.black, - title: const Text('Settings')), - body: Consumer( - builder: (context, viewModel, child) { - // A list of settings is displayed using [ListView]. - return ListView( + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.grey, + foregroundColor: Colors.black, + title: const Text('Settings'), + ), + body: ListView( + children: [ + // Dark Mode Toggle + SwitchListTile( + title: const Text('Dark Mode'), + value: viewModel.isDarkModeEnabled, + onChanged: viewModel.toggleDarkMode, + ), + // Developer Mode Toggle + SwitchListTile( + title: const Text('Developer Mode'), + value: viewModel.isDeveloperModeEnabled, + onChanged: viewModel.toggleDeveloperMode, + ), + // Base URL Configuration + ListTile( + title: const Text('Base URL'), + subtitle: TextFormField( + initialValue: viewModel.baseURL, + onChanged: viewModel.updateBaseURL, + decoration: const InputDecoration( + hintText: 'Enter Base URL', + ), + ), + ), + // Continuous Mode Steps Configuration + ListTile( + title: const Text('Continuous Mode Steps'), + // User can increment or decrement the number of steps using '+' and '-' buttons. + subtitle: Row( children: [ - // Dark Mode Toggle - SwitchListTile( - title: const Text('Dark Mode'), - value: viewModel.isDarkModeEnabled, - onChanged: viewModel.toggleDarkMode, + IconButton( + icon: const Icon(Icons.remove), + onPressed: viewModel + .decrementContinuousModeSteps, // Decrement the number of steps. ), - // Developer Mode Toggle - SwitchListTile( - title: const Text('Developer Mode'), - value: viewModel.isDeveloperModeEnabled, - onChanged: viewModel.toggleDeveloperMode, - ), - // Base URL Configuration - ListTile( - title: const Text('Base URL'), - subtitle: TextFormField( - initialValue: viewModel.baseURL, - onChanged: viewModel.updateBaseURL, - decoration: const InputDecoration( - hintText: 'Enter Base URL', - ), - ), - ), - // Continuous Mode Steps Configuration - ListTile( - title: const Text('Continuous Mode Steps'), - // User can increment or decrement the number of steps using '+' and '-' buttons. - subtitle: Row( - children: [ - IconButton( - icon: const Icon(Icons.remove), - onPressed: viewModel - .decrementContinuousModeSteps, // Decrement the number of steps. - ), - Text('${viewModel.continuousModeSteps} Steps'), - IconButton( - icon: const Icon(Icons.add), - onPressed: viewModel - .incrementContinuousModeSteps, // Increment the number of steps. - ), - ], - ), - ), - ListTile( - title: Text('Sign Out'), - onTap: () { - viewModel.signOut(); - // Optionally, navigate to a different view or show a message - }, + Text('${viewModel.continuousModeSteps} Steps'), + IconButton( + icon: const Icon(Icons.add), + onPressed: viewModel + .incrementContinuousModeSteps, // Increment the number of steps. ), ], - ); - }, - ), + ), + ), + ListTile( + title: Text('Sign Out'), + onTap: () { + viewModel.signOut(); + }, + ), + ], ), ); }