How does one delete a post with the react-activity-feed client for GetStream?
The StreamApp component passes a function down to the FlatFeed and the Activity component called onRemoveActivity. This is a function that takes an activity's id and removes that.
So you could do something like this to remove an activity:
<StreamApp
apiKey=""
appId=""
token=""
>
<FlatFeed
Activity={(props) => (
<Activity
{...props}
Footer={() => (
<React.Fragment>
<button onClick={() => props.onRemoveActivity(props.activity.id)}>
delete
</button>
</React.Fragment>
)}
/>
)}
/>
</StreamApp>
Related
I can not open new task (form page) by these links as I have set same links in app.js and to tag in my button component.
Help needed please .
FRONTEND
**App.js**
routes = (
<Route path="/tasks/new">
<NewTask />
</Route>
)```
**Components/PlaceItem**
{auth.userId === props.creatorId && (
// <Button to={`/tasks/${props.id}`}>ADD TASK</Button>
// <Button to={`/tasks/new/${props.id}`}>ADD TASK</Button>
<Button to={"/tasks/new"}>ADD TASK</Button>
)}
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. at withAuthenticationRequired
export const AdminRoute = ({ component: Component, navbar: Navbar, ...props }) => {
console.log('props==>', props.dynamicClass);
let dynamicClass = `wrapper ${props.dynamicClass}`
return (
<Route
{...props}
render={(props) => (
<MediaQuery minWidth={800}>
{(matches) => {
return (
<React.Fragment>
<WithAuthenticationRequired>
<div className={dynamicClass}>
<Navbar />
<Component {...props} />
<Footer />
</div>
</WithAuthenticationRequired>
</React.Fragment>
);
}}
</MediaQuery>
)}
/>
);
};
What you are passing into MediaQuery is a function definition (as state by the error).
The components you are returning will only be returned once this function is called. Following is one way to force the call(does not work with arrow functions):
<MediaQuery minWidth={800}>
{(function (matches) {
return (
<React.Fragment>
<WithAuthenticationRequired>
<div className={dynamicClass}>
<Navbar />
<Component {...props} />
<Footer />
</div>
</WithAuthenticationRequired>
</React.Fragment>
);
})()}
</MediaQuery>;
Or you can do something like creating a new function that returns the components you need, and then calling that function within <MediaQuery>:
<MediaQuery minWidth={800}>{getFragment(matches)}</MediaQuery>;
const getFragment = (matches) => {
return (
<React.Fragment>
<WithAuthenticationRequired>
<div className={dynamicClass}>
<Navbar />
<Component {...props} />
<Footer />
</div>
</WithAuthenticationRequired>
</React.Fragment>
);
};
I am trying to render a single draft once I click the modal, instead of navigating to the other component... if that makes sense... im getting to display it but then it redirects me because of the Link.. but if i dont add the Link then I loose my draftId on url
This is part of my code
class Drafts extends React.Component {
componentDidMount() {
this.props.fetchAllDrafts()
}
render() {
const drafts = this.props.drafts
return (
<React.Fragment>
<Table aria-label="a dense table" className="myaccount-table">
<TableHead>
<TableRow>
<TableCell align="center">
<div className="date-content">Date</div>
</TableCell>
<TableCell align="center">Content</TableCell>
<TableCell> </TableCell>
<TableCell> </TableCell>
</TableRow>
</TableHead>
<TableBody>
{drafts.map((draft) => (
<TableRow key={draft.id}>
<TableCell>
<div className="datecontent">{draft.createdAt}</div>
</TableCell>
<TableCell>
<div className="content">{draft.content} </div>
</TableCell>
<TableCell>
<Link to={`/drafts/${draft.id}`}>
<Popup
trigger={<button className="button"> Read </button>}
modal
nested
>
<SingleDraft />
{/* <Button color="primary">
Read
</Button> */}
</Popup>
</Link>
the is comming from another class component
class SingleDraft extends React.Component {
constructor() {
super()
}
componentDidMount() {
this.props.fetchDraft(this.props.match.params.draftId)
}
render() {
return (
<div>
<p>{this.props.singleDraft.content} </p>
<Link to={`/texteditor/${this.props.singleDraft.id}`}>
<button>Update</button>
</Link>
</div>
)
}
Why don't you pass the draftId as a prop?
<Popup
trigger={<button className="button"> Read </button>}
modal
nested
>
<SingleDraft draftId={draft.id} />
{/* <Button color="primary">Read</Button> */}
</Popup>
And in your component.
componentDidMount() {
this.props.fetchDraft(this.props.draftId)
}
I have the following page:
const GalleryPage: NextPage = () => {
const router = useRouter();
const id = router.query.id as string;
return (
<Gallery id={id} imageUrl="someRandomImageUrl.png" />
);
};
And within the Gallery Component, I have
...
return (
<div>
<Form
onSubmit={handleSubmit}
name="judging"
>
<input type="hidden" name="form-name" value="judging" />
<Container text style={{ marginTop: '2em' }} textAlign="center">
<Image src={galleryProps?.imageUrl} size="medium" verticalAlign="middle" />
<Table singleLine>
<Table.Header>
<TableHeader />
</Table.Header>
<Table.Body>
<TableRow
title="Composition"
name="composition"
item={composition}
setItem={setComposition}
/>
<TableRow
title="Creativity - Originality"
name="creativity"
item={creativity}
setItem={setCreativity}
/>
<TableRow
title="Neatness - Finishing details"
name="neatness"
item={neatness}
setItem={setNeatness}
/>
</Table.Body>
</Table>
</Container>
<Container text style={{ marginTop: '1em' }} textAlign="center">
<p>
<Button type="submit">Submit</Button>
</p>
</Container>
</Form>
</div>
);
Where TableRow and TableHeader are custom components.
What I can't seem to make happen
I have an array of image URLs:
const imageUrls = ['firstImageUrl.png', 'secondImageUrl.jpeg', 'thirdImageUrl.png']
And for each item in the imageUrls, I want to display the Gallery component. And only once the form in the Gallery is submitted, do I want the next instance to display with the following image.
ie:
firstcase: <Gallery id={id} imageUrl="firstImageUrl.png" /> once form submitted, second case
secondcase: <Gallery id={id} imageUrl="secondImageUrl.jpeg" /> once form submitted, third case ...
You can create a state called galleryIndex that starts of as 0 and then to gallery you pass a function prop called onSumbit and inside there you increase the state galleryIndex by 1 and then inside the Gallery page you set imageUrl on Gallery component to be the element from the array imageUrls at the index galleryIndex
Actually when ever a person click's on Sign in Button the link change but the component on that page does not renders
App.js
import { BrowserRouter as Switch, Route } from 'react-router-dom';
const App = () => (
<Switch>
<Route path="/" exact component={Join} />
<Route path="/call" exact component={Call} />
</Switch>
);
export default App;
Join.js
return (
<div className="container">
<div><input id="room" placeholder="room name" onChange={(event)=>setRoom(event.target.value)}></input></div>
<BrowserRouter>
<Link onClick={event => (!room) ? event.preventDefault() : null} to={`/call?room=${room}`}>
<button className="button mt-20" type="submit" onClick={run}>Sign In</button>
</Link>
</BrowserRouter>
</div>
);
}
export default Join;
Call.js
const Call = () => {
return (
<div>
<h1>jhjcjc</h1>
</div>
);
}
export default Call;
Please look over this error many developer's are facing this problem.
In your Join component, there is no need to wrap Link in a BrowserRouter. Check out the working demo here.