Added data to our schema but the data is not displayed in our collection

[TobiasSteinhagen]

Hello there,

we want to get more data for our trips in our collection. We receive the data and added the new data to our schema, but the collection doesn't show it.

Here is our schema:

import mongoose from "mongoose";

const { Schema } = mongoose;

const tripSchema = new Schema({
  title: { type: String, required: true },
  location: [
    {
      country: { type: String, required: true },
      city: { type: String },
      latitude_city: { type: String },
      longitude_city: { type: String },
    },
  ],
  timePeriod: [
    {
      startDate: { type: String, required: true },
      endDate: { type: String, required: true },
    },
  ],
  img: { type: String },
});

const Trip = mongoose.models?.Trip || mongoose.model("Trip", tripSchema);

export default Trip

Here, we receive the data:

export default function TripForm({
  handleAddTrip,
  endDateDisabled,
  handleDisabled,
}) {
  const countries = Country.getAllCountries();
  const [isoCode, setIsoCode] = useState(countries[0].isoCode);
  const cities = City.getCitiesOfCountry(isoCode);

  function handleIsoCode(event) {
    setIsoCode(event.target.value);
  }

  function onSubmit(event) {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.target));
    const isoCode = event.target.country.value;
    const { name } = Country.getCountryByCode(isoCode);
    const coordinates = event.target.city.value.split("-");
    const [latitude, longitude, cityname] = coordinates;
    handleAddTrip({
      ...data,
      country: {
        name,
        isoCode,
      },
      city: {
        cityname,
        longitude,
        latitude,
      },
    });
  }

  return (
    <>
      <StyledForm onSubmit={onSubmit}>
        <StyledLabel>
          Country
          <select name="country" onChange={handleIsoCode} required>
            {countries.map(({ isoCode, flag, name }) => (
              <option key={isoCode} value={isoCode}>
                {name} {flag}
              </option>
            ))}
          </select>
        </StyledLabel>
        <StyledLabel>
          City
          <select name="city" required>
            {cities
              .filter(({ countryCode }) => countryCode === isoCode)
              .map(({ latitude, longitude, name, stateCode }) => (
                <option
                  key={`${latitude}-${longitude}-${name}`}
                  value={`${latitude}-${longitude}-${name}`}
                >
                  {name} - {stateCode}
                </option>
              ))}
          </select>
        </StyledLabel>
        <StyledLabel>
          Title
          <StyledInput
            name="title"
            placeholder="Title of your trip"
            minLength={3}
            required
          />
        </StyledLabel>
        <StyledLabel>
          Start date
          <StyledInput name="startDate" type="date" onChange={handleDisabled} />
        </StyledLabel>
        <StyledLabel>
          End date
          <StyledInput
            name="endDate"
            type="date"
            required
            disabled={endDateDisabled}
          />
        </StyledLabel>
        <CreateButton>
          <CreateIcon /> Create
        </CreateButton>
      </StyledForm>
      <StyledContainer>
        <CancelButton>
          <CancelIcon /> Cancel
        </CancelButton>
      </StyledContainer>
    </>
  );
}

Here is the handleAddTripFunction

async function handleAddTrip(tripData) {
    const repTripDataCountry = tripData.country.name.replace(" ", "");
    const repTripDataCity = tripData.city.cityname.replace(" ", "-");

    const newTrip = {
      title: tripData.title,
      location: [
        {
          country: tripData.country.name,
          city: tripData.city.cityname,
          latitude_city: tripData.city.latitude,
          longitude_city: tripData.city.longitude,
        },
      ],
      timePeriod: [
        { startDate: tripData.startDate, endDate: tripData.endDate },
      ],
      img: `${repTripDataCity}`
        ? `https://source.unsplash.com/random/?${repTripDataCountry}-${repTripDataCity}`
        : `https://source.unsplash.com/random/?${repTripDataCountry}`,
    };

    if (tripData.endDate < tripData.startDate) {
      alert("The end date needs to be bigger than the start date!");
      return;
    }

    const response = await fetch("/api/trips", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newTrip),
    });

    if (!response.ok) {
      console.error(response.status);
      return;
    }

    mutate();
    router.push("/");
  }

We are aware that the newTrip variable isn't the best way, but because of our schema we have to do it in that way for now. We will change this in the future.

Is there something that we are missing?
Here is the PR

Thanks in advance, looking forward to your feedback! ✌️

[TobiasSteinhagen]

The answer is:

Restart the dev server 🙃
Thank you @JessicaLoers !