I am working on a SwiftUI app that utilizes AWS Amplify/Cognito for its authentication. I have created a session object that keeps track of whether a user is authenticated. This session object is an ObservableObject that is loaded into environmentObject and accessed by different views. It has a #Published property called isLoggedIn. Within this session object, a listener has been created to capture changes in authentication state which update the value of isLoggedIn. The code compiles and runs as expected but the following run time warning is generated when trying to update the isLoggedIn property when a user logs in:
Publishing changes from background threads is not allowed; make sure
to publish values from the main thread (via operators like
receive(on:)) on model updates.
My question is what is the appropriate way to capture the authentication state and set the value so that is it published via the environmentObject mechanism of SwiftUI? Could I move my listener to AppDelegate and update the Session contained in the environmentObject from there? If so, how do you access environmentObjects outside of views? Is there another cleaner way of capturing the value and introducing it into SwiftUI's environmentObjects? I know I can make an API call to Cognito/Amplify to determine the authentication state of the user but that doesn't fit into the reactive model of SwiftUI or at least I don't see how to fit it in :).
Shown below is the code involved in this process. The first code snippet is for the Session object. The second one shows the session object being put into an enviromentObject within the SceneDelegate. The last snippet shows a view where the object if accessed to make a rendering decision.
Session.swift
class Swift:ObservableObject {
#Published var firstName: String = ""
#Published var lastName: String = ""
#Published var isLoggedIn: Bool = false
init(){
AWSMobileClient.default().addUserStateListener(self) { (userState, info) in
switch (userState) {
case .guest:
self.isLoggedIn = false
case .signedOut:
self.isLoggedIn = false
case .signedIn:
self.isLoggedIn = true
case .signedOutUserPoolsTokenInvalid:
self.isLoggedIn = false
case .signedOutFederatedTokensInvalid:
self.isLoggedIn = false
default:
self.isLoggedIn = false
}
}
}
SceneDelegate.swift
...
let currentSession = Session()
let mainTabView = MainTabView().environmentObject(currentSession)
...
View
struct MyView: View {
#EnvironmentObject var currentSession: Session
var body: some View {
VStack{
if (self.currentSession.isLoggedIn) {
Spacer()
Text("Logged In Content")
Spacer()
}
else{
LoginJoinView()
}
}
}
}
I believe that you need to wrap any code that changes your published properties in DispatchQueue.main.async so that the changes are propagated on the main thread.
DispatchQueue.main.async {
switch (userState) {
case .guest:
self.isLoggedIn = false
case .signedOut:
self.isLoggedIn = false
case .signedIn:
self.isLoggedIn = true
case .signedOutUserPoolsTokenInvalid:
self.isLoggedIn = false
case .signedOutFederatedTokensInvalid:
self.isLoggedIn = false
default:
self.isLoggedIn = false
}
}
Related
i want to implement a step counter in my app, so i search how to make that and i found lot of differents implementations.
I notably found an app on GitHub which works. I have tried to implement this code in my app and in an other "test" app but any of them works and i don't no why.
The problem is caused by the onSensorChanged function of my STEP_COUNTER which is not called.
I have search in all the files of the app and i don't found the problem.
If somebody have a solution...
(I'm french so sorry if it's badly written)
the code i use:
private var sensorManager: SensorManager? = null
// Creating a variable which will give the running status
// and initially given the boolean value as false
private var running = false
// Creating a variable which will counts total steps
// and it has been given the value of 0 float
private var totalSteps = 0f
// Creating a variable which counts previous total
// steps and it has also been given the value of 0 float
private var previousTotalSteps = 0f
//in the onCreate
loadData()
resetSteps()
// Adding a context of SENSOR_SERVICE as Sensor Manager
sensorManager = getSystemService(Context.SENSOR_SERVICE) as SensorManager
override fun onResume() {
super.onResume()
mainHandler.post(pingRunnable)
binding.map.onResume()
running = true
// Returns the number of steps taken by the user since the last reboot while activated
// This sensor requires permission android.permission.ACTIVITY_RECOGNITION.
// So don't forget to add the following permission in AndroidManifest.xml present in manifest folder of the app.
val stepSensor = sensorManager?.getDefaultSensor(Sensor.TYPE_STEP_COUNTER)
if (stepSensor == null) {
// This will give a toast message to the user if there is no sensor in the device
Toast.makeText(this, "No sensor detected on this device", Toast.LENGTH_SHORT).show()
} else {
// Rate suitable for the user interface
sensorManager?.registerListener(this, stepSensor, SensorManager.SENSOR_DELAY_UI)
}
}
override fun onSensorChanged(event: SensorEvent?) {
// Calling the TextView that we made in activity_main.xml
// by the id given to that TextView
var tvStepsTaken = findViewById<TextView>(R.id.step)
if (running) {
totalSteps = event!!.values[0]
// Current steps are calculated by taking the difference of total steps
// and previous steps
val currentSteps = totalSteps.toInt() - previousTotalSteps.toInt()
// It will show the current steps to the user
tvStepsTaken.text = ("$currentSteps")
}
}
private fun resetSteps() {
var resetButton = findViewById<Button>(R.id.reset)
resetButton.setOnClickListener {
// This will give a toast message if the user want to reset the steps
previousTotalSteps = totalSteps
// When the user will click long tap on the screen,
// the steps will be reset to 0
testFragment?.binding?.step?.text = 0.toString()
// This will save the data
saveData()
true
}
}
private fun saveData() {
// Shared Preferences will allow us to save
// and retrieve data in the form of key,value pair.
// In this function we will save data
val sharedPreferences = getSharedPreferences("myPrefs", Context.MODE_PRIVATE)
val editor = sharedPreferences.edit()
editor.putFloat("key1", previousTotalSteps)
editor.apply()
}
private fun loadData() {
// In this function we will retrieve data
val sharedPreferences = getSharedPreferences("myPrefs", Context.MODE_PRIVATE)
val savedNumber = sharedPreferences.getFloat("key1", 0f)
// Log.d is used for debugging purposes
Log.d("MainActivity", "$savedNumber")
previousTotalSteps = savedNumber
}
override fun onAccuracyChanged(sensor: Sensor?, accuracy: Int) {
// We do not have to write anything in this function for this app
}
Our app receives a notification with a PendingIntent that when clicked, opens the following screen:
#Composable
fun IntermediateMonthlyBillings(
onDataAcquired: (AllStatementsByYear) -> Unit,
myEwayLoggedInViewModel: MyEwayLoggedInViewModel = get()
) {
val statementsByYear by myEwayLoggedInViewModel.statementsByYear.observeAsState(null)
if (statementsByYear == null) {
GenericLoader(type = MyLoaderType.LIGHT_BACKGROUND)
} else {
Button(onClick = { onDataAcquired(statementsByYear!!) }) {
Text("hi")
}
}
}
The screen makes an API call to gather some data and at some point, the statementsByYear will be non-null. When that state is reached, I want to call the onDataAcquired() callback which will lead to a navigation instruction in the end. I need this to happen automatically but a simple if(statementsByYear != null) onDataAcquired() won't work since this will be triggered constantly. I couldn't find a side-effect that works for me either. Can you point me in the right direction?
In the example below I've added the button simply for testing that when used this way, everything works fine since the callback is triggered only once (upon clicking the button). The issue is how can I achieve this without the need for interactions.
LaunchedEffect with statementsByYear == null key would run twice . First when statement is true then it changes to false
LaunchedEffect(statementsByYear == null) {
if (statementsByYear == null) {
GenericLoader(type = MyLoaderType.LIGHT_BACKGROUND)
} else {
onDataAcquired(statementsByYear!!)
}
}
Although answer above is correct, instead of placing a Composable inside LaunchedEffect, it's a remember under the hood, i would go with
LaunchedEffect(statementsByYear != null) {
if (statementsByYear != null) {
onDataAcquired(statementsByYear!!)
}
}
if (statementsByYear == null) {
GenericLoader(type = MyLoaderType.LIGHT_BACKGROUND)
}
Recently, i did a flutter course.
The instructor was making the get request from an API so difficult. For a hybrid framework like flutter i never thought it's so difficult.
below are my code. I am using provider for state management.
Future<void> fetchAndSetProducts() async {
try {
const url = 'fetch-url';
final response = await http.get(url);
final data = json.decode(response.body) as Map<String, dynamic>;
final List<Product> loadedProducts = [];
data.forEach((key, value) {
loadedProducts.add(Product(
id: key,
title: value['title'],
description: value['description'],
imageUrl: value['imageUrl'],
price: value['price'],
isFavorite: value['isFavorite'],
));
});
_items = loadedProducts;
notifyListeners();
} catch (error) {
throw (error);
}
}
And in the products overview screen were I am showing the products page this method is called like below:
bool _isInit = true;
bool _isLoading = false;
#override
void didChangeDependencies() {
if (_isInit) {
setState(() {
_isLoading = true;
});
Provider.of<Products>(context).fetchAndSetProducts().then((_) => {
setState(() {
_isLoading = false;
})
});
}
_isInit = false;
super.didChangeDependencies();
}
The other method included a sneaky way of using duration of zero just like we use in javascript set timeout giving a zero time.
It's worth noting that in didChangeDependencies we could not use async await, so most probably a call back hell awaits.
Also a variable needs to be initialized just for calling the api once upon loading.
Is there no easy solution to this? Or an industry way of dealing with this?
here is a minimal working example of what you can do, it's not the best thing in the world, but this is what works for me, let me know if you can make it any better.
The answer to your problem is really simple, BUT, you need to rearrange some stuff first.
A Flutter app can be split into multiple layers which are (just for example) data, state management and UI, in the data layer you will have all methods that communicate with the API, and you call them inside the state management solution (which is provider in your case), the result will be accessible from the provider which will save the data in a variable, then the UI will be able to retrieve these data from the provider, this seems a bit redundant I know, but there is a reason why we do that, if you put the API call inside the provider itself, and there is somewhere else in your app that uses the same endpoint then you will have duplicate code, as for the provider, it's the place where your data is stored in the runtime, these data are what makes the state of your app, finally, the UI can handle displaying data from the provider easily, just make a boolean in the provider that indicates if the API call is executing/loading or not, and inside the consumer in the UI display different widgets based on the boolean.
If we were to visualize the flow of the operation it would be like this:
1- action from the UI that triggers a method from the provider.
2- inside the provider method you will set the boolean indicating that the API call is executing to true and call notifyListeners().
3- call the API request and call .then() on it.
4- inside the .then() set the boolean to false to notify that the call is over and set the received data to a variable inside the provider and call notifyListeners again.
5- in the UI you should have a consumer listening to your provider and handling the boolean, if its true then display a CircularProgressIndicator for example, and if it's false then display your desired widget
Regarding the context in the initState you can fix this problem in 3 ways:
1- using WidgetsBinding.instance
.addPostFrameCallback((_) => yourProviderFunction(context));
2- by registering your provider in a service locator so you don't have to use a context at all. (which is what I used in the example project I posted above)
3- by executing the desired function in the constructor of the provider, so when its initialized the API request will be called
Is this the Academind course?
Also this is the correct way.
For using a Provider you need the context.
EDIT: Added BaselAbuhadrous' comment to the answer.
You need to use didChangeDependencies because the initState actually provides the context, but the screen layout isn't built yet, so you get an error, but if you used WidgetsBindings.instance and call the provider inside of it, then you won't get the error.
//your model , product_model.dart
import 'dart:convert';
List<Product> availableTicketsFromJson(String str) => List<Product>.from(json.decode(str).map((x) => Product.fromJson(x)));
class Product {
String title;
String description;
String imageUrl;
double price;
bool isFavorite;
Product(
{this.title,
this.description,
this.imageUrl,
this.price,
this.isFavorite});
factory Product.fromJson(Map<String, dynamic> json) => Product(
title: json['title'] as String,
description: json['description'] as String,
imageUrl: json['imageUrl'] as String,
price: json['price'] as double,
isFavorite: json['isFavorite'] as bool,
);
}
//viewmodel class
final String url = "test.com";
Future<List<Product> fetchProducts() async {
List<Product> products = List<Product>();
try {
final request = await http.get(url);
if(request.statusCode == 200) {
products = productsFromJson(request.body.toString());
notifyListeners();
} else {
print(request.statusCode.toString());
}
} catch(e) {
return List<Product>();
}
return products;
}
//fetch_data.dart
Create your instance of provider in the page that you wanna fetch the data:
Under State<yourWidget>
=> FetchDataViewModel _model;
List<Product> products = [];
under build method
=> _model = Provider.of<FetchDataViewModel>(context,listen: false);
Make a http request with FutureBuilder
FutureBuilder(future:_model.fetchProducts()),
builder: (context,snapshot)){
if(snapshot.connectionState == ConnectionState.done) {
products = snapshot.data;
if(products.length > 0) {
return ListView.builder(
itemCount: products.length,
itemBuilder : (context,index) {
return _items();
}
);
} else {return _noSavedDataWidget();}
}
}
You can test such a code
sometimes
Provider.of<'providerClassName'>(context, listen : false).'providerFunction'
might help.
I'm attempting to manually validate an object which is updated via a customEvent.
//home.html
<type-ahead change.delegate="updateValue($event.detail, true/false)"></type-ahead>
I have two of the above elements, which I want to assign to the properties of origin and destination based on a boolean value.
I also want to validate both of these properties against the same custom rule, which I've defined in setupValidation on my viewmodel below.
Both of these are objects, that need some complex validation (I've simplified it for demonstration purposes), so I've used .ensureObject() and manually add both of these objects to the validation controller.
I would expect that I would only have to add the objects once (during my initial setupValidation(), but I've found that I have to remove, and then re-add the object to the validation controller whenever it changes.
If you look at updateValue(...), you'll see that I'm expecting this.destination to validate to the updated object, but I'm seeing my results still be null on validation. However, this.origin does update and the validation succeeds (as I'm manually updating the controller).
I would expect not to have to manually update the controller. Is this expected?
//home.ts
#autoinject
export class Home {
origin = null;
destination = null;
private controller: ValidationController;
public canSubmit: boolean = false;
public error: string;
private rules;
constructor(controllerFactory: ValidationControllerFactory) {
this.controller = controllerFactory.createForCurrentScope();
this.controller.validateTrigger = validateTrigger.manual;
}
bind() {
this.setupValidation();
}
private validate() {
this.controller.validate()
.then(results => {
this.canSubmit = results.valid;
});
}
private setupValidation() {
ValidationRules.customRule(
'rule1',
(value) => {
if(value.property && value.property.length === 3)
return true;
else
return false;
},
`\${$displayName} must be 3 characters long`
);
this.rules = ValidationRules
.ensureObject()
.required()
.satisfiesRule('rule1')
.rules;
this.controller.addObject(this.origin, this.rules);
this.controller.addObject(this.destination, this.rules);
}
updateValue(newValue, isOrigin) {
if(isOrigin) {
this.controller.removeObject(this.origin);
this.origin = newValue;
this.controller.addObject(this.origin, this.rules);
}
else
this.destination = newValue;
this.validate();
}
}
Thank you, let me know if there are any additional details needed.
Is there any workaround to know where a CGpath (created using an array of co-ordinates) is closed.
I was not able to find any suitable method in the header CGPath.
I wish to track the path traced by user .If its a closed loop, then i wish to extract that part from the context. Something like masking or clipping the context but it should be user tracked clipping.
Thanks!
In fact, a path can consist of multiple subpaths. A new subpath is created when you move the path's current point without connecting the two points. For the path to be closed, all its subpaths must in fact be closed.
extension CGPath {
/// Note that adding a line or curve to the start point of the current
/// subpath does not close it. This can be visualized by stroking such a
/// path with a line cap of `.butt`.
public var isClosed: Bool {
var completedSubpathsWereClosed = true
var currentSubpathIsClosed = true
self.applyWithBlock({ pointer in
let element = pointer.pointee
switch element.type {
case .moveToPoint:
if !currentSubpathIsClosed {
completedSubpathsWereClosed = false
}
currentSubpathIsClosed = true
case .addLineToPoint, .addQuadCurveToPoint, .addCurveToPoint:
currentSubpathIsClosed = false
case .closeSubpath:
currentSubpathIsClosed = true
}
})
return completedSubpathsWereClosed && currentSubpathIsClosed
}
}
Just in case you've been stuck on this for the last 4 1/2 years, here is how to do it in Swift 3. I have borrowed heavily from this answer. I really just added the isClosed() function.
extension CGPath {
func isClosed() -> Bool {
var isClosed = false
forEach { element in
if element.type == .closeSubpath { isClosed = true }
}
return isClosed
}
func forEach( body: #convention(block) (CGPathElement) -> Void) {
typealias Body = #convention(block) (CGPathElement) -> Void
let callback: #convention(c) (UnsafeMutableRawPointer, UnsafePointer<CGPathElement>) -> Void = { (info, element) in
let body = unsafeBitCast(info, to: Body.self)
body(element.pointee)
}
print(MemoryLayout.size(ofValue: body))
let unsafeBody = unsafeBitCast(body, to: UnsafeMutableRawPointer.self)
self.apply(info: unsafeBody, function: unsafeBitCast(callback, to: CGPathApplierFunction.self))
}
}
And assuming path is a CGPath or CGMutablePath, here is how you use it:
path.isClosed()