Search bulletins page

components/Layout.jsx

@@ -1,16 +1,17 @@
 import React, { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 import BottomNav from "./bottomNav";
-import Header from "./header";
 import * as C from "@material-ui/core";
 import useScrollTrigger from "@material-ui/core/useScrollTrigger";
 import { motion, useTransform, useMotionValue } from "framer-motion";
 import useFramerScroll from "../util/hooks/useFramerScroll";
-import { useSession } from "next-auth/client";
 import theme from "../styles/theme";
+import { RadioButtonUncheckedRounded } from "@material-ui/icons";
 //https://nextjs.org/docs/basic-features/layouts
 
 const Layout = ({ children }) => {
   // const [session, loading] = useSession();
+  const router = useRouter();
 
   const scrollTrigger = useScrollTrigger({
     threshold: 20,
@@ -21,12 +22,20 @@ const Layout = ({ children }) => {
   useEffect(() => {
     y.set(bg);
   }, [bg, y]);
-  const yRange = [0, 0.5, 1];
-  const background = useTransform(y, yRange, [
-    `linear-gradient(180deg, #06baec 0%, #fafafa 100%)`,
-    `linear-gradient(180deg, #fafafa 0%, #f1da00 100%)`,
-    `linear-gradient(180deg, #f1da00 0%, #06baec 100%)`,
-  ]);
+  const yRange = router.pathname == "/Landing" ? [0, 0.5, 1] : [0, 1];
+  const gradientArr =
+    router.pathname == "/Landing"
+      ? [
+          `linear-gradient(180deg, #06baec 0%, #fafafa 100%)`,
+          `linear-gradient(180deg, #fafafa 0%, #f1da00 100%)`,
+          `linear-gradient(180deg, #f1da00 0%, #06baec 100%)`,
+        ]
+      : [
+          `linear-gradient(180deg, #06baec 0%, ${theme.palette.primary.light} 100%)`,
+          `linear-gradient(180deg, ${theme.palette.primary.light} 0%, #06baec 100%)`,
+        ];
+
+  const background = useTransform(y, yRange, gradientArr);
 
   return (
     <>

components/LoadingErrorMessage.jsx

@@ -0,0 +1,5 @@
+const LoadingErrorMessage = () => {
+  return "Sorry, there was an error";
+};
+
+export default LoadingErrorMessage;

components/forms/offerForm.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+import * as C from "@material-ui/core";
+import GlassCard from "../glassCard";
+import { faBeer } from "@fortawesome/free-solid-svg-icons";
+import ScalableIcon from "../ScalableIcon";
+
+const CashSlider = C.withStyles({
+  root: {
+    color: "#fafafa",
+    height: 8,
+  },
+  thumb: {
+    height: 24,
+    width: 24,
+    backgroundColor: "#fff",
+    border: "2px solid #06baec",
+    marginTop: -8,
+    marginLeft: -12,
+    "&:focus, &:hover, &$active": {
+      boxShadow: "#06baec",
+    },
+  },
+  active: {},
+  valueLabel: {
+    left: "calc(-50% + 4px)",
+    color: "#06baec",
+  },
+  track: {
+    height: 8,
+    borderRadius: 4,
+  },
+  rail: {
+    height: 8,
+    borderRadius: 4,
+  },
+})(C.Slider);
+
+const useStyles = C.makeStyles(() => ({
+  formItem: {
+    margin: "15px 0px",
+    width: "100%",
+  },
+}));
+
+const formState = {
+  cashChecked: false,
+  beerChecked: false,
+  otherChecked: false,
+  cash: 20,
+  beer: "",
+  other: "",
+};
+
+const OfferForm = ({ bulletin }) => {
+  const classes = useStyles();
+  const { open } = bulletin.data;
+  //cash, beer, other
+  const [form, setForm] = useState(formState);
+
+  const handleChange = (name) => (event, newValue) => {
+    setForm({ ...form, [name]: newValue });
+  };
+
+  const handleSubmit = (e, form) => {
+    console.log(e, form);
+  };
+
+  const slider = (
+    <C.CardActions className={classes.bot}>
+      <C.Button
+        type="submit"
+        color="secondary"
+        variant="contained"
+        startIcon={open && <ScalableIcon icon={faBeer} />}
+        disabled={!open}
+        style={{ width: "auto" }}
+        onClick={(e) => handleSubmit(e, form)}
+      >
+        {open ? "Make Offer" : "Deal Pending"}
+      </C.Button>
+    </C.CardActions>
+  );
+
+  return (
+    <>
+      <GlassCard>
+        <C.CardHeader title={`Offer Form`} align="right" />
+        <C.Divider variant="middle" style={{ marginBottom: "15px" }} />
+        <C.CardContent>
+          <form>
+            <C.CardActions style={{ justifyContent: "center" }}>
+              <C.FormControlLabel
+                control={
+                  <C.Switch
+                    color="secondary"
+                    checked={form.cashChecked}
+                    onChange={handleChange("cashChecked")}
+                  />
+                }
+                label="Cash"
+                labelPlacement="top"
+              />
+
+              <C.FormControlLabel
+                control={
+                  <C.Switch
+                    color="secondary"
+                    checked={form.beerChecked}
+                    onChange={handleChange("beerChecked")}
+                  />
+                }
+                label="Beer"
+                labelPlacement="top"
+              />
+
+              <C.FormControlLabel
+                control={
+                  <C.Switch
+                    color="secondary"
+                    checked={form.otherChecked}
+                    onChange={handleChange("otherChecked")}
+                  />
+                }
+                label="Other"
+                labelPlacement="top"
+              />
+            </C.CardActions>
+
+            <C.CardActions style={{ flexDirection: "column" }}>
+              {form.cashChecked && (
+                <CashSlider
+                  value={form.cash}
+                  className={classes.formItem}
+                  valueLabelDisplay="auto"
+                  aria-label="Cash slider"
+                  defaultValue={20}
+                  onChange={handleChange("cash")}
+                />
+              )}
+              {form.beerChecked && (
+                <C.TextField
+                  className={classes.formItem}
+                  label="Beer"
+                  placeholder="What can you offer?"
+                  value={form.beer}
+                  onChange={(e) => setForm({ ...form, beer: e.target.value })}
+                  variant="outlined"
+                />
+              )}
+              {form.otherChecked && (
+                <C.TextField
+                  className={classes.formItem}
+                  label="Other"
+                  placeholder="Have an unusual offer?"
+                  value={form.other}
+                  onChange={(e) => setForm({ ...form, other: e.target.value })}
+                  variant="outlined"
+                />
+              )}
+            </C.CardActions>
+          </form>
+        </C.CardContent>
+      </GlassCard>
+      {slider}
+    </>
+  );
+};
+
+export default OfferForm;

components/glassCard.jsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import * as C from "@material-ui/core";
+
+const useStyles = C.makeStyles(() => ({
+  glass: {
+    backdropFilter: "blur(16px) saturate(180%)",
+    // webkitBackdropFilter: "blur(16px) saturate(180%)",
+    backgroundColor: "rgba(255, 255, 255, 0.5)",
+    borderRadius: "12px",
+    border: "1px solid rgba(209, 213, 219, 0.3)",
+    minHeight: "200px",
+    margin: "15px 0px",
+    display: "flex",
+    flexDirection: "column",
+  },
+}));
+
+const GlassCard = ({ props, children }) => {
+  const classes = useStyles();
+
+  return (
+    <C.Card className={classes.glass} {...props}>
+      {children}
+    </C.Card>
+  );
+};
+
+export default GlassCard;

components/search-bulletins/bulletinCard.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import Link from "next/link";
+import * as C from "@material-ui/core";
+import { faBeer } from "@fortawesome/free-solid-svg-icons";
+import GlassCard from "../glassCard";
+import ScalableIcon from "../ScalableIcon";
+import theme from "../../styles/theme";
+
+const useStyles = C.makeStyles((theme) => ({
+  card: {
+    display: "flex",
+  },
+  stretch: {
+    display: "flex",
+    flex: "1 1 auto",
+    alignItems: "stretch",
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+  },
+  bot: {
+    // position: "absolute",
+    // bottom: "0",
+    flex: "1 1 auto",
+    width: "100%",
+  },
+}));
+
+const BulletinCard = (props) => {
+  const { id, user_id, title, content, current_offers, open } = props;
+  const classes = useStyles();
+
+  const infoBlock = (
+    <Link passHref href={`/SearchBulletins/${id}`}>
+      <C.CardActionArea className={classes.stretch}>
+        <C.CardContent className={classes.content}>
+          {title}
+          <C.Divider variant="middle" />
+          {content}
+          <C.Divider variant="middle" />
+        </C.CardContent>
+      </C.CardActionArea>
+    </Link>
+  );
+
+  const slider = (
+    <C.CardActions className={classes.bot}>
+      <Link passHref href={`/SearchBulletins/${id}`}>
+        <C.Button
+          color="secondary"
+          variant="contained"
+          startIcon={open && <ScalableIcon icon={faBeer} />}
+          disabled={!open}
+          style={{ width: "auto" }}
+        >
+          {open ? "Make Offer" : "Deal Pending"}
+        </C.Button>
+      </Link>
+    </C.CardActions>
+  );
+
+  return (
+    <GlassCard className={classes.card}>
+      {infoBlock}
+      {slider}
+    </GlassCard>
+  );
+};
+
+export default BulletinCard;

components/search-bulletins/singleBulletin.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import * as C from "@material-ui/core";
+import GlassCard from "../glassCard";
+import theme from "../../styles/theme";
+
+const useStyles = C.makeStyles((theme) => ({
+  stretch: {
+    display: "flex",
+    flex: "1 1 auto",
+    alignItems: "stretch",
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+  },
+  bot: {
+    flex: "1 1 auto",
+    width: "100%",
+  },
+}));
+
+const SingleBulletin = ({ bulletin, user }) => {
+  const { id, content, open, title } = bulletin.data;
+  const { num_trades, profile_pic, username } = user.data;
+  const classes = useStyles();
+
+  const infoBlock = (
+    <C.CardContent className={classes.content}>
+      <C.Typography variant="h6">{title}</C.Typography>
+      <C.Typography variant="body1">{content}</C.Typography>
+    </C.CardContent>
+  );
+
+  const userBlock = (
+    <C.CardContent className={classes.content}>
+      <C.Avatar
+        alt={username}
+        src={profile_pic}
+        style={{ height: "80px", width: "80px", alignSelf: "flex-end" }}
+      />
+      {/* <C.Divider variant="middle" style={{ marginBottom: "15px" }} /> */}
+      <C.Typography variant="h6">{username}</C.Typography>
+      <C.Typography variant="body2">
+        Number of completed trades: {num_trades}
+      </C.Typography>
+    </C.CardContent>
+  );
+
+  return (
+    <>
+      <GlassCard>
+        <C.CardHeader title={`Bulletin No. ${id}`} align="right" />
+        <C.Divider variant="middle" />
+        {userBlock}
+        <C.Divider variant="middle" />
+        {infoBlock}
+      </GlassCard>
+    </>
+  );
+};
+
+export default SingleBulletin;