Submit POST to Facebook with Graph API issue - javascript

I'm a junior dev and new to Facebook for Developers, I'm struggling a bit with the Graph API. I went back and forth with the Docs, and I used the code it provided, but it doesn't seem to be fulfilling the need.
I'm making a React app, and part of it is I'd like to be able to submit a post, AKA a POST request, to the Users own Facebook Page with the text box I've made (using DevExtreme's HTML editor) I went through all the reading to target the specific users page as opposed to a Page...Page, and I'm 99% sure my syntax is ok but something is clearly off.
The goal is on the 'click' of the submit button, submit the value of the text inside the text box. You'll see in the FB.api section I have a console.log, and it is returning the 'response' - but it's just the Users name/profile ID, not any info associated with the post like the time created or the post ID. Based on that, I think I'm connected to some part of Facebook's API but it's just not the part I want! Am I doing something backwards here?
/*global FB*/
import React from 'react';
import HtmlEditor, { Toolbar, MediaResizing, Item } from 'devextreme-react/html-editor';
import Button from 'react-bootstrap/Button'
import $ from 'jquery'
const headerValues = [false, 1, 2, 3, 4, 5];
var message = $('.ql-editor .ql-blank .dx-htmleditor-content').text();
const created_time = new Date()
created_time.toUTCString();
function postSubmit() {
FB.api(
'/me',
'POST',
{ "fields":"id,name,posts", "message": message },
function(response) {
response.posts.data.push(message, created_time)
}
);
}
class Poster extends React.Component {
constructor() {
super();
this.state = {
isMultiline: true,
};
}
render() {
return (
<div className="widget-container">
<HtmlEditor
height="500px"
width="500px"
defaultValue={message}
>
<MediaResizing enabled={true} />
<Toolbar>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item
name="header"
acceptedValues={headerValues}
/>
<Item name="separator" />
<Item name="bold" />
<Item name="italic" />
<Item name="strike" />
<Item name="underline" />
<Item name="separator" />
<Item name="alignLeft" />
<Item name="alignCenter" />
<Item name="alignRight" />
<Item name="alignJustify" />
<Item name="separator" />
<Item
widget="dxButton"
options={this.toolbarButtonOptions}
/>
</Toolbar>
</HtmlEditor>
<Button onClick={postSubmit}>Click To Submit</Button>
</div>
);
}
}
export default Poster;

Related

How can I access the values of the props in my component?

I have this jsx component ArticleListItem which receives data as props and displays it. When I run my web app, I get this error: Objects are not valid as a React child. How should I handle the props to access them the way I'm trying.
Here's the ArticleListItem component which throws the error:
import { Link } from 'react-router-dom';
import { Button, Icon, Item, Segment, SegmentGroup } from 'semantic-ui-react';
export default function ArticleListItem(props) {
return(
<SegmentGroup>
<Segment>
<Item>
<Item.Header>
{props.article.title}
</Item.Header>
<Item.Content>
{props.article.description}
</Item.Content>
</Item>
</Segment>
<Segment>
<span>
<Icon name='clock' /> {props.article.publishedAt}
<Icon name='newspaper' /> {props.article.author}
</span>
</Segment>
<Segment>
<span>
<Icon name='globe' /> <Button>
as={Link}
to={props.article.url}
color='teal'
floated='right'
content='View' </Button>
</span>
</Segment>
</SegmentGroup>
)
}
Here's an example of the props
{
"source": {
"id": "business-insider",
"name": "Business Insider"
},
"author": "Diamond Naga Siu",
"title": "See how much Apple pays engineers, analysts and thousands of others",
"description": "Insider analyzed thousands of Apple's H-1B visa applications to get a sense of how much it pays employees.",
"url": "http://www.businessinsider.com/see-how-much-apple-pays-engineers-analysts-and-thousands-others-2022-9",
"urlToImage": "https://i.insider.com/633222528345c90018de0060?width=1200&format=jpeg",
"publishedAt": "2022-09-28T12:00:00Z",
"content": null
}
And here's the code block where I'm passing the props to this component:
return (
<>
{props.articles && props.articles.map(article => (<ArticleListItem key={article.title} article={article} />
))}
</>
)
The idea of my web app is to fetch news from my api and to show them. I get an array of news, map over them and create an ArticleListItem for each of them.
Any help appreciated!
Your props are not inside the button tag. The ">" tag was misplaced
<Button
as={Link}
to={props.article.url}
color='teal'
floated='right'
content='View'>
Test
</Button>

How to use mapping in React JS for Image

Hi guys so I'm trying to make some web page about hotel room information using React JS and I wanted to change the name, description, image of the page depending on the room type the user choose. But I don't know how to map the image, can somebody help me to do the mapping ?
I haven't make the button tag to change the room type yet.
Here's my room.js code:
import React from 'react'
import {Row, Col, Container} from "react-bootstrap"
const RoomInfo = [
{
MainPhoto:"",
RoomType:"Superior Twin",
RoomDescription:"",
LittlePhoto:'Photo1.jpg'
},
{
MainPhoto:"",
RoomType:"Double Room Twin",
RoomDescription:"",
LittlePhoto:'Photo1.jpg'
},
]
const Room = () => {
return (
<>
<Container fluid={true} className="p-0">
<Row>
<Col>
<h1 className="text-center"> Check out our room</h1>
</Col>
</Row>
</Container>
</>
)
}
export default Room
I hope I understand your question correctly.
you can do <img src={variable} /> and than assign the variable the link to the picture.
You can using map array like this to render element from an array:
...
<h1 className="text-center"> Check out our room</h1>
{
RoomInfo.map((item, i) => {
return (
<div key={i}>
<img src={item.LittlePhoto} />
</div>
);
});
}
...

How to show up DeleteButton in react-admin? And not only the last stuff loading from database?

I started using javascript and React for a small project based on REST. So I tried to show some datas from my database in a browser, but only the last Product shows up 7 times (only 7 products are in the database). And additionally the DeleteButton don't want to show up, and when I try to have a look on a product from web browser (through EditButton), it says Element does not exist. This last should be because it want to redirect http://localhost:5000/orders/undefined. So maybe it can't get the ID of a product?
Here is the code for the DeleteButton part:
import React from 'react';
import {List, Datagrid, TextField, NumberField, ImageField, EditButton, DeleteButton} from 'react-admin';
const ProductList = (props) => {
return <List {...props}>
<Datagrid>
<TextField label = 'ID' source = '_id' />
<TextField source = 'title' />
<NumberField source = 'year' />
<TextField source = 'author' />
<ImageField source = 'productImage' />
<EditButton basePath = '/products' />
<DeleteButton basePath = '/products' />
</Datagrid>
</List>
};
export default ProductList;
Thanks,

Adding more than one buttons on headerRight in react-native

I am new to react-native. Here I am trying to add two buttons on headerRight. I did add one button but I could not figure out how to put more than one. Something like this.
I am using react-navigaiton and react-navigation-header-buttons.
This is how I added one button.
mainScreen
headerRight: (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title={"Search"}
iconName={"md-search"}
onPress={() => {
console.log('Search')
}}
/>
</HeaderButtons>
),
CustomHeaderButton.js
import {HeaderButton, Item} from 'react-navigation-header-buttons';
import {Ionicons} from '#expo/vector-icons';
const CustomHeaderButton = props => {
return(
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color={'black'}
/>
)
};
export default CustomHeaderButton;
You're on the right track. You should be able to simply add another Item with whatever title, icon, onPress functionality you want wrapped in the HeaderButtons component like this:
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title={"Search"}
iconName={"md-search"}
onPress={() => {
console.log('Search')
}}
/>
<Item
title={"Other Button"}
iconName={"other-icon-name"}
onPress={() => {
console.log('The other header icon was pressed.')
}}
/>
</HeaderButtons>
You are able to nest multiple React elements within a React element, which is what this example uses. For instance, you can nest multiple Text elements inside of a View.
It looks like you are using the react-navigation-header-buttons package, here is their example with multiple header icons for your reference as well: https://github.com/vonovak/react-navigation-header-buttons/blob/master/example/screens/UsageCustom.tsx

Calling a Component Via a Prop in ReactJS

I am creating a wrapper component for icons that I import using react-icons. Here is an example of how it looks right now:
import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements
<Icon>
<Twitter />
<Icon>
Now, this works just as I want it to -- but I would like to simplify the code. Ideally, I'd like it to look/work like this:
<Icon name='twitter' />
Any idea how to do this?
NOTE: In case it helps, here is current code for my Icon component:
export const Icon = props => <IconBase {...props} />
The <IconBase> component is just some styles from styled-components.
UPDATE
I just want to note that the Twitter example is just that -- an example. I'm looking for a solution that will work no matter what name I pass to the <Icon> component. So, in other words, all of the following (and more) will work:
<Icon name="Facebook" />
<Icon name="Search" />
<Icon name="Menu" />
Each of these would be equivalent to:
<Icon><Facebook /></Icon>
<Icon><Search /></Icon>
<Icon><Menu /></Icon>
In other words, no matter what icon I pull in from react-icons, it will render properly vis-a-vis the name prop.
What about this?
// definition:
const Icon = (props) => <SomeIconWrapper><props.glyph /></SomeIconWrapper>;
// usage:
<Icon glyph={Twitter} />
It is super simple and flexible, no need for any dictionary or so.
I think something like this would satisfy your condition.
const App = () => <Icon name="twitter" />;
const dict = { twitter: <Twitter /> };
const Icon = ({ name }) => <IconBase>{dict[name]}</IconBase>;

Categories