Sending custom component data to database

[camwess1]

Hello,

I am a new dev to both React and Adalo. I have developed a component that takes the current date range, adds additional dates based on the reccurrence parameters and adds the additional dates to the databse.

I am basically creating a component that adds recurring dates to the database (ie. errkly, monthly ,etc)

Problem:
The issue that I’m running into is that I am successfully adding the dates to an array, but when I export it to the adalo databse they all come out as the same date. Even though I’m iterating through them and have given each object a unique id.

index:
import React, { useEffect, useState } from ‘react’
import { Text, View, StyleSheet,Button } from ‘react-native’
import { v4 as uuidv4 } from ‘uuid’;
import {Recurrence,RecurrenceType,
FrequencyType,
EndingConditionType } from ‘react-recurrence’

const Recurring = (props) => {
const { color,text,startDate,endDate,frequency,occurence,repetitions,saveToDatabase,startDateValue,saveStartDate } = props

const occurrences = []

//Function that creates new occurence based on repetition type
const createRecurrences = () => {

let startDateNew = new Date(startDate)
let endDateNew = new Date(endDate)

for (let i = 0; i < occurence; i++) {

	let currentStartDate = new Date(startDateNew)
	let currentEndDate = new Date(endDateNew)


	if (frequency === 'weekly') {
		// Adjust currentStartDate by the number of weeks
		currentStartDate.setDate(currentStartDate.getDate() + 7 * i); // Adjust by weeks
	  } else if (frequency === 'monthly') {
		// Adjust by months - consider different month lengths & leap years in real applications
		currentStartDate.setMonth(currentStartDate.getMonth() + i);
	  } else if (frequency === 'annually') {
		// Adjust by years
		currentStartDate.setFullYear(currentStartDate.getFullYear() + i);
	  } else if (frequency === 'daily') {
		// Adjust by days
		currentStartDate.setDate(currentStartDate.getDate() + i);
	  }

	       // Create occurrence object with unique ID
		   const occurrenceObject = {
			id: uuidv4(),
			startDate: currentStartDate,
		  };
		  occurrences.push(occurrenceObject);
}


setDate(occurrences)

}

//Button Click
const handleRecurrenceChange = () => {
createRecurrences()
}

// log data to database
const log = () => {
saveToDatabase()
}

// add data for startDate
const setDate = (occurrences) =>{
for(let i= 0; i < occurrences.length; i++){
saveStartDate.onChange(occurrences[i].startDate)
saveToDatabase()
console.log(occurrences)
}

}
return(

	<View style={styles.wrapper}>
		<Button 
		title={text}
		color={color}
		uppercase={false}
		onPress={handleRecurrenceChange}/>
	</View>
)

}

const styles = StyleSheet.create({
wrapper: {
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘center’,
}
})

export default Recurring

Manifest:
{
“displayName”: “recurring”,
“defaultWidth”: 160,
“defaultHeight”: 24,
“components”: “./index.js”,
“icon”: “./example-thumbnail.png”,
“props”: [
{
“name”: “text”,
“displayName”: “Text”,
“type”: “text”,
“default”: “Happy Hacking”
},
{
“name”: “color”,
“displayName”: “Color”,
“type”: “color”,
“default”: “#00A898”
},
{
“name”: “startDate”,
“displayName”: “Start Date”,
“type”: “date”,
“default”: “03/27/2024”
},
{
“name”: “endDate”,
“displayName”: “End Date”,
“type”: “date”,
“default”: “03/27/2024”
},
{
“name”: “frequency”,
“displayName”: “Frequency”,
“type”: “text”,
“default”: “daily,weekly, etc”
},
{
“name”: “occurence”,
“displayName”: “Number of Ocurrence”,
“type”: “text”,
“default”: “daily,weekly, etc”
},
{
“name”: “repetitions”,
“displayName”: “Number of Repetitions”,
“type”: “text”,
“default”: “daily,weekly, etc”
},
{
“name”: “saveToDatabase”,
“displayName”: “Additional Actions when Example Occurs”,
“type”: “action”
},
{
“name”: “saveStartDate”,
“displayName”: “Start Date Value”,
“type”: “date”,
“role”: “formValue”
}
]
}