How to insert a subdocument into a mongo collection?

Question

MERN stack. There are a main storyModel and an eventModel which is an embedded subdocument. I create a story and then add events to it. I've tried several ways, searched SO for the way to insert a subdocument to an existing mongo collection, looked at the mongo and mongoose documentation(very little) and I can't seem to insert. I was able to do it before but after refactoring, the code doesn't work anymore. I tried isolating where the problem is, and it seems to be pointing to route although I'm not 100% on this.

Here is my model/schema(using mongoose):

const mongoose = require('mongoose')

    const GeoSchema = mongoose.Schema({
        type: {
            type: String,
            enum: ['Point', 'LineString', 'Polygon'],
            default: "Point"
        },
        coordinates: {
            type: [Number],
            index: "2dsphere"
        }
    })

    const EventSchema = mongoose.Schema({
        eventDate: {
            type: Date
        },
        eventTitle: {
            type: String,
            required: true,
            minlength: 3
        },
        eventDescription: {
            type: String,
            minlength: 3
        },
        eventImageUrl: {
            type: String
        },
        eventLink: {
            type: String
        },
        eventAudio: {
            type: String
        },
        eventLocation: GeoSchema,
    })

    const StorySchema = mongoose.Schema({
        storyTitle: {
            type: String,
            minlength: 5,
            required: true
        },
        storySummary: {
            type: String
        },
        storyImageUrl: {
            type: String,
            required: true
        },
        storyStatus: {
            type: String,
            default: 'public',
            enum: ['public', 'private']
        },
        storyCreator: {
            type: mongoose.Types.ObjectId,
            // required: true,
            ref: 'User'
        },
        storyReferences: [String],
        storyTags: [String],
        storyMapStyle: {
            type: String,
            default: 'mapbox://styles/mapbox/light-v9',
        },
        likes: [{
            type: mongoose.Types.ObjectId,
            ref: 'User'
        }],
        event: [ EventSchema ]
    }, {timestamps: true})

    module.exports = mongoose.model('Story', StorySchema)

Here is my express Route:

// Create a new event for a specific story, used by AddEvent.js
router.put('/:story_id/update', (req, res) => {
    const {
        eventDate,
        eventTitle,
        eventDescription,
        eventImageUrl,
        eventLink,
        eventAudio } = req.body

    console.log('eventDate',eventDate)

    Story.findByIdAndUpdate(
        { _id: req.params.story_id},
        {
            $push:
            { event: 
                {
                eventDate,
                eventTitle,
                eventDescription,
                eventImageUrl,
                eventLink,
                eventAudio
            }}
        })
})

Here is the React code just in case:

import React, {useEffect, useState} from 'react';
import { useForm } from 'react-hook-form'
import { useHistory, useParams } from 'react-router-dom'
import * as yup from 'yup'
import { yupResolver } from "@hookform/resolvers/yup"
import axios from 'axios'
import clsx from 'clsx';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Collapse from '@material-ui/core/Collapse';
import InfoIcon from '@material-ui/icons/Info';
import InputAdornment from '@material-ui/core/InputAdornment';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const schema = yup.object().shape({
    eventDate: yup
        .date(),
    eventTitle: yup
        .string()
        .required('Title is a required field.')
        .min(3),
    eventDescription: yup
        .string(),
    eventImageUrl: yup
        .string(),
    eventLink: yup
        .string(),
    eventAudio: yup
        .string(),
    // eventType: yup
    //     .string(),
    // eventLatitude: yup
    //     .number()
    //     .transform(cv => isNaN(cv) ? undefined : cv).positive()
    //     .nullable()
    //     .lessThan(90)
    //     .moreThan(-90)
    //     .notRequired() ,
    // eventLongitude: yup
    //     .number()
    //     .transform(cv => isNaN(cv) ? undefined : cv).positive()
    //     .nullable()
    //     .lessThan(180)
    //     .moreThan(-180)
    //     .notRequired() ,
})

const useStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(12),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(2, 0, 0),
    },
    formControl: {
        marginTop: '1rem',
    },
}));

export default function AddEvent(props) {
    const classes = useStyles();
    const history = useHistory()
    const { register, handleSubmit, errors } = useForm({ 
        resolver: yupResolver(schema)
    })
    const { story_id } = useParams()
    
    const [data, setData] = useState('')
    const [expanded, setExpanded] = useState(false);
    
    const { 
        eventDate,
        eventTitle,
        eventDescription,
        eventImageUrl,
        eventLink,
        eventAudio,
        eventLocation
    } = data

    useEffect(() => {
            axios.put(`http://localhost:5000/story/${story_id}/update`, {
                eventDate,
                eventTitle,
                eventDescription,
                eventImageUrl,
                eventLink,
                eventAudio,
                eventLocation
            })
            .then(() => history.goBack() )
            .catch(err => console.log(err))
    }, [data])

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    const handleCancel = () => {
        history.goBack()
    };

    const onSubmit = (data) => {
        console.log(data);
        setData(data) 
    }


    return (
        
            
                
                    Add New Event
                
                
                    
                    
                    
                    
                                    
                                
                            ),
                        }}
                        inputRef={register}
                        error={!!errors.eventImageUrl}
                        helperText={errors?.eventImageUrl?.message}
                    /> 
                    
                        Pls paste either an image or video url link here.
                        If you are using a YouTube link: Navigate to the video you wish to embed. Click the Share link below the video, then click the Embed link. The embed link will be highlighted in blue. Copy and paste this link here.
                        
                    
                    
                    

                    
                    {/* 
                        eventType
                        
                     */}
                    

                    

                    

                    
                
            
        
    );
}

How to insert a subdocument into a mongo collection?

Answers (1)

Related Questions