home-page start, fake data start

src/components/Cards/HomeListCard/HomeListCard.js

+import React from 'react';
+//import PropTypes from 'prop-types';
+//import SectionLoader from '../Loader/SectionLoader';
+import { Box } from '@mui/system';
+
+const HomeListCard = () => {
+  return (
+    <Box> Title </Box>
+  );
+};
+
+// AuthCard.propTypes = {
+//   children: PropTypes.node,
+//   title: PropTypes.string,
+//   subtitle: PropTypes.string,
+//   isLoading: PropTypes.bool,
+// };
+
+export default HomeListCard;

src/pages/HomePage/HomePageMUI.js

 import React from 'react';
 import { Box } from '@mui/material';
 import Navbar from '../../components/MUI/NavbarComponent';
-import Modals from '../../components/MUI/Examples/ModalsExample';
-import DataGrid from '../../components/MUI/Examples/DataGridExample';
-import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
-import PagingSortingFilteringServerSide from '../../components/MUI/Examples/PagingSortingFilteringExampleServerSide';
-import RandomDataProvider from '../../context/RandomDataContext';
+//import Modals from '../../components/MUI/Examples/ModalsExample';
+//import DataGrid from '../../components/MUI/Examples/DataGridExample';
+//import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
+//import PagingSortingFilteringServerSide from '../../components/MUI/Examples/PagingSortingFilteringExampleServerSide';
+//import RandomDataProvider from '../../context/RandomDataContext';
 import { GridStyled } from './HomePage.styled';
+import { Container } from '@mui/system';
+import HomeListCard from '../../components/Cards/HomeListCard/HomeListCard';
 
 const HomePage = () => {
 	return (
 		<>
 			<Navbar />
-			<Box sx={{ mt: 4, mx: 4 }}>
-				<GridStyled container spacing={2} justifyContent="center">
+			<Box sx={{ mt: 4, mx:4 }}>
+				<GridStyled container spacing={2} justifyContent="space-between">
 					<GridStyled item xs={12} md={3}>
-						<Modals />
+						<GridStyled item xs={12} md={12}>
+							
+					    </GridStyled>
 					</GridStyled>
 					<GridStyled item xs={12} md={6}>
-						<DataGrid />
+						<Container> Naslov </Container>
+						<GridStyled xs={12} md={12}>
+							<HomeListCard></HomeListCard>
+						</GridStyled>
 					</GridStyled>
-                    <GridStyled item xs={12} md={9}>
+                    {/* <GridStyled item xs={12} md={9}>
                         <PagingSortingFiltering />
                     </GridStyled>
-                    <GridStyled item xs={12} md={9}>
+                    <GridStyled item xs={12} md={9}> */}
                         {/* Move to higher components? */}
-                        <RandomDataProvider>
+                        {/* <RandomDataProvider>
                             <PagingSortingFilteringServerSide />
                         </RandomDataProvider>
-                    </GridStyled>
+                    </GridStyled> */}
 				</GridStyled>
 			</Box>
 		</>

src/store/actions/products/productsActionConstants.js

+export const LOAD_DATA = 'LOAD_DATA';
+export const UPDATE_PAGE = 'UPDATE_PAGE';
+export const UPDATE_ITEMS_PER_PAGE = 'UPDATE_ITEMS_PER_PAGE';
+export const UPDATE_FILTER = 'UPDATE_FILTER';
+export const UPDATE_SORT = 'UPDATE_SORT';

src/store/actions/products/productsActions.js

+import {
+	LOAD_DATA,
+	UPDATE_PAGE,
+	UPDATE_ITEMS_PER_PAGE,
+    UPDATE_FILTER,
+    UPDATE_SORT
+} from './randomDataActionConstants';
+
+export const loadData = (payload) => ({
+	type: LOAD_DATA,
+	payload,
+});
+
+export const updatePage = (payload) => ({
+	type: UPDATE_PAGE,
+	payload,
+});
+
+export const updateItemsPerPage = (payload) => ({
+	type: UPDATE_ITEMS_PER_PAGE,
+	payload,
+});
+
+export const updateFilter = (payload) => ({
+    type: UPDATE_FILTER,
+	payload,
+})
+
+export const updateSort = (payload) => ({
+    type: UPDATE_SORT,
+	payload,
+})

src/util/helpers/fakeProductsData.js

+const random = (arr) => {
+	return arr[Math.floor(Math.random() * arr.length)];
+};
+
+///
+const title = () => {
+	return random(['Vino', 'Pepsi', 'Cigla', 'Kokakola', 'Somalirane Pufne za Frezenkovanje']);
+};
+
+const owner = () => {
+	return random(['Radic.doo', 'Stefan Komerc', 'Indo grasa products', 'Piljar Manija', 'Impex promet']);
+};
+
+const city = () => {
+	return random(['Nis', 'Novi Sad', 'Beograd', 'Valjevo', 'Kosovska Mitrovica']);
+};
+
+const quantity = () => {
+	return random(['400', '30', '1000', '53', '111']);
+};
+
+const details = () => {
+	return random(['Details for this product are very detailed yesyees'])
+}
+//
+
+const size = () => {
+	return random(['Extra Small', 'Small', 'Medium', 'Large', 'Extra Large']);
+};
+
+const color = () => {
+	return random(['Red', 'Green', 'Blue', 'Orange', 'Yellow']);
+};
+
+const designer = () => {
+	return random([
+		'Ralph Lauren',
+		'Alexander Wang',
+		'Grayse',
+		'Marc NY Performance',
+		'Scrapbook',
+		'J Brand Ready to Wear',
+		'Vintage Havana',
+		'Neiman Marcus Cashmere Collection',
+		'Derek Lam 10 Crosby',
+		'Jordan',
+	]);
+};
+
+const type = () => {
+	return random([
+		'Cashmere',
+		'Cardigans',
+		'Crew and Scoop',
+		'V-Neck',
+		'Shoes',
+		'Cowl & Turtleneck',
+	]);
+};
+
+const price = () => {
+	return (Math.random() * 100).toFixed(2);
+};
+
+function generate(count) {
+	const data = [];
+	for (let i = 0; i < count; i++) {
+		const currentTitle = title();
+		const currentOwner = owner();
+		const currentCity = city();
+		const currentQuantity= quantity();
+		const currentDetails = details();
+
+		data.push({
+			title: currentTitle,
+			owner: currentOwner,
+			city: currentCity,
+			quantity: currentQuantity,
+			details: currentDetails,
+		});
+	}
+	return data;
+}
+
+export default generate;