failed to display user's data in react native - image

I am building an app in react native CRNA and I got this error after I call for the registered user's profile picture.
calls to require expect exactly 1 string literal argument, but this
was found: require(this.state.pict)
I'm kinda confused how to call the item of user's info from the API. This is my code to get the user's data.
fetch('someurl', {
method: 'GET',
headers:{
Authorization: 'token',
}
})
.then((response)=> response.json())
.then((responseJson)=> {
this.setState({
students: responseJson.data,
loading: false,
})
})
.catch((error)=>{
console.log(error);
});
I put that code on the componentDidMount() and call this.state.pict in the image source but got the previous error. Can someone please tell me what's wrong? I'm so stuck.. thank you so much.

React-native supports two types of image sources, local and network.
For local sources you use require. For example:
<Image source={require('main/assets/images/your-image.jpg')}/>
For network resources you must use uri object. For example:
<Image source={{uri:'https://imgur.com/gallery/Fepmd4K'}/>
Notice that source for local images accepts require with string passed as a parameter, while source for network images require object with uri parameter.
You can read more here: https://facebook.github.io/react-native/docs/images
Regarding your problem, first try to console.log this.state.pic and see what format is it in and match that with the above examples and it should work.

Related

How to integrate Google Picker with new Google Identity Services JavaScript library

Because of the known issue described in here (https://developers.google.com/identity/sign-in/web/troubleshooting) I want to update my application to be using the new gsi sign-in that uses less cookies than the previous versions and therefore might have the solution for the mentioned error...
My problem is that there's little to no documentation on how to integrate google picker with the new gsi.
I used to use gapi for some picker-related code like even loading the library gapi.load('picker', () => {}). The migration doc says to replace the apis.google.com/js/api.js with the new gsi url, and a lot of other methods such as googleAuth.signIn or gapi.client.init are now to be deprecated by 2023. But then:
How to load picker without gapi available? Or gapi still needs to be imported but will not contain any sign-in related methods?
How will I pass apiKey and scopes to be able to init googlePicker?
For methods such as GoogleAuth.isSignedIn docs simply states "Remove. A user's current sign-in status on Google is unavailable. Users must be signed-in to Google for consent and sign-in moments." what does that even mean? I need to check if user is signed in in order to not show again the popup every time they want to upload a file from gPicker...
Before, we used to have a access_token on the callback of a reloadAuthResponse or a signIn, now how do we get the token?
Sorry for the question being confusing, I'm very confused with everything. Any input helps, thanks!
I came across https://developers.google.com/identity/oauth2/web/guides/use-token-model through: How to use scoped APIs with (GSI) Google Identity Services
I changed our code to load this script: https://accounts.google.com/gsi/client, and then modified the our "authorize" function (see below) to use window.google.accounts.oauth2.initTokenClient instead of window.gapi.auth2.authorize to get the access_token.
Note that the callback has moved from the second argument of the window.gapi.auth2.authorize function to the callback property of the first argument of the window.google.accounts.oauth2.initTokenClient function.
After calling tokenClient.requestAccessToken() (see below), the callback passed to window.gapi.auth2.authorize is called with an object containing access_token.
const authorize = () =>
- new Promise(res => window.gapi.auth2.authorize({
- client_id: GOOGLE_CLIENT_ID,
- scope: GOOGLE_DRIVE_SCOPE
- }, res));
+ new Promise(res => {
+ const tokenClient = window.google.accounts.oauth2.initTokenClient({
+ client_id: GOOGLE_CLIENT_ID,
+ scope: GOOGLE_DRIVE_SCOPE,
+ callback: res,
+ });
+ tokenClient.requestAccessToken();
+ });
The way access_token is used was not changed:
new window.google.picker.PickerBuilder().setOAuthToken(access_token)
#piannone is correct, adding to their answer:
You'll still need to load 'client' code, as you're using authentication. That means you'll still include https://apis.google.com/js/api.js in your list of scripts. Only don't load 'auth2'. So, while you won't do:
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
you will need to:
gapi.load('client', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
(this is instead of directly loading https://accounts.google.com/gsi/client.js I guess.)

$.ajax logs red errors even though .fail is being used

I have a generic function for getting some text data, and it uses $.ajax to try and get this data from several possible locations. This function contains a promise which is returned and is used in later code in various ways among which is pushing several of these results into an array and processing them with Promise.all.
It seems to be going well except for the fact that on some of the items I am getting some red dev console errors - although I'm using a .fail function which supposedly should catch these errors and prevent the red text from appearing in the console.
function getDataText(url, type, locationKey, dataName){
return new Promise((resolve, reject) => {
$.ajax({
url : url,
dataType : type,
timeout: 500
}).fail((err) => {
console.log(`getDataText(): REJECTED!\t${url}`);
reject(new Error(`Could not get '${url}' from location ${locationKey}`));
}).done((data) => {
console.log(`getDataText(): RESOLVED!\t${url}`);
resolve({ data : data, path : url });
});
});
}
What it does is log the red errors first and then it says my "REJECTED" message on the next line. What I'm expecting is no red text at all because I'm supposed to be catching them - my "REJECTED" message should be enough I think.
Is this normal, or am I missing something?
I will also add: this does not happen for all of the rejected items! It happens for exactly these two:
A CORS policy-blocked file, where the URL is a local path starting with "C:..." which is expected at the location for which this is at.
A 404 non-found error for a Mac file-path starting with "/Volumes/" where the ajax request automatically prepends the "http://localhost" part because as I'm running this on my localhost, and it thinks the file will start from there (this was used when testing on simple local HTML file as opposed to served).
Interestingly the rejected items which do not have the red error are both files which were located on other computers and started with "http://[network IP address]". I am wondering if there's not something simple which could be done to help catch those first two...

Creating a simple, basic page object in Nightwatch.js

Ok, so I've read up on the use of page_objects in nightwatch.js, but I'm still getting issues with it (which I'm convinced is due to something obvious and/or simple).
Using http://nightwatchjs.org/guide/#page-objects as the guide, I added the the file cookieremoval.js in my page_objects folder.
module.exports = {
elements: {
removeCookies: {
selector: '.banner_continue--2NyXA'
}
}
}
In my nightwatch.conf.js file I have;
page_objects_path: "tests/functional/config/page_objects",
And in my test script I have;
module.exports = {
"/cars/road-tax redirects to /car-tax/ ": browser => {
browser.url(browser.launch_url + browser.globals.carReviews)
.assert.urlEquals(browser.launchUrl + "/car-reviews/")
.waitForElementPresent('#cookieRemove', 3000)
.click('#cookieRemove')
.end();
},
};
However, when I run the test, I keep getting an error reading;
Timed out while waiting for element <#cookieRemove>
Any ideas why this is not working?
Many thanks
First of all, you never instantiated your page object. You're asking the browser object to search for an unknown element, that's why it's timing out. Your code should look something like this in your test script: var cookieRemoval = browser.page.cookieremoval(); then use this object to access those variables and functions in your page object. For example, if you wanted to access the remove cookie element, then you would do this cookieRemoval.click('#removeCookies');.
Secondly, you will have to know when to use the global browser object and when to use your page object. If you need to access something within your page object, obviously use the page object to call a function or access a variable. Otherwise, browser won't know the element you're looking for exists. Hope this help you out, I would definitely spend some more time learning about objects and specifically how they're used in nightwatch.js.

Entity not Found Error in Google Classroom when creating assignment with STUDENT_COPY material

I'm programmatically submitting a Google Classroom assignment, and I'm seeing different behavior when attach a Material using the STUDENT_COPY shareMode than when I use the VIEW shareMode.
The following code seems to be working fine:
var resource = {
title: name,
description: explanation,
workType: 'ASSIGNMENT',
state: 'PUBLISHED'
};
resource.materials = [];
resource.materials.push({
driveFile: {
driveFile: {
id: 'fileId'
},
shareMode: 'VIEW'
}
});
var params = {auth: creds, courseId: courseId, resource: resource};
classroom.courses.courseWork.create(params, function (err, courseWorkResponse) {
/* handle response */
}
With that code, the assignment gets created and I can see it in Google Classroom. However, if I set the shareMode to STUDENT_COPY instead of VIEW, I get the following error:
{ Error: Requested entity was not found.
at Request._callback (/Users/.../node_modules/googleapis/node_modules/google-auth-library/lib/transporters.js:85:15)
at Request.self.callback (/Users/.../node_modules/googleapis/node_modules/request/request.js:188:22)
at emitTwo (events.js:106:13)
at Request.emit (events.js:191:7)
at Request.<anonymous> (/Users.../node_modules/googleapis/node_modules/request/request.js:1171:10)
at emitOne (events.js:96:13)
at Request.emit (events.js:188:7)
at IncomingMessage.<anonymous> (/Users/.../node_modules/googleapis/node_modules/request/request.js:1091:12)
at IncomingMessage.g (events.js:292:16)
at emitNone (events.js:91:20)
code: 404,
errors:
[ { message: 'Requested entity was not found.',
domain: 'global',
reason: 'notFound' } ] }
The assignment is not being created in Google Classrom. However, I am seeing a [Template] copy of the Google Doc I specified in the driveFile.id being placed into my Google Drive.
I've tried this with several different documents, some of which were basically "Hello World"-level google docs, so I doubt the issue is related to the document.
Other than that, I'm not sure what could be going on. I assume there must be some sort of permissions issue somewhere, but does anybody else have a clue what might be going on?
EDIT: Further information
It seems to be an issue with "publishing" the assignment. If I set the resource.state to DRAFT, I'm able to successfully execute the coursework.create API call. I get back an instance of a CourseWork object as expected.
The problem is I need to ultimately PUBLISH the assignment. And when I try to execute the classroom.courses.courseWork.patch() api call to simply change the state from DRAFT to PUBLISHED, I end up getting the same Requested entity was not found error.
However I am able to go into Google Classroom itself, view my drafts, and click on the ASSIGN button in the application. If I do that, everything finally works! That UI flow is no good for me, though. But it does indicate that there's nothing inherently wrong, as far as I can tell, with the assignment. I just seem to be missing some (undocumented?) step that's necessary in my case.
This happens because entity does not exist yet because the students haven't accessed the assignmend yet in the classroom. So make sure they do and try again.
Reference:
Drive files that correspond to materials with a share mode of
STUDENT_COPY may not exist yet if the student has not accessed the
assignment in Classroom.

AWS S3 API - Objects doesn't contains Metadata

trying to figure AWS S3 API and failing miserably...
I currently got a bucket which consist lots of videos.
I need to request all the videos as an object, that will have the video meta-data which I set once uploading, and the link to share the video.
Problem is I'm getting the object without any of the above...
What Iv'e got so far -
AWS.config.update({accessKeyId: 'id', secretAccessKey: 'key', region: 'eu-
west-1'});
var s3 = new AWS.S3();
var params = {
Bucket: 'Bucket-name',
Delimiter: '/',
Prefix: 'resource/folder-with-videos/'
}
s3.listObjects(params, function (err, data) {
if(err)throw err;
console.log(data);
});
Thanks for reading :)
UPDATE - found that when using getObject and adding ExposeHeader to the CORS setting I can indeed get the metadata I set.
problem is getObject only works on a specific Object (video in my case).
any Idea how I can get all the object like listObject and have values of each object like I do on getObject?
Only solution I can think of is doing listObject to get a list of all the objects, and then by this result to do for each object an getObject ajax?... rip UX
thanks :)
A couple of things to sort out first.
As per the documentation, http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property listObjects API returns exactly what is mentioned in the callback parameters. Using a delimiter causes the S3 to list objects only one level below the prefix given. It won't traverse all objects recursively.
In order to get the URL, you can use http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#getSignedUrl-property. I am not really sure what you meant by meta-data.

Resources