How to use the dotnetify.useConnect function in dotnetify

To help you get started, we’ve selected a few dotnetify examples, based on popular ways it is used in public projects.

github dsuryd / dotNetify / Demo / React / SPA / client / SimpleList.js View on Github external
export default () => {
  const [ newName, setNewName ] = useState('');

  // Connect this component to the back-end view model.
  const { vm, state } = useConnect('SimpleListVM', { Employees: [] });

  // Set up function to dispatch state to the back-end.
  const dispatch = state => vm.$dispatch(state);

  return (
    <SimpleListCss>
      <header>
        <span>Add:</span>
        <TextBox
          placeholder="Type full name here"
          value={newName}
          onChange={value => setNewName(value)}
          onUpdate={value => {
            dispatch({ Add: value });
            setNewName('');
          }}
github dsuryd / dotNetify / DevApp / client / app / views / Overview.js View on Github external
const ServerUpdate = () => {
  const { vm, state } = useConnect('ServerUpdate', { Greetings: '' });
  const [ firstName, setFirstName ] = useState('');
  const [ lastName, setLastName ] = useState('');

  const handleFirstName = e => setFirstName(e.target.value);
  const handleLastName = e => setLastName(e.target.value);
  const handleSubmit = () => vm.$dispatch({ Submit: { FirstName: firstName, LastName: lastName } });
  return (
    <div>
      <div>{state.Greetings}</div>
      <input type="text" value={firstName} onChange={handleFirstName} />
      <input type="text" value={lastName} onChange={handleLastName} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};
github dsuryd / dotNetify / Demo / React / SPA / client / App.js View on Github external
export default () => {
  const { vm, state } = useConnect('App', { Links: [] });
  if (vm) vm.onRouteEnter = (path, template) => (template.Target = 'Content');

  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        {state.Links.map(link => (
          <RouteLink key={link.Id} vm={vm} route={link.Route} style={{ paddingRight: '2rem' }}>
            {link.Caption}
          </RouteLink>
        ))}
      </nav>
      <div id="Content" style={{ paddingTop: '1rem' }} />
    </div>
  );
};
github dsuryd / dotNetify / DevApp / client / app / views / Overview.js View on Github external
const RealTimePush = () => {
  const { state } = useConnect('RealTimePush', { Greetings: '', ServerTime: '' });
  return (
    <div>
      <p>{state.Greetings}</p>
      <p>Server time is: {state.ServerTime}</p>
    </div>
  );
};