frontend fetch data for react with ts

Question

example that school teached us store data and use of interfaces using xampp for localhost and a basic database

`interface Members {
    id: number;
    name: string;
    birthDate: string;
    gender: string;
    createdAt: string;
  }

  const [list, setMembers] = useState<Members[]>([]);

  const fetchData = async () => {
    await fetch('http://localhost:3000/api/members')
      .then((response) => response.json())
      .then((data) => setMembers(data))
      .catch((error) => console.log(error));
    console.log(list);
  }

useEffect(() => {
    fetchData();
  }, []);
` 

Answer 1

npm install -g typeorm-model-generator  
powershell -ExecutionPolicy Bypass -Command " typeorm-model-generator -h localhost -d cars -p 3306 -u root -x  -e mysql -o src/"  

export default class MemberDto {
  @IsString()
  @IsNotEmpty()
  name: string;
  
  @IsDateString()
  birth_date: Date;

  @IsIn(['M', 'F', null])
  gender: 'M' | 'F' | null;
}

@Post('/seed')
  async seed() {
    const payment = new Payments();

    for (let i = 1; i < 16; i++) {
      payment.amount = 5000;
      payment.paid_at = faker.date.future();
      payment.member_id = 1;
      await this.dataSource.getRepository(Payments).save(payment);
    }
  }

@Post('/api/members')
  async addMember(@Body() memberDto: MemberDto) {
    const member = new Members();
    member.birth_date = memberDto.birth_date.toString();
    member.gender = memberDto.gender;
    member.name = memberDto.name;
    member.createdAt = new Date();

    return await this.dataSource.getRepository(Members).save(member);
  }

  @Post('/api/members/:id/pay')
  async addPayment(@Param('id') memberId: number) {
    const paymentsRepo = this.dataSource.getRepository(Payments);
    const membersRepo = this.dataSource.getRepository(Members);

    const paymentExist = await paymentsRepo
      .createQueryBuilder('payment')
      .where('payment.member_id = :memberId', { memberId })
      .getOne();

    if (membersRepo.findOneBy({ id: memberId }) == null) {
      throw new NotFoundException();
    }

    if (paymentExist?.paid_at?.getMonth() === new Date().getMonth()) {
      throw new ConflictException();
    }

    const newPayment = new Payments();
    newPayment.paid_at = new Date();
    newPayment.amount = 5000;
    newPayment.member_id = memberId;

    return await this.dataSource.getRepository(Payments).save(newPayment);
  }

Answer 2

npm i bootstrap  
import "bootstrap/dist/css/bootstrap.css";  
kepek publicba assets  
footer  

    <header>
            <nav style={{ display: "flex", flexDirection: "row" }} className="navbar">
              <ul className="navbar-nav">
                <li style={{ display: "flex", flexDirection: "row" }}>
                  <a style={{ color: "blue", marginRight: "10px", textDecoration: "none" }} href="#submit" className="nav-link">
                    example
                  </a>
                  <a style={{ color: "blue", textDecoration: "none" }} href="https://petrik.hu" className="nav-link">
                    example link
                  </a>
                </li>
              </ul>
            </nav>
          </header>
          <h1>example header</h1>


    <div className='container'>      
            <div className='row'>
              {list.map((member, i) => {
                return (<div key={i} className='col-12 col-sm-6 col-lg-4' style={{
                  backgroundColor: "white",
                  height: "600px",
                  border: "1px solid black",
                  borderRadius: "10px",
                  paddingTop: "20px",
                  width: "400px",
                  margin: "10px"
                }}>
                  <h2>{member.name}</h2>
                  <p>Született: {member.birth_date}</p>
                  <p>Csatlakozott: {member.created_at}</p>
                  <img src={member.gender === 'F' ? 'assets/female.png' : member.gender === 'M' ? 'assets/male.png' : 'assets/other.png'} width='100px' alt="" />              
                </div>)
              })}
            </div>
          </div>

    {responseMessages.map(
              x =>
              <p>{x}</p>
            )}
    
    <button className='btn btn-dark' onClick={()=>{payMembership(member.id)}}>Tagdíj fizetés</button>

Answer 3

        <div id="newmember" className='container'>
          <label>Név: </label>
          <input type="text" onChange={(e) => { setName(e.target.value) }} />
          <br />
          <label>Születési dátum: </label>
          <input type="date" onChange={(e) => { setBirthDate(e.target.value) }} />
          <br />
          <label>Nem: </label>
          <select name="" id="" onChange={(e) => { setGender(e.target.value) }}>
            <option value="F">Nő</option>
            <option value="M">Férfi</option>
          </select>
          <br />
          <button className='btn btn-dark' onClick={newMember}>Tagfelvétel</button>
        </div>

  const [name, setName] = useState('')
  const [birthDate, setBirthDate] = useState('')
  const [gender, setGender] = useState('')
  const [responseMessages, setResponseMessages] = useState<any[]>([])

async function newMember() {
    const requestData = {
      gender: gender,
      name: name,
      birth_date: birthDate
    }

    const response = await fetch('http://localhost:3000/api/members', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify(requestData) })
    const responseJson = await response.json()
    if (responseJson.message) {
      setResponseMessages(responseJson.message)
    }
    else {
      setResponseMessages(["Sikeres tagfelvétel!"])
    }

    fetchData();
  }

async function payMembership(id: any){
    const response = await fetch(`http://localhost:3000/api/members/${id}/pay`, {method: 'POST'})
    const responseJson = await response.json()
    setResponseMessages(["Sikeres fizetés!"])
    if(responseJson.status === 409){
      setResponseMessages(["Már fizetve"])
    }
    if(responseJson.status === 400){
      setResponseMessages(["Nincs ilyen felhasználó"])
    }
  }

Answer 4

using MySql.Data.MySqlClient;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CarRental_desktop
{
    internal class DBHelper
    {
        MySqlConnection conn;
        public DBHelper()
        { 
            MySqlConnectionStringBuilder builder = new MySqlConnectionStringBuilder();
            builder.Server = "localhost";
            builder.Port = 3306;
            builder.Database = "cars";
            builder.UserID = "root";
            builder.Password = "";
            conn = new MySqlConnection(builder.ConnectionString);
            conn.Open();
        }
        internal List<Cars> FetchData()
        {
            List<Cars> cars = new List<Cars>();
            string sql = "SELECT * FROM cars";
            MySqlCommand command = conn.CreateCommand();
            command.CommandText = sql;
            using (MySqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    cars.Add(new Cars(
                        reader.GetInt32("id"),
                        reader.GetString("license_plate_number"),
                        reader.GetString("brand"),
                        reader.GetString("model"),
                        reader.GetInt32("daily_cost")
                            )
                        );
                }
            }
            return cars;

            throw new NotImplementedException();
        }

        internal bool DeleteCar(Cars car)
        {
            string sql = "delete from rentals where rentals.car_id = @id";
            MySqlCommand command = conn.CreateCommand();
            command.CommandText = sql;
            command.Parameters.AddWithValue("@id", car.id);

            sql = "delete from cars where cars.id = @id";
            command = conn.CreateCommand();
            command.CommandText= sql;
            command.Parameters.AddWithValue("@id", car.id);
            return command.ExecuteNonQuery() == 1;
        }
    }
}

Answer 5

U can use this create the fake random data in Nesjs

    for (let i = 0; i < 15; i++) {
      let data = await this.generateData();
      await this.dataSource.getRepository(Payments).save(data);
    }
  }
  async generateData() {
    let membersList = await this.dataSource.getRepository(Members).find();
    let newPayment: Payments = {
      id: 0,
      member_id: faker.helpers.arrayElement(membersList),
      paid_at: faker.date.past(),
      amount: faker.number.int({ min: 10000, max: 200000 }),
    };
    return newPayment;
  }```    

Answer 6

This is the right react form for the fetch the database, and use the Errormessage, and create the new member,

  interface State{
  inputName: string;
  inputBirth_Date: string;
  inputGender: string;
  memberList: Member[]
  errormsg: string;
};

interface Member {
  name: string;
  gender: string;
  birth_date: Date;
  created_at: Date
}

interface  MemberRepsonse{
  data:  Member[]
}

interface ErrorFromServer{
  statusCode:  number;
  message: string;
  error: string;

}


class App extends Component<{}, State>{
  constructor(props: {}){
    super(props);
    this.state = { 
      inputName: "",
      inputGender: "",
      inputBirth_Date: "",
      memberList: [],
      errormsg: ""
    }
  }


  loadData = async () => {
    let response = await fetch("http://localhost:3000/api/members")
    let data = await response.json() as MemberRepsonse
    this.setState({
     memberList : data.data
    })
  }
  componentDidMount(): void {
    this.loadData()
}

getGenderImage(gender: string) {
  let genderImage = ""
  if(gender == "M") {
    genderImage = "/male.png"
  } else if( gender == "F"){
    genderImage = "/female.png"
  } else{
    genderImage = "/other.png"
  }
  return genderImage
}

paymentmemberShip = async(id: number) => {
  let response = await fetch("http://localhost:3000/api/members/" + id + "pay", {method: "POST"})
  if(!response.ok){
    let serverMg = await response.json() as ErrorFromServer
    this.setState({
      errormsg: serverMg.message
    })
  }
}

Answer 7

Nestjs TypeORM create and payment seed, The findall function looks for the specified data in the database and you can retrieve the data with a get request and the correct endpoint. The payment function adds the payment data to the members data table. Which we indicated in the entity. In the payment table, we also specify the amount of the payment and when exactly it was created. Then we create an error message to check that we worked well. This is just an example, but I think the process of thought can be useful for the creator

   async pay(id: number) { 
     const memberRepo = this.dataSource.getRepository(Members); 
     const paymentRepo = this.dataSource.getRepository(Payments); 
     let MemberExist = await memberRepo.findOne({ where: { id: id } }); 
     if (!MemberExist) { 
       throw new NotFoundException('Ez az azonosítójú tag nem találhato'); 
     } 
     const paymentsByMember = await paymentRepo.find({ 
       where: { member_id: { id: MemberExist.id } }, 
       relations: { member_id: true }, 
     }); 
  
     let paidThisMonth = false; 
     let today = new Date(); 
     for (let i = 0; i < paymentsByMember.length; i++) { 
       if ( 
         paymentsByMember[i].paid_at.getFullYear() == today.getFullYear() && 
         paymentsByMember[i].paid_at.getMonth() == today.getMonth() 
       ) { 
         paidThisMonth = true; 
       } 
     } 
     if (paidThisMonth) { 
       throw new ConflictException('Ebben a hónapban már fizetett'); 
     } 
     let newPayment: Payments = { 
       id: 0, 
       member_id: MemberExist, 
       amount: 5000, 
       paid_at: today, 
     }; 
     paymentRepo.save(newPayment); 
   } 
   async create(createMemberDto: CreateMemberDto) { 
     await this.dataSource.getRepository(Members).save(createMemberDto); 
   } 
   async findAll() { 
     return { 
       data: await this.dataSource.getRepository(Members).find({ 
         select: { 
           id: true, 
           name: true, 
           gender: true, 
           birth_date: true, 
           created_at: true, 
         }, 
       }), 
     }; 
   }