Nilay Paul
8 min readFeb 16

--

<main>
<Router initialEntries={["/home", "/finalpage"]}>
<Switch>
<Route path={"/"} exact>
<Redirect to={"/home"} />
</Route>
<Route path={"/home"} >
<CustomForm />
</Route>
<Route path={"/finalpage"} >
<FinalPage/>
</Route>
</Switch>
</Router>
</main>
<Route path={"/home"} > -> Path defines the url 
<CustomForm /> -> The component to be rendered with respect to path paramter given
</Route>
Overall App.js

import CustomForm from "./Components/CustomForm";
import {MemoryRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import FinalPage from './Components/FinalPage'
function App() {
return (
<>
<main>
<Router initialEntries={["/home", "/finalpage"]}>
<Switch>
<Route path={"/"} exact>
<Redirect to={"/home"} />
</Route>
<Route path={"/home"} >
<CustomForm />
</Route>
<Route path={"/finalpage"} >
<FinalPage/>
</Route>
</Switch>
</Router>
</main>
</>
);
}

export default App;
Inside index.js ->


root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>

);
CustomForm.js

import React from "react";
import { Button, TextField } from "@mui/material";
import classes from "./CustomForm.module.css";
import { useState } from "react";
import AddIcon from "@mui/icons-material/Add";
import { getTenDigitRandomNumber } from "../Helper/utils";
import { useDispatch } from "react-redux";
import { userAction } from "../Redux/Store";
import { useHistory } from "react-router-dom";

function CustomForm() {
const dispatch = useDispatch();
const history = useHistory();
const [inputfields, setInputFields] = useState([
{ username: "", email: "", phonenumber: "", address: "" },
]);
const handleFormChange = (index, event) => {
let data = [...inputfields];
data[index][event.target.name] = event.target.value;
setInputFields(data);
};
const addUsers = () => {
let newUser = { username: "", email: "", phonenumber: "", address: "" };
setInputFields([...inputfields, newUser]);
};


const postToServer = async (data_to_be_sent) => {
const response = await fetch("http://127.0.0.1:8000/apis/v1/test/", {
method: "POST",
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data_to_be_sent),
});

const jsonData = await response.json();
dispatch(
userAction.updateUserDetails({
totaluser: jsonData.data.totalnumberofusers,
users: jsonData.data.users,
})
);
if (response.status === 200) {
history.replace("/finalpage");
}
};

const handleSubmit = (event) => {
event.preventDefault();
const data_to_be_sent = {
record_name: getTenDigitRandomNumber(),
users: inputfields,
};
postToServer(data_to_be_sent);
};

return (
<div>
<h2 className={classes.heading}>Form Demo</h2>
<form className={classes.customform} onSubmit={handleSubmit}>
{inputfields.map((input, index) => {
return (
<div
key={index}
style={{ display: "flex", flexDirection: "column" }}
>
<h3 style={{ paddingTop: "1%" }}>Data for user {index + 1}</h3>
<TextField
name="username"
value={input.username}
onChange={(e) => handleFormChange(index, e)}
className={classes.inputFields}
label={"Enter User Name"}
/>
<TextField
name="email"
type="email"
value={input.email}
onChange={(e) => handleFormChange(index, e)}
className={classes.inputFields}
label={"Enter Email"}
/>
<TextField
name="phonenumber"
type="number"
value={input.phone}
onChange={(e) => handleFormChange(index, e)}
className={classes.inputFields}
label={"Enter Phone Number "}
/>
<TextField
name="address"
value={input.address}
onChange={(e) => handleFormChange(index, e)}
className={classes.inputFields}
label={"Enter Address "}
/>
</div>
);
})}
<Button onClick={addUsers}>
<AddIcon /> Add More Users
</Button>

<Button type="submit" className={classes.inputFields}>
Submit
</Button>
</form>
</div>
);
}

export default CustomForm;
.customform{
display: flex;
flex-direction: column;
margin:1%
}
.inputFields{
margin-top: 1% !important;

}
.heading{
text-align: center;
}
// utility function
export function getTenDigitRandomNumber(){
return Math.random().toString().substring(2, 12);
}
Store.js

import {configureStore, createSlice} from '@reduxjs/toolkit'
const INITIAL_STATE = { <- This object define the data structure for this application. Also it is the initial state of our app
totaluser:0,
users:[]
}
const userSlice = createSlice({ <- Creates a slice in redux-store
name:'userSlice',
initialState:INITIAL_STATE,
reducers:{
updateUserDetails(state,action){. <- reducers holds all the methods for a slice
if(action.payload!=null){
state.totaluser = action.payload.totaluser
state.users = action.payload.users
}
}
}
})

const store = configureStore({. < - Configuring the redux store
reducer:userSlice.reducer
})

export const userAction = userSlice.actions; <- Actions with which we will refer the methods
export default store
import React from 'react'
import DenseTable from './DenseTable'
import classes from './FinalPage.module.css'
function FinalPage() {
return (
<div className={classes.container}>
<h3>All Users</h3>
<DenseTable/>
</div>
)
}

export default FinalPage
.container{
display: flex;
align-items: center;
flex-direction: column;
padding: 3%;
}
import { Paper, TableContainer,Table,TableHead,TableCell,TableRow,TableBody } from '@mui/material'
import React from 'react'
import {useSelector} from 'react-redux'

function DenseTable() {
const users = useSelector(state=>state.users)

return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell >Username</TableCell>
<TableCell align="right">Email</TableCell>
<TableCell align="right">address</TableCell>
<TableCell align="right">phone</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((row) => (
<TableRow
key={row.username}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.username}
</TableCell>
<TableCell align="right">{row.email}</TableCell>
<TableCell align="right">{row.address}</TableCell>
<TableCell align="right">{row.phonenumber}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}

export default DenseTable
index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import store from './Redux/Store';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
</Provider>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Yes you can dynamically add as many forms as you want 🤠 our backend will handle everything
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapis',
'corsheaders',
'rest_framework',

]
# MiddleWare and cors settings inside settings.py

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',

]

CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]
CSRF_TRUSTED_ORIGINS = [
'http://localhost:3000',
]
"""
Django settings for backend project.

Generated by 'django-admin startproject' using Django 4.0.3.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-hjt6w+@*1hsofny5uz@^-=4qv!i1+6r%=z3&7c$^vqta!+wx_n'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapis',
'corsheaders',
'rest_framework',

]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',

]

CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]
CSRF_TRUSTED_ORIGINS = [
'http://localhost:3000',
]

ROOT_URLCONF = 'backend.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'backend.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
path('admin/', admin.site.urls),
path('apis/v1/',include('myapis.urls'))
]
from django.urls import include, path
from .views import handleuserdata


urlpatterns = [
path('test/',handleuserdata)
]
from django.db import models

# Create your models here.
class Record(models.Model):
record_name = models.TextField(max_length=30)
def __str__(self):
return self.record_name

class UserModel(models.Model):
username = models.TextField(max_length=100,blank=True)
email = models.EmailField()
address = models.TextField(max_length=300)
phone = models.TextField(max_length=10)
createdDate = models.DateTimeField(auto_now_add=True,blank=True)
related_to = models.ForeignKey(Record,on_delete=models.CASCADE)

def __str__(self):
return self.username+' '+self.email
from django.contrib import admin

from myapis.models import UserModel,Record

# Register your models here.

admin.site.register(Record)

@admin.register(UserModel)
class UserModelAdmin(admin.ModelAdmin):
list_display = ('username', 'phone','related_to')
list_filter = ("related_to", )
search_fields = ("username__startswith", )
You will get this kind of prompt
from rest_framework.response import Response
from rest_framework import viewsets
from .serializers import UserModelSerializer,RecordModelSerializer
from .models import UserModel,Record
from rest_framework.decorators import api_view
import json
from django.http import JsonResponse
from rest_framework import status


@api_view(['POST'])
def handleuserdata(request):
data=''
count = 0
if(request.method=='POST'):
data = json.loads(request.body)
count = len(data['users'])
record = Record()
record.record_name = data['record_name']
record.save()
for user in data['users']:
username = user['username']
email = user['email']
phone = user['phonenumber']
address = user['address']
u = UserModel()
u.username = username
u.email=email
u.phone=phone
u.address=address
u.related_to = record
u.save()

data['totalnumberofusers'] = count
return JsonResponse({"data":data},safe=False,status=status.HTTP_200_OK)
Admin Panel

--

--

Recommended from Medium

Lists