Add initial new chicken form and storage

src/api/chickenApi.js

@@ -27,7 +27,12 @@ export const subscribeToChickens = (farmId, callback) => {
 export const addChicken = async (farmId, chickenData) => {
   const response = await axios.post(
     `${API_URL}/farms/${farmId}/chickens`,
-    chickenData
+    chickenData,
+    {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
   );
   return response.data;
 };

src/api/firebaseConfig.js

@@ -1,5 +1,6 @@
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
+import { getDatabase } from 'firebase/database';
 
 export const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
@@ -14,3 +15,4 @@ export const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
+export const db = getDatabase(app);

src/pages/ChickensPage.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useDispatch } from 'react-redux';
 
 import MainLayout from '../components/layout/MainLayout';
 import {
@@ -13,24 +14,64 @@ import {
   Typography,
   Pagination,
   IconButton,
-  Button
+  Button,
+  Modal,
+  Box,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem
 } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 
 import { chickensData } from './data';
+import { addChicken } from '../redux/slices/chickenSlice';
 
 const ITEMS_PER_PAGE = 10;
 
 export default function Chickens() {
+  const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newChicken, setNewChicken] = useState({
+    identifier: '',
+    weight: '',
+    height: '',
+    name: '',
+    type: '',
+    location: '',
+    eggColor: '',
+    dateHatched: ''
+  });
+
   const totalPages = Math.ceil(chickensData.length / ITEMS_PER_PAGE);
 
   const handlePageChange = (event, value) => {
     setCurrentPage(value);
   };
 
+  const handleAddChicken = () => {
+    dispatch(addChicken(newChicken));
+    setIsModalOpen(false);
+    setNewChicken({
+      identifier: '',
+      weight: '',
+      height: '',
+      name: '',
+      type: '',
+      location: '',
+      eggColor: '',
+      dateHatched: ''
+    });
+  };
+
+  const handleInputChange = e => {
+    setNewChicken({ ...newChicken, [e.target.name]: e.target.value });
+  };
+
   const paginatedData = chickensData.slice(
     (currentPage - 1) * ITEMS_PER_PAGE,
     currentPage * ITEMS_PER_PAGE
@@ -60,9 +101,7 @@ export default function Chickens() {
             <Button
               variant="contained"
               startIcon={<AddIcon />}
-              onClick={() => {
-                /* Add chicken logic */
-              }}
+              onClick={() => setIsModalOpen(true)}
             >
               Add Chicken
             </Button>
@@ -134,6 +173,114 @@ export default function Chickens() {
           className="mt-4" // Add margin-top for spacing
           sx={{ marginTop: 2 }} // Additional margin for better spacing
         />
+        <Modal
+          open={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          aria-labelledby="add-chicken-modal"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 400,
+              bgcolor: 'background.paper',
+              boxShadow: 24,
+              p: 4
+            }}
+          >
+            <Typography
+              variant="h6"
+              component="h2"
+              gutterBottom
+            >
+              Add New Chicken
+            </Typography>
+            <TextField
+              fullWidth
+              margin="normal"
+              name="identifier"
+              label="Unique Identifier"
+              value={newChicken.identifier}
+              onChange={handleInputChange}
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              name="weight"
+              label="Weight"
+              type="number"
+              value={newChicken.weight}
+              onChange={handleInputChange}
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              name="height"
+              label="Height"
+              type="number"
+              value={newChicken.height}
+              onChange={handleInputChange}
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              name="name"
+              label="Name"
+              value={newChicken.name}
+              onChange={handleInputChange}
+            />
+            <FormControl
+              fullWidth
+              margin="normal"
+            >
+              <InputLabel>Type</InputLabel>
+              <Select
+                name="type"
+                value={newChicken.type}
+                onChange={handleInputChange}
+              >
+                <MenuItem value="Broiler">Broiler</MenuItem>
+                <MenuItem value="Layer">Layer</MenuItem>
+                <MenuItem value="Dual-purpose">Dual-purpose</MenuItem>
+              </Select>
+            </FormControl>
+            <TextField
+              fullWidth
+              margin="normal"
+              name="location"
+              label="Location"
+              value={newChicken.location}
+              onChange={handleInputChange}
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              name="eggColor"
+              label="Egg Color"
+              value={newChicken.eggColor}
+              onChange={handleInputChange}
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              name="dateHatched"
+              label="Date Hatched"
+              type="date"
+              InputLabelProps={{ shrink: true }}
+              value={newChicken.dateHatched}
+              onChange={handleInputChange}
+            />
+            <Button
+              variant="contained"
+              onClick={handleAddChicken}
+              sx={{ mt: 2 }}
+            >
+              Add Chicken
+            </Button>
+          </Box>
+        </Modal>
       </div>
     </MainLayout>
   );

src/redux/slices/chickenSlice.js

@@ -0,0 +1,38 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import * as chickenApi from '../../api/chickenApi';
+
+export const addChicken = createAsyncThunk(
+  'chickens/addChicken',
+  async (chickenData, { getState }) => {
+    const { auth } = getState();
+    const farmId = auth.user.farmId;
+    const response = await chickenApi.addChicken(farmId, chickenData);
+    return response;
+  }
+);
+
+const chickenSlice = createSlice({
+  name: 'chickens',
+  initialState: {
+    chickens: [],
+    loading: false,
+    error: null
+  },
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(addChicken.pending, state => {
+        state.loading = true;
+      })
+      .addCase(addChicken.fulfilled, (state, action) => {
+        state.chickens.push(action.payload);
+        state.loading = false;
+      })
+      .addCase(addChicken.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message;
+      });
+  }
+});
+
+export default chickenSlice.reducer;