Fix refresh

Containers/group-list.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import GroupCard from '../components/Goups/group-card';
 

Containers/group.js

@@ -16,9 +16,8 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-const Group = ({id}) => {
+const Group = ({group}) => {
 	const classes = useStyles();
-	const group = getGroupById(id)
 	return (
 		<div className={classes.div}>
 			<GroupHead props={group} />

components/Goups/group-head.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
+import Button from '../UI/Button'
 import CardHeader from '@material-ui/core/CardHeader';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const GroupHead = (props) => {
+	const explore = `groups/${props._id}`
 	return (
 		<React.Fragment>
 			<CardHeader
@@ -13,16 +15,11 @@ const GroupHead = (props) => {
 						<MoreVertIcon />
 					</IconButton>
 				}
-				title={
-					<Link
-						href={{
-							pathname: `groups/[id]`,
-							query: { id: props._id },
-						}}>
-						{props.name}
-					</Link>
-				}
+				title={props.name}
 			/>
+			<Button link={explore}>
+				{"See more..."}
+			</Button>
 		</React.Fragment>
 	);
 };

components/MUI/theme.js

@@ -12,7 +12,7 @@ const theme = createMuiTheme({
 			dark  : '#005662',
 		},
 		secondary  : {
-			main : '#19857b',
+			main : '#368ff5',
 		},
 		error      : {
 			main : '#913029',

components/UI/Button.js

@@ -0,0 +1,28 @@
+import {default as MuiButton} from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from 'next/link'
+
+const useStyles = makeStyles((theme) => ({
+	btn: {
+    textDecoration: 'none',
+    fontSize: '30px',
+  },
+}));
+
+const Button = (props) => {
+  const classes = useStyles()
+	if (props.link) {
+		return (
+				<Link href={props.link}>
+					<a className={classes.btn}>{props.children}</a>
+				</Link>
+		);
+	}
+
+	return (
+		<MuiButton className={classes.btn}>
+			{props.children}
+		</MuiButton>
+	);
+};
+export default Button;

components/UI/LogoLink.js

@@ -1,21 +1,32 @@
-import React from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
-import {makeStyles} from '@material-ui/core/styles'
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
-  img: {
-    cursor: 'pointer',
-  }
-}))
+	img: {
+		cursor: 'pointer',
+    marginTop: theme.spacing(1),
+    marginLeft: theme.spacing(40),
+    marginRight: theme.spacing(5)
+	},
+}));
 
 const LogoLink = () => {
-  const classess = useStyles()
-  return (
-    <Link href="/">
-        <Image className={classess.img} src='/images/IMGLINK2.jpg' height={0} width={200} />
-    </Link>
-  )
-}
+	const classess = useStyles();
+	return (
+		<Link href='/'>
+			<a className={classess.img}>
+				<Image
+					className={classess.img}
+					src='/images/IMGLINK2.jpg'
+					height={'60vw'}
+					width={'200vw'}
+          alt={'Home'}
+				/>
+			</a>
+		</Link>
+	);
+};
 
-export default LogoLink
+export default LogoLink;

components/UI/NavTab.js

@@ -6,9 +6,11 @@ import Smooth from './Smooth';
 import Link from 'next/link';
 
 const useStyles = makeStyles((theme) => ({
-	tab : {
-		color  : theme.palette.primary,
-		height : 70,
+	tab: {
+		color: theme.palette.primary.light,
+		fontSize: 20,
+		height: 70,
+
 	},
 }));
 
@@ -19,14 +21,18 @@ const NavTab = (props) => {
 	return (
 		<Fragment>
 			<Smooth style={router.pathname === pathname}>
-				<Link href={pathname}>
-					<Tab
-						variant='outlined'
-						label={name}
-						className={classes.tab}
-						disabled={bool}
-					/>
-				</Link>
+				<a>
+					<Link href={pathname}>
+						<Tab
+							variant='outlined'
+							size="sm"
+							label={name}
+							className={classes.tab}
+							disabled={bool}
+							value={100}
+						/>
+					</Link>
+				</a>
 			</Smooth>
 		</Fragment>
 	);

components/UI/Smooth.js

@@ -2,8 +2,9 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
 	active   : {
-		backgroundColor : theme.palette.primary.dark,
-		height          : '2px',
+		backgroundColor : 'grey',
+		height          : '3px',
+		textDecoration: 'none',
 	},
 	inactive : {
 		backgroundColor : 'transparent',
@@ -17,7 +18,7 @@ const Smooth = (props) => {
 	return (
 		<div>
 			{children}
-			<li
+			<div
 				className={style ? classes.active:classes.inactive}
 			/>
 		</div>

components/UI/progress.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    height: '10px',
+    '& > * + *': {
+      height: 10,
+    },
+  },
+}));
+
+const Progress = () => {
+  const classes = useStyles()
+  return (
+    <div className={classes.root}>
+      <LinearProgress color="secondary" />
+    </div>
+  );
+}
+
+export default Progress

components/layout/NavBar.js

@@ -9,13 +9,11 @@ const useStyles = makeStyles((theme) => ({
 	main: {
 		backgroundColor: theme.palette.primary.dark,
 		display: 'flex',
-		flexDirection: 'column',
 		position: 'fixed',
 	},
 	tabs: {
 		flex: 1,
 		bottom: 0,
-		paddingLeft: theme.spacing(0),
 	},
   div:{
     marginBottom: theme.spacing(9)
@@ -28,7 +26,6 @@ const NavBar = () => {
 		<Fragment>
 			<AppBar position='static' color='primary' className={classes.main}>
 				<Tabs className={classes.tabs}>
-					<NavTab name={''} pathname='' bool={true} />
 					<LogoLink />
 					<NavTab name={'Groups'} pathname={'/groups'} bool={false} />
 				</Tabs>

pages/groups/[id].js

@@ -1,17 +1,17 @@
-import Group from '../../Containers/group'
-import {useRouter} from 'next/router'
-import Image from 'next/image'
-import {getGroupById} from '../../dummy'
+import Group from '../../Containers/group';
+import { useRouter } from 'next/router';
+import { getGroupById } from '../../dummy';
+import Progress from '../../components/UI/progress'
 
 const GroupPage = () => {
-  const router = useRouter()
-  const id = router.query.id
-  
-  return (
-    <div>
-      <Group id={id}/>
-    </div>
-  )
-}
+	const router = useRouter();
+	const group = getGroupById(router.query.id);
+	console.log(group, router.query);
+	if (group) {
+		return <Group group={group} />;
+	} else {
+		return <Progress />;
+	}
+};
 
-export default GroupPage
+export default GroupPage;