Home Explore Help
Register Sign In
JoystreamStats
/
jsstats
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

20230222: integrated pagination for WG, Proposals

mkbeefcake 1 year ago
parent
f346989778
commit
04aab01006
7 changed files with 194 additions and 178 deletions
Unified View Show Diff Stats
  1. 1 15
      public/index.html
  2. 66 24
      src/components/Dashboard/Proposals.tsx
  3. 9 86
      src/components/Dashboard/Workgroup.tsx
  4. 6 14
      src/components/Dashboard/index.tsx
  5. 2 2
      src/components/Dashboard/ui/SubBlock.tsx
  6. 76 0
      src/components/Dashboard/ui/TablePaginationActions.tsx
  7. 34 37
      webpack.config.js

+ 1 - 15
public/index.html
View File 

@@ -1,15 +1 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <meta name="theme-color" content="#000000" />
 
-    <link rel="manifest" href="manifest.json" />
 
-    <title>JoystreamStats</title>
 
-  </head>
 
-  <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
 
-    <script src='bundle.js'></script>
 
-  </body>
 
-</html>
 
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="manifest.json"/><title>JoystreamStats</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="bundle.js"></script></body></html>

+ 66 - 24
src/components/Dashboard/Proposals.tsx
View File 

@@ -2,7 +2,7 @@ import React from "react";
 
 import SubBlock from "./ui/SubBlock";
 
 import SubBlock from "./ui/SubBlock";
 
 import { ElectedCouncil } from "@/queries";
 
 import { ElectedCouncil } from "@/queries";
 
 import { useProposals } from '@/hooks';
 
 import { useProposals } from '@/hooks';
 
-import { WorkingGroup } from "../../types";
 
+import { Proposal, WorkingGroup } from "../../types";
 
 
 
 import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 
 import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 
 import Table from "@material-ui/core/Table";
 
 import Table from "@material-ui/core/Table";
 
@@ -13,18 +13,55 @@ import TableHead from "@material-ui/core/TableHead";
 
 import TableRow from "@material-ui/core/TableRow";
 
 import TableRow from "@material-ui/core/TableRow";
 
 import TableFooter from '@material-ui/core/TableFooter';
 
 import TableFooter from '@material-ui/core/TableFooter';
 
 import TablePagination from '@material-ui/core/TablePagination';
 
 import TablePagination from '@material-ui/core/TablePagination';
 
-import IconButton from '@material-ui/core/IconButton';
 
-import FirstPageIcon from '@material-ui/icons/FirstPage';
 
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-import LastPageIcon from '@material-ui/icons/LastPage';
 
+import TablePaginationActions from "./ui/TablePaginationActions";
 
+
 
+const useStyles2 = makeStyles({
 
+	table: {
 
+		minWidth: 500,
 
+	}
 
+})
 
+
 
+const ProposalWorker = (props: {proposal: Proposal} ) => {
 
+	const { proposal } = props;
 
+
 
+	return (
 
+		<TableRow key={proposal.id}>
 
+			<TableCell>{proposal.title}</TableCell>
 
+			<TableCell><i>{proposal.createdAt}</i></TableCell>
 
+			<TableCell>
 
+				<a
 
+					href={`https://pioneerapp.xyz/#/proposals/preview/${proposal.id}`}
 
+					target="_blank"
 
+					rel="noreferrer"
 
+					style={{color: 'blue'}}
 
+				>
 
+					<i>Link to proposal</i>
 
+				</a>
 
+			</TableCell>
 
+			<TableCell><i>{proposal.status}</i></TableCell>
 
+		</TableRow>								
+	);
 
+};
 
 
 
 const Proposals = (props: { council: ElectedCouncil | undefined}) => {
 
 const Proposals = (props: { council: ElectedCouncil | undefined}) => {
 
   const { council } = props;
 
   const { council } = props;
 
   const { proposals, loading, error } = useProposals({ council });
 
   const { proposals, loading, error } = useProposals({ council });
 
 
 
+	const classes = useStyles2();
 
+	const [page, setPage] = React.useState(0);
 
+	const [rowsPerPage, setRowsPerPage] = React.useState(4);
 
+	
+  const handleChangePage = (event: unknown, newPage: number) => {
 
+    setPage(newPage);
 
+  };
 
+
 
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
 
+    setRowsPerPage(parseInt(event.target.value, 10));
 
+    setPage(0);
 
+  };
 
+
 
 	return (
 
 	return (
 
-    <SubBlock title="Proposals" stretch={true}>
 
+    <SubBlock title="Proposals" stretch={6}>
 
       { !loading && (
 
       { !loading && (
 
 				<>
 
 				<>
 
 					<TableContainer>
 
 					<TableContainer>
 
@@ -39,26 +76,31 @@ const Proposals = (props: { council: ElectedCouncil | undefined}) => {
 
 							</TableHead>
 
 							</TableHead>
 
 							{proposals && ( <>
 
 							{proposals && ( <>
 
 								<TableBody>
 
 								<TableBody>
 
-									{
 
-										proposals.map((proposal) => 
-											<TableRow key={proposal.id}>
 
-												<TableCell>{proposal.title}</TableCell>
 
-												<TableCell><i>{proposal.createdAt}</i></TableCell>
 
-												<TableCell>
 
-													<a
 
-														href={`https://pioneerapp.xyz/#/proposals/preview/${proposal.id}`}
 
-														target="_blank"
 
-														rel="noreferrer"
 
-													>
 
-														Link to porposal
 
-													</a>
 
-												</TableCell>
 
-												<TableCell><i>{proposal.status}</i></TableCell>
 
-											</TableRow>								
-										)
 
+									{rowsPerPage > 0 ? 
+											proposals.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
 
+												.map((proposal) => <ProposalWorker proposal={proposal}/>)
 
+										: proposals.map((proposal) => <ProposalWorker proposal={proposal} />)
 
 									}
 
 									}
 
 								</TableBody>
 
 								</TableBody>
 
 							</>)}
 
 							</>)}
 
+							<TableFooter>
 
+								<TableRow>
 
+									<TablePagination
 
+										rowsPerPageOptions={[4]}
 
+										colSpan={4}
 
+										count={proposals ? proposals.length : 0}
 
+										rowsPerPage={rowsPerPage}
 
+										page={page}
 
+										onPageChange={handleChangePage}
 
+										SelectProps={{
 
+											inputProps: { 'aria-label': 'rows per page' },
 
+											native: true,
 
+										}}
 
+										onRowsPerPageChange={handleChangeRowsPerPage}
 
+										ActionsComponent={TablePaginationActions}
 
+									/>
 
+								</TableRow>
 
+							</TableFooter>
 
 						</Table>
 
 						</Table>
 
 					</TableContainer>
 
 					</TableContainer>
 
 				</>
 
 				</>

+ 9 - 86
src/components/Dashboard/Workgroup.tsx
View File 

@@ -13,81 +13,7 @@ import TableHead from "@material-ui/core/TableHead";
 
 import TableRow from "@material-ui/core/TableRow";
 
 import TableRow from "@material-ui/core/TableRow";
 
 import TableFooter from '@material-ui/core/TableFooter';
 
 import TableFooter from '@material-ui/core/TableFooter';
 
 import TablePagination from '@material-ui/core/TablePagination';
 
 import TablePagination from '@material-ui/core/TablePagination';
 
-import IconButton from '@material-ui/core/IconButton';
 
-import FirstPageIcon from '@material-ui/icons/FirstPage';
 
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
-import LastPageIcon from '@material-ui/icons/LastPage';
 
-
 
-const useStyles1 = makeStyles((theme: Theme) =>
 
-  createStyles({
 
-    root: {
 
-      flexShrink: 0,
 
-      marginLeft: theme.spacing(2.5),
 
-    },
 
-  }),
 
-);
 
-
 
-interface TablePaginationActionsProps {
 
-  count: number;
 
-  page: number;
 
-  rowsPerPage: number;
 
-  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
 
-}
 
-
 
-const TablePaginationActions = (props: TablePaginationActionsProps) => {
 
-  const theme = useTheme();
 
-  const { count, page, rowsPerPage, onPageChange } = props;
 
-
 
-  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
-		console.log('first button is clicked')
 
-    onPageChange(event, 0);
 
-  };
 
-
 
-  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
-		console.log('back button is clicked')
 
-    onPageChange(event, page - 1);
 
-  };
 
-
 
-  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
-		console.log('next button is clicked')
 
-    onPageChange(event, page + 1);
 
-  };
 
-
 
-  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
-		console.log('last button is clicked')
 
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
 
-  };
 
-
 
-  return (
 
-    <div >
 
-      <IconButton
 
-        onClick={handleFirstPageButtonClick}
 
-        disabled={page === 0}
 
-        aria-label="first page"
 
-      >
 
-        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
 
-      </IconButton>
 
-      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
 
-        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
 
-      </IconButton>
 
-      <IconButton
 
-        onClick={handleNextButtonClick}
 
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 
-        aria-label="next page"
 
-      >
 
-        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
 
-      </IconButton>
 
-      <IconButton
 
-        onClick={handleLastPageButtonClick}
 
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 
-        aria-label="last page"
 
-      >
 
-        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
 
-      </IconButton>
 
-    </div>
 
-  );
 
-}
 
+import TablePaginationActions from './ui/TablePaginationActions';
 
 
 
 export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : WorkingGroup }) {
 
 export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : WorkingGroup }) {
 
 
 
@@ -136,7 +62,6 @@ export function GroupWorkers(props: { council: ElectedCouncil, workingGroup : Wo
 
 
 
 const useStyles2 = makeStyles({
 
 const useStyles2 = makeStyles({
 
 	table: {
 
 	table: {
 
-		minWidth: 500,
 
 	}
 
 	}
 
 })
 
 })
 
 
 
@@ -149,18 +74,16 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 
 	const [rowsPerPage, setRowsPerPage] = React.useState(4);
 
 	const [rowsPerPage, setRowsPerPage] = React.useState(4);
 
 	
 	
   const handleChangePage = (event: unknown, newPage: number) => {
 
   const handleChangePage = (event: unknown, newPage: number) => {
 
-		console.log(`handlechangepage : ${newPage}`)
 
     setPage(newPage);
 
     setPage(newPage);
 
   };
 
   };
 
 
 
   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
 
   const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
 
-		console.log(`handleChangeRowsPerPage: ${parseInt(event.target.value, 10)}`)
 
     setRowsPerPage(parseInt(event.target.value, 10));
 
     setRowsPerPage(parseInt(event.target.value, 10));
 
     setPage(0);
 
     setPage(0);
 
   };
 
   };
 
 
 
 	return (
 
 	return (
 
-    <SubBlock title="WorkGroup" stretch={true}>
 
+    <SubBlock title="WorkGroup" stretch={6}>
 
       { !loading && (
 
       { !loading && (
 
 				<>
 
 				<>
 
 					<TableContainer>
 
 					<TableContainer>
 
@@ -173,20 +96,20 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 
 									<TableCell>Budget/Debt at end of Term</TableCell>
 
 									<TableCell>Budget/Debt at end of Term</TableCell>
 
 								</TableRow>
 
 								</TableRow>
 
 							</TableHead>
 
 							</TableHead>
 
-							{workingGroups && ( <>
 
+							{workingGroups && ( 
 								<TableBody>
 
 								<TableBody>
 
-									{ /*rowsPerPage > 0 ? 
+									{ rowsPerPage > 0 ? 
 											workingGroups.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
 
 											workingGroups.slice(page * rowsPerPage, page *rowsPerPage + rowsPerPage)
 
 												.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
 
 												.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
 
-										:*/ workingGroups.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
 
+										: workingGroups.map((workingGroup) => <GroupWorkers key={workingGroup.id} council={council} workingGroup={workingGroup} />)
 
 									}
 
 									}
 
 								</TableBody>
 
 								</TableBody>
 
-							</>)}
 
-							{/* <TableFooter>
 
+							)}
 
+							<TableFooter>
 
 								<TableRow>
 
 								<TableRow>
 
 									<TablePagination
 
 									<TablePagination
 
 										rowsPerPageOptions={[4]}
 
 										rowsPerPageOptions={[4]}
 
-										colSpan={3}
 
+										colSpan={4}
 
 										count={workingGroups ? workingGroups.length : 0}
 
 										count={workingGroups ? workingGroups.length : 0}
 
 										rowsPerPage={rowsPerPage}
 
 										rowsPerPage={rowsPerPage}
 
 										page={page}
 
 										page={page}
 
@@ -199,7 +122,7 @@ const WorkGroup = (props: { council: ElectedCouncil | undefined}) => {
 
 										ActionsComponent={TablePaginationActions}
 
 										ActionsComponent={TablePaginationActions}
 
 									/>
 
 									/>
 
 								</TableRow>
 
 								</TableRow>
 
-							</TableFooter> */}
 
+							</TableFooter>
 
 						</Table>
 
 						</Table>
 
 					</TableContainer>
 
 					</TableContainer>
 
 				</>
 
 				</>

+ 6 - 14
src/components/Dashboard/index.tsx
View File 

@@ -43,23 +43,15 @@ const Dashboard = (props: IProps) => {
 
           <Banner description={description1}/>
 
           <Banner description={description1}/>
 
         </Grid>
 
         </Grid>
 
         <Grid container spacing={3}>
 
         <Grid container spacing={3}>
 
-          <Memberships council={council}
 
-          />
 
-          <Channels council={council}
 
-          />
 
-          <Videos council={council}
 
-          />
 
-          <Forum council={council}
 
-          />
 
-          <Election council={council}
 
-          />  
-          <Validation council={council}
 
-          />
 
+          <Memberships council={council}/>
 
+          <Channels council={council}/>
 
+          <Videos council={council}/>
 
+          <Forum council={council}/>
 
+          <Election council={council}/>  
+          <Validation council={council}/>
 
         </Grid>
 
         </Grid>
 
         <Grid container spacing={3}>
 
         <Grid container spacing={3}>
 
           <WorkGroup council={council}/>
 
           <WorkGroup council={council}/>
 
-        </Grid>
 
-        <Grid container spacing={3}>
 
           <Proposals council={council} />
 
           <Proposals council={council} />
 
         </Grid>
 
         </Grid>
 
       </Container>
 
       </Container>

+ 2 - 2
src/components/Dashboard/ui/SubBlock.tsx
View File 

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 
 
 const SubBlock = (props: {
 
 const SubBlock = (props: {
 
   title: string,
 
   title: string,
 
-  stretch: boolean,
 
+  stretch: number,
 
   children: any
 
   children: any
 
 }) => { 
 }) => { 
   const { 
   const { 
@@ -43,7 +43,7 @@ const SubBlock = (props: {
 
   const classes = useStyles();
 
   const classes = useStyles();
 
 
 
   return (
 
   return (
 
-    <Grid className={classes.grid} item xs={stretch == true? 12: 4} md={stretch == true? 12: 4} sm={12}>
 
+    <Grid className={classes.grid} item xs={stretch? stretch: 4} md={stretch? stretch: 4} sm={12}>
 
       <Paper className={classes.paper}>
 
       <Paper className={classes.paper}>
 
         { title && 
         { title && 
           <AppBar className={classes.root} position="static">
 
           <AppBar className={classes.root} position="static">

+ 76 - 0
src/components/Dashboard/ui/TablePaginationActions.tsx
View File 

@@ -0,0 +1,76 @@
 
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 
+
 
+import IconButton from '@material-ui/core/IconButton';
 
+import FirstPageIcon from '@material-ui/icons/FirstPage';
 
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
+import LastPageIcon from '@material-ui/icons/LastPage';
 
+
 
+const useStyles1 = makeStyles((theme: Theme) =>
 
+  createStyles({
 
+    root: {
 
+      flexShrink: 0,
 
+      marginLeft: theme.spacing(2.5),
 
+    },
 
+  }),
 
+);
 
+
 
+interface TablePaginationActionsProps {
 
+  count: number;
 
+  page: number;
 
+  rowsPerPage: number;
 
+  onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
 
+}
 
+
 
+const TablePaginationActions = (props: TablePaginationActionsProps) => {
 
+	const classes = useStyles1();
 
+  const theme = useTheme();
 
+  const { count, page, rowsPerPage, onPageChange } = props;
 
+
 
+  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
+    onPageChange(event, 0);
 
+  };
 
+
 
+  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
+    onPageChange(event, page - 1);
 
+  };
 
+
 
+  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
+    onPageChange(event, page + 1);
 
+  };
 
+
 
+  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
 
+  };
 
+
 
+  return (
 
+    <div className={classes.root}>
 
+      <IconButton
 
+        onClick={handleFirstPageButtonClick}
 
+        disabled={page === 0}
 
+        aria-label="first page"
 
+      >
 
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
 
+      </IconButton>
 
+      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
 
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
 
+      </IconButton>
 
+      <IconButton
 
+        onClick={handleNextButtonClick}
 
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 
+        aria-label="next page"
 
+      >
 
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
 
+      </IconButton>
 
+      <IconButton
 
+        onClick={handleLastPageButtonClick}
 
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 
+        aria-label="last page"
 
+      >
 
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
 
+      </IconButton>
 
+    </div>
 
+  );
 
+}
 
+
 
+export default TablePaginationActions;

+ 34 - 37
webpack.config.js
View File 

@@ -50,42 +50,42 @@ module.exports = {
 
                 use: 'raw-loader',
 
                 use: 'raw-loader',
 
             },
 
             },
 
             {
 
             {
 
-                test: /\.(less)$/,
 
-                exclude: /\.module\.less$/,
 
-                use: [
 
-                  {
 
-                    loader: 'css-loader',
 
-                    options: {
 
-                      importLoaders: 2,
 
-                      sourceMap: !!DEV,
 
-                    },
 
+              test: /\.(less)$/,
 
+              exclude: /\.module\.less$/,
 
+              use: [
 
+                {
 
+                  loader: 'css-loader',
 
+                  options: {
 
+                    importLoaders: 2,
 
+                    sourceMap: !!DEV,
 
                   },
 
                   },
 
-                  {
 
-                    loader: 'less-loader',
 
-                    options: {
 
-                      sourceMap: !!DEV,
 
-                    },
 
+                },
 
+                {
 
+                  loader: 'less-loader',
 
+                  options: {
 
+                    sourceMap: !!DEV,
 
                   },
 
                   },
 
-                ],
 
-              },
 
-              {
 
-                test: /\.(sass|scss)$/,
 
-                use: [
 
-                  {
 
-                    loader: 'css-loader',
 
-                    options: {
 
-                      importLoaders: 2,
 
-                      sourceMap: !!DEV,
 
-                    },
 
+                },
 
+              ],
 
+            },
 
+            {
 
+              test: /\.(sass|scss)$/,
 
+              use: [
 
+                {
 
+                  loader: 'css-loader',
 
+                  options: {
 
+                    importLoaders: 2,
 
+                    sourceMap: !!DEV,
 
                   },
 
                   },
 
-                  {
 
-                    loader: 'sass-loader',
 
-                    options: {
 
-                      sourceMap: !!DEV,
 
-                    },
 
+                },
 
+                {
 
+                  loader: 'sass-loader',
 
+                  options: {
 
+                    sourceMap: !!DEV,
 
                   },
 
                   },
 
-                ],
 
-              },            
+                },
 
+              ],
 
+            },
 
         ]
 
         ]
 
     },
 
     },
 
     resolve: {
 
     resolve: {
 
@@ -98,14 +98,11 @@ module.exports = {
 
             fs: false,
 
             fs: false,
 
         },
 
         },
 
         plugins: [ new TsconfigPathsPlugin({ configFile: "./tsconfig.json" }) ]
 
         plugins: [ new TsconfigPathsPlugin({ configFile: "./tsconfig.json" }) ]
 
-        // alias: {
 
-        //   '@': path.resolve(__dirname, './src/'),
 
-        //   'react/jsx-runtime': require.resolve('react/jsx-runtime'),
 
-        // },
 
       },
 
       },
 
     plugins:[
 
     plugins:[
 
       new HtmlWebpackPlugin({
 
       new HtmlWebpackPlugin({
 
-          template: path.join(__dirname,'/public/index.html')
 
+        inject: false,
 
+        template: path.resolve(__dirname, "public/index.html"),
 
       }),
 
       }),
 
       new webpack.ProvidePlugin({
 
       new webpack.ProvidePlugin({
 
         Buffer: ['buffer', 'Buffer'],
 
         Buffer: ['buffer', 'Buffer'],