Simple model

Simple model

This example introduces rx.model: a channel field holding a Django model instance, serialized with a DRF serializer you already write. Assigning an instance to the field delivers its serialized data to the frontend, typed to match the serializer.

Backend

from rxdjango import ContextChannel, rx, action
from .models import User
from .serializers import UserSerializer


class SimpleModelChannel(ContextChannel):

    user = rx.model(UserSerializer())

    @action
    async def authorize(self, password: str):
        if password == 'password':
            self.user = await User.objects.aget(id=1)
            return True
        return False

Frontend

import React, { useState } from 'react';
import { useChannel } from '@rxdjango/react';
import { SimpleModelChannel } from '../../rx/simple_model/simple_model.channels';
import {
  Sections,
  Button,
  TextInput,
  Row,
  Note,
} from '../../components/demo';

export function SimpleModelDemo() {
  const channel = useChannel(SimpleModelChannel);
  const [password, setPassword] = useState('password');

  return (
    <Sections>
      <div>
        <Note>
          Authorize with a password to load the user model on the channel.
        </Note>
        <Row>
          <TextInput
            id="simple-model-password"
            label="Password"
            value={password}
            onChange={setPassword}
          />
          <Button
            variant="secondary"
            onClick={() => channel.authorize(password)}
          >
            Authorize
          </Button>
        </Row>
      </div>
      <div>
        {channel.user ? (
          <p>
            You are user "{channel.user.name}"
          </p>
        ) : (
          <p>
            Enter your password
          </p>
        )}
      </div>
    </Sections>
  );
}

export default SimpleModelDemo;