aljaz/Auto-GPT
1
0
Fork 0
mirror of https://github.com/aljazceru/Auto-GPT.git synced 2026-01-31 11:54:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor SettingsView to Accept External ViewModel

Browse Source 
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.
This commit is contained in:
hunteraraujo
2023-09-24 13:31:47 -07:00
parent 9bd06cefdd
commit 9463fbbe2b
3 changed files with 65 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/lib/main.dart
View File

@@ -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<ChatService>(context, listen: false))),

4
frontend/lib/views/main_layout.dart
View File

@@ -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<TaskViewModel>(context);
final chatViewModel = Provider.of<ChatViewModel>(context);
final settingsViewModel = Provider.of<SettingsViewModel>(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

123
frontend/lib/views/settings/settings_view.dart
View File

@@ -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<SettingsViewModel>(
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();
},
),
],
),
);
}