Create contact intent #155
Conversation
| @@ -6,6 +6,7 @@ import ContactFormField from "./ContactFormField"; | |||
| import ContactFieldInput from "./ContactFieldInput"; | |||
There was a problem hiding this comment.
A little extra with this PR: we want to render the buttons for the creation form… elsewhere. Generally in a fixed modal footer.
I've used portals to make that possible, and successfully used it in the intent. However, when using this with the ContactFormModal, we run into a preact-bug when closing the Modal, and I'm too lazy to report it.
| @@ -0,0 +1,93 @@ | |||
| import React, { Children, Component } from "react"; | |||
There was a problem hiding this comment.
This whole file comes from cozy-store, and while the internals are what they are, the API is pretty sweet.
| label={"Create a Contact (intent)"} | ||
| action="CREATE" | ||
| data={{ me: true }} | ||
| /> |
There was a problem hiding this comment.
To easily remove these lines later on, we should create a <FakeIntentToolbar /> whose display is controlled by fakeintent.
There was a problem hiding this comment.
Yeeeaaah I actually tried that, but then you have to wrap the buttons in a div, and the whole layout breaks :|
There was a problem hiding this comment.
tips: you can return a Array of components that will be added in the render tree as sibling.
class ArrayOfHello extends React.Component {
render() {
return [...Array(100)].map((item, index) => (
<Hello name={`Mister ${index}`} />
));
}
}
const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {"\u2728"}</h2>
{true && <ArrayOfHello />}
</div>
);There was a problem hiding this comment.
I don't think that works in preact. IIRc it's a react 16 feature that hasn't been ported yet!
There was a problem hiding this comment.
You are right I overzealously replaced the function with a functional component.
Here is the code with a function in preact:
https://codesandbox.io/s/v60w5ppm45
| @@ -77,6 +78,21 @@ const initialFieldValues = fields.reduce((initialValues, { name, isArray }) => { | |||
| return initialValues; | |||
| }, {}); | |||
|
|
|||
| const ContactFormFooterWrapper = ({ portalInto, children }) => { | |||
| return portalInto ? ( | |||
| <Portal into={portalInto}>{children}</Portal> | |||
There was a problem hiding this comment.
Not sure why you use a portal, but, hey, if it works, that sounds good.
| }; | ||
|
|
||
| const MeMarker = (props, { t }) => ( |
There was a problem hiding this comment.
Not really fan of this name, but it is hard to find a good name, maybe a myselfTag or myselfLabel.
| @@ -88,7 +100,7 @@ const ContactRow = props => { | |||
| onSelect={props.selection.onSelect} | |||
| /> | |||
| )} | |||
| <ContactIdentity name={name} /> | |||
| <ContactIdentity name={name} me={me} /> | |||
There was a problem hiding this comment.
Maybe myself is better than me to speak about user identity.
|
Ahah, MacOS filesystem is not case sensitive (d449b49) ;) |
| @@ -0,0 +1,93 @@ | |||
| import React, { Children, Component } from "react"; | |||
There was a problem hiding this comment.
Looks like my previous comments disappeared — this file is largely borrowed from cozy-store. It allows for a nice intent handling in the app.
generated from commit 053c743
Adds a second intent that uses the
ContactFormcomponent to allow creating a contact through an intent.If the intent data has a flag
me: true, we add that information to the contact's metadata. This contact becomes the assumed profile for the cozy's owner and get's a little "me" 🎏 in the list.Since we now have 2 intents in this app, i've restructured things slightly, using a technique borrowed from cozy-store.