将当前用户ID绑定到新创建的票证

时间:2018-07-18 12:21:08

标签: reactjs postgresql typescript redux typeorm

我有一张票证。 当我创建新票证时, 门票图像(路径),描述和价格已正确存储在数据库中

但是users_id和events_id仍为空字段

我希望用户ID成为该新票证的一部分 以及创建票证的事件的event_id。

这是我的 TicketForm

import React, { PureComponent } from "react";
import Paper from "@material-ui/core/Paper";
import "../../App.css";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { Redirect } from "react-router";



class TicketForm extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            fireRedirect: false
        };

        this.handleChange = this.handleChange.bind(this);
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.onSubmit(this.state)
        this.setState({ fireRedirect: true })
    }

    handleChange = ticket => {
        const { name, value } = ticket.target;

        this.setState({
            [name]: value
        });
    };

    render() {

        const { fireRedirect } = this.state
        return <div>
            <Paper className="styles" elevation={4}>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <TextField label="Image" name="image" value={this.state.image || ""} onChange={this.handleChange} />
                    </div>

                    <div>
                        <TextField label="Description" name="description" value={this.state.description || ""} onChange={this.handleChange} />
                    </div>
                    <div>
                        <TextField label="Price" name="price" value={this.state.price || ""} onChange={this.handleChange} />
                    </div>


                    <br />
                    <Button type="submit">Add Ticket</Button>
                </form>
                {fireRedirect && (
                    <Redirect to={'/events/:id'} />
                )}
            </Paper>
        </div>;
    }
}

export default TicketForm;

动作创建者 actions / tickets.js

export const addTicket = ticket => (dispatch, getState) => {
    const state = getState();
    const jwt = state.currentUser.jwt;

    if (isExpired(jwt)) return dispatch(logout());

    request
        .post(`${baseUrl}/tickets`)
        .set("Authorization", `Bearer ${jwt}`)
        .send({
            image: ticket.image,
            description: ticket.description,
            price: ticket.price
        })
        .then(response =>
            dispatch({
                type: ADD_TICKET,
                payload: response.body
            })
        );
};

应用(父)组件,您将在其中被路由到/ addTicket(CreateTicket)组件,在该组件中,您可以单击以转到TicketForm

  <Router>
  <div>
   <TopBar />
   <br/><br/>
      <Route exact path="/login" component={LoginPage} />
      <Route exact path="/logout" component={LogoutPage} />
      <Route exact path="/signup" component={SignupPage} />

      <Route exact path="/events" component={EventsList} />
      <Route exact path="/createEvent" component={CreateEvent} />

       <Route exact path="/events/:id" component={TicketsList} />
      <Route exact path="/tickets/:id" component={TicketDetails} />
      <Route exact path="/addTicket" component={CreateTicket} />

      <Route exact path="/" render={() => <Redirect to="/events" />} />

  </div>

  </Router>

减少器/票证

import { GET_TICKET,ADD_TICKET } from "../actions/tickets";

const ticket = {};

export default function(state = ticket, action) {
  switch (action.type) {
    case GET_TICKET:
      return action.payload;

    case ADD_TICKET:
      return action.payload;

    default:
      return state;
  }
}

后端

我正在创建票证和用户表之间的关系 以及票证与事件之间的关系 tickets / controller.ts

import {
  JsonController,
  Get,
  Param,
  Put,
  Body,
  NotFoundError,
  HttpCode,
  Post,
  Authorized
} from "routing-controllers";
import Ticket from "./entity";

@JsonController()
export default class TicketController {
  @Get("/tickets/:id")
  getTicket(@Param("id") id: number) {
    return Ticket.findOne(id);
  }

  @Get("/tickets")
  async allTickets() {
    const tickets = await Ticket.find();
    return { tickets };
  }

  @Authorized()
  @Put("/tickets/:id")
  async updateTicket(@Param("id") id: number, @Body() update: Partial<Ticket>) {
    const ticket = await Ticket.findOne(id);
    if (!ticket) throw new NotFoundError("Cannot find ticket");

    return Ticket.merge(ticket, update).save();
  }
  @Authorized()
  @Post("/tickets")
  @HttpCode(201)
  createTicket(@Body() ticket: Ticket) {
    return ticket.save();
  }
}

门票/entity.ts

@Entity()
export default class Ticket extends BaseEntity {
  @PrimaryGeneratedColumn() id?: number;

  @IsString()
  @Column("text", { nullable: true })
  image: string;

  @Column("integer", { nullable: true })
  price: number;

  @IsString()
  @Length(0, 100)
  @Column("text")
  description: string;

  @ManyToOne(_ => User, user => user.tickets, {
    eager: true,
    cascade: true
  })
  users: User[];

  @OneToMany(_ => Comment, comment => comment.tickets, {
    eager: false
  })
  comments: Comment;

  @ManyToOne(_ => Event, event => event.tickets, {
    eager: true,
    cascade: true
  })
  events: Event[];
}

如果有人可以给我建议或提示去哪里找?

0 个答案:

没有答案