Skip to content

Commit

Permalink
Added product form
Browse files Browse the repository at this point in the history
  • Loading branch information
amjadpanjeeri committed Jul 28, 2020
1 parent 3caa111 commit 6595f2e
Show file tree
Hide file tree
Showing 14 changed files with 762 additions and 5 deletions.
Binary file added assets/images/carrot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
259 changes: 259 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"i18next": "^19.6.2",
"mdbreact": "^4.27.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-feather": "^2.0.8",
"react-i18next": "^11.7.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
"react-scripts": "3.4.1",
"react-spring": "^8.0.27",
"react-use": "^15.3.2"
},
"scripts": {
"start": "react-scripts start",
Expand Down
54 changes: 54 additions & 0 deletions src/AddProduct/add-product.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react";
import { MDBInput, MDBContainer, MDBRow, MDBBtn, MDBCol,MDBDropdownItem,MDBDropdownMenu ,MDBDropdown,MDBDropdownToggle} from "mdbreact";

const AddProduct = () => {
return (
<MDBContainer className=" mx-auto border p-5">
<MDBRow className=" mx-auto">
<MDBCol md="8" className="mx-auto">
<form>
<p className="h3 text-center mb-4">Add Product</p>
<div className="grey-text">
<MDBInput label="Name of Product" type="text" />
<MDBInput type="textarea" label="Description" rows="3" />
</div>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text" id="inputGroupFileAddon01">
Upload</span>
</div>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01"
/>
<label className="custom-file-label" htmlFor="inputGroupFile01">
Choose Image</label>
</div>
</div>
<MDBDropdown className="mt-3" dropright size="sm">
<MDBDropdownToggle caret color="green">
Categories
</MDBDropdownToggle>
<MDBDropdownMenu basic>
<MDBDropdownItem>category 1</MDBDropdownItem>
<MDBDropdownItem>category 2</MDBDropdownItem>
<MDBDropdownItem>category 3</MDBDropdownItem>
<MDBDropdownItem>category 4</MDBDropdownItem>
<MDBDropdownItem>category 5</MDBDropdownItem>
<MDBDropdownItem>category 6</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
<div className="text-center mt-3">
<MDBBtn color="green" size="sm">Add Product</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}

export default AddProduct;
2 changes: 1 addition & 1 deletion src/ProductInventoryPage/productInventory.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'

import productInventoryStyle from "./productInventoryStyle.module.css"
// import productInventoryStyle from "./productInventoryStyle.module.css"
//className={productInventoryPage.className} using module.css to avoid collision of same css variable in multiple files

const ProductInventoryPage = () =>{
Expand Down
4 changes: 2 additions & 2 deletions src/ProductListPage/productList.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';
import { MDBContainer } from '../src';
import { MDBTable,MDBContainer, MDBTableBody, MDBTableHead } from 'mdbreact';
// import { } from '../';
// import { MDBTypography, MDBBox } from 'mdbreact';

const BasicTable = () => {
Expand Down
2 changes: 1 addition & 1 deletion src/ProductPage/product.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'

import productStyle from "./productStyle.module.css"
// import productStyle from "./productStyle.module.css"
//className={ProductInventoryPage.className} using module.css to avoid collision of same css variable in multiple files


Expand Down
161 changes: 161 additions & 0 deletions src/covidDashboard/Navbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import {
SLIDE_IN,
SLIDE_OUT,
SLIDE_IN_MOBILE,
SLIDE_OUT_MOBILE,
} from './animation';

import React, {useState, useCallback, useRef} from 'react';
import * as Icon from 'react-feather';
import {useTranslation} from 'react-i18next';
import {Link} from 'react-router-dom';
import {useSpring, useTransition, animated} from 'react-spring';
import {useLockBodyScroll, useWindowSize} from 'react-use';

function Navbar({
pages,
darkMode,
}) {


const [expand, setExpand] = useState(false);

useLockBodyScroll(expand);
const windowSize = useWindowSize();

const [spring, set, stop] = useSpring(() => ({opacity: 0}));
set({opacity: 1});
stop();

const transitions = useTransition(expand, null, {
from: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN,
enter: windowSize.width < 769 ? SLIDE_OUT_MOBILE : SLIDE_OUT,
leave: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN,
config: {mass: 1, tension: 210, friction: 26},
});

const handleMouseEnter = useCallback(() => {
if (windowSize.width > 769) {
setExpand(true);
}
}, [windowSize.width]);

return (
<animated.div className="Navbar" style={spring}>


<div className="navbar-middle">
<Link to="/" onClick={setExpand.bind(this, false)}>
Covid19<span>India</span>
</Link>
</div>

<div
className="navbar-right"
onMouseEnter={handleMouseEnter}
{...(windowSize.width < 769 && {
onClick: setExpand.bind(this, !expand),
})}
>
{windowSize.width < 769 && (
<span></span>
)}

{windowSize.width > 769 && (
<React.Fragment>
<Link to="/">
<span>
<Icon.Home {...activeNavIcon('/')} />
</span>
</Link>
<Link to="/blog">
<span>
<Icon.Book {...activeNavIcon('/blog')} />
</span>
</Link>
<Link to="/about">
<span>
<Icon.HelpCircle {...activeNavIcon('/about')} />
</span>
</Link>
<span>
<SunMoon {...{darkMode}} />
</span>
</React.Fragment>
)}
</div>

{transitions.map(({item, key, props}) =>
item ? (
<animated.div key={key} style={props}>
<Expand {...{pages, setExpand, darkMode, windowSize}} />
</animated.div>
) : (
<animated.div key={key} style={props}></animated.div>
)
)}
</animated.div>
);
}

function Expand({pages, setExpand, darkMode, windowSize}) {
const expandElement = useRef(null);
const {t} = useTranslation();

const handleMouseLeave = useCallback(() => {
windowSize.width > 768 && setExpand(false);
}, [setExpand, windowSize.width]);

return (
<div className="expand" ref={expandElement} onMouseLeave={handleMouseLeave}>
{pages.map((page, i) => {
if (page.showInNavbar === true) {
return (
<Link
to={page.pageLink}
key={i}
{...(windowSize.width < 769 && {
onClick: setExpand.bind(this, false),
})}
>
<span
{...navLinkProps(page.pageLink, page.animationDelayForNavbar)}
>
{t(page.displayName)}
</span>
</Link>
);
}
return null;
})}

{windowSize.width < 768 && <SunMoon {...{darkMode}} />}

<div className="expand-bottom">
<h5>{t('A crowdsourced initiative.')}</h5>
</div>
</div>
);
}

export default Navbar;

const navLinkProps = (path, animationDelay) => ({
className: `${window.location.pathname === path ? 'focused' : ''}`,
});

const activeNavIcon = (path) => ({
style: {
stroke: window.location.pathname === path ? '#4c75f2' : '',
},
});

const SunMoon = ({darkMode}) => {
return (
<div className="SunMoon" onClick={darkMode.toggle}>
<div>
{darkMode.value ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />}
</div>
</div>
);
};
85 changes: 85 additions & 0 deletions src/covidDashboard/animation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@

/*
* Navbar
*/

export const SLIDE_IN = {
position: 'absolute',
transform: 'translate3d(-20rem, 0, 0)',
height: '100vh',
zIndex: -1,
};

export const SLIDE_OUT = {
position: 'absolute',
transform: 'translate3d(10rem, 0, 0)',
};

export const SLIDE_IN_MOBILE = {
opacity: 1,
position: 'absolute',
height: '100vh',
top: 64,
zIndex: 999,
};

export const SLIDE_OUT_MOBILE = {
opacity: 1,
position: 'absolute',
height: '100vh',
top: 64,
zIndex: 999,
};

/*
* Tooltip
*/

export const TOOLTIP_FADE_IN = {
opacity: 1,
transform: 'translate3d(0, 0px, 0)',
zIndex: 999,
position: 'absolute',
pointerEvents: 'none',
};

export const TOOLTIP_FADE_OUT = {
opacity: 0,
transform: 'translate3d(0, 2px, 0)',
zIndex: 999,
position: 'absolute',
pointerEvents: 'none',
};

/*
* Language Switcher
*/

export const ENTER_IN = {
opacity: 1,
marginTop: '7.5rem',
marginBottom: '30rem',
};

export const ENTER_OUT = {
opacity: 0,
height: '0rem',
marginTop: '0rem',
marginBottom: '0rem',
};

/*
* Table
*/

export const TABLE_FADE_IN = {
opacity: 1,
transform: 'translate3d(0, 0px, 0)',
height: 200,
};

export const TABLE_FADE_OUT = {
opacity: 0,
transform: 'translate3d(0, 2px, 0)',
height: 0,
};
13 changes: 13 additions & 0 deletions src/covidDashboard/locales.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"english": "English",
"hindi": "हिंदी",
"bengali": "বাংলা",
"gujarati": "ગુજરાતી",
"kannada": "ಕನ್ನಡ",
"malayalam": "മലയാളം",
"marathi": "मराठी",
"odiya": "ଓଡିଆ",
"punjabi": "ਪੰਜਾਬੀ",
"tamil": "தமிழ்",
"telugu": "తెలుగు"
}
Loading

0 comments on commit 6595f2e

Please sign in to comment.