Merge pull request #13 from calblueprint/buyankhuu/logOutButton

Buyankhuu/log out button

src/api/supabase/auth/auth.tsx

@@ -11,13 +11,19 @@ export const handleSignUp = async (email: string, password: string) => {
 };
 
 export const signInWithEmail = async (email: string, password: string) => {
+  console.log('hi');
   const { data, error } = await supabase.auth.signInWithPassword({
     email,
     password,
   });
-  console.log(data);
 };
 
 export const signOut = async () => {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  console.log('hi');
+  console.log(user);
   const { error } = await supabase.auth.signOut();
+  console.log(user);
 };

src/app/login/page.tsx

@@ -1,39 +1,41 @@
 'use client';
 
 import { useState } from 'react';
+import LoginForm from '../../components/LoginForm';
 
 import {
-  handleSignUp,
-  signInWithEmail,
-  signOut,
-} from '../../api/supabase/auth/auth';
+  GlobalStyle,
+  Fullscreen,
+  Img,
+  LoginBox,
+  LoginContent,
+  WelcomeSign,
+  Button,
+} from './styles';
 
-export default function Login() {
+import { handleSignUp, signInWithEmail } from '../../api/supabase/auth/auth';
+
+export default function App() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-
   return (
-    <>
-      <input
-        name="email"
-        onChange={e => setEmail(e.target.value)}
-        value={email}
-      />
-      <input
-        type="password"
-        name="password"
-        onChange={e => setPassword(e.target.value)}
-        value={password}
-      />
-      <button type="button" onClick={() => handleSignUp(email, password)}>
-        Sign up
-      </button>
-      <button type="button" onClick={() => signInWithEmail(email, password)}>
-        Sign in
-      </button>
-      <button type="button" onClick={signOut}>
-        Sign out
-      </button>
-    </>
+    <main>
+      <GlobalStyle />
+      <Fullscreen>
+        <Img />
+        <LoginBox>
+          <LoginContent>
+            <WelcomeSign>Welcome</WelcomeSign>
+            <LoginForm changeUserName={setEmail} changePassword={setPassword} />
+            <Button onClick={() => signInWithEmail(email, password)}>
+              Log In
+            </Button>
+            <button type="button" onClick={() => handleSignUp(email, password)}>
+              Sign up
+            </button>
+          </LoginContent>
+        </LoginBox>
+      </Fullscreen>
+    </main>
   );
 }

src/app/profileScreen/.env

@@ -0,0 +1,2 @@
+SUPABASE_URL = https://raqpvvgsmwarxhaialcz.supabase.co
+REACT_APP_ANON_KEY = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJhcXB2dmdzbXdhcnhoYWlhbGN6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTYxODg2MTgsImV4cCI6MjAxMTc2NDYxOH0.triHI7DNSzNeAibtktBZ1b2wQuwnd0WL7R_yZYOJbPc

src/app/profileScreen/page.tsx

@@ -1,7 +1,14 @@
+'use client';
+
+import { LogOutButton, GlobalStyle } from './style';
+
+import { signOut } from '../../api/supabase/auth/auth';
+
 export default function Profile() {
   return (
     <main>
-      <div>Profile</div>
+      <GlobalStyle />
+      <LogOutButton onClick={() => signOut()}>Sign Out</LogOutButton>
     </main>
   );
 }

src/app/profileScreen/style.ts

@@ -0,0 +1,22 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+  }
+`;
+
+export const LogOutButton = styled.button`
+  background: #00507f;
+  color: #fff;
+  text-align: center;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border: transparent;
+  border-radius: 5px;
+  width: 300px;
+  height: 50px;
+`;

src/app/storefront/helperFunction.jsx

@@ -0,0 +1,32 @@
+import dotenv from 'dotenv';
+import { createClient } from '@supabase/supabase-js';
+dotenv.config();
+if (
+  !process.env.NEXT_PUBLIC_SUPABASE_URL ||
+  !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+) {
+  throw new Error(
+    'No Supabase environment variables detected, please make sure they are in place!',
+  );
+}
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+);
+
+export async function getProduct() {
+  let { data, error } = await supabase.from('product').select('*');
+  console.log(data);
+  return data;
+}
+
+export async function filterProduct(productType) {
+  const { data, error } = await supabase
+    .from('product')
+    .select('*')
+    .eq('category', productType);
+
+  console.log(data);
+
+  return data;
+}

src/app/storefront/page.tsx

@@ -1,19 +1,58 @@
 'use client';
 
-import React from 'react';
-import Link from 'next/link';
-import { GlobalStyle, Button } from './styles';
+import React, { useState } from 'react';
 
+import { GlobalStyle, ButtonsContainer } from './styles';
+import ProductButtons from './productButtons';
+
+interface Product {
+  description: string;
+  category: string;
+  quantity: number;
+  photo: string;
+  product_id: number;
+  name: string;
+  updated_at: Date;
+}
+// https://codesandbox.io/s/filter-with-react-button-r5x4i?file=/src/App.js
 export default function App() {
+  const buttons = [
+    {
+      name: 'All',
+      value: 'All',
+      count: 0,
+    },
+    {
+      name: 'Dog',
+      value: 'Dog',
+      count: 1,
+    },
+    {
+      name: 'Cat',
+      value: 'Cat',
+      count: 2,
+    },
+    {
+      name: 'Misc.',
+      value: 'Misc.',
+      count: 3,
+    },
+  ];
+  const [, setFilteredProducts] = useState<null | Product[]>(null);
+
   return (
     <main>
       <GlobalStyle />
-      <Button>
-        <Link href="/checkout">Cart</Link>
-      </Button>
-      <Button>
-        <Link href="/profileScreen">Profile</Link>
-      </Button>
+      <ButtonsContainer>
+        {buttons.map(type => (
+          <ProductButtons
+            key={type.count}
+            value={type.value}
+            setFiltredProducts={setFilteredProducts}
+            content={type.name}
+          />
+        ))}
+      </ButtonsContainer>
     </main>
   );
 }

src/app/storefront/productButtons.tsx

@@ -0,0 +1,58 @@
+// 'use client';
+
+import React, { useState } from 'react';
+
+import { Button, Label, IndividualContainer } from './styles';
+
+import { getProduct, filterProduct } from './helperFunction';
+
+interface Product {
+  description: string;
+  category: string;
+  quantity: number;
+  photo: string;
+  product_id: number;
+  name: string;
+  updated_at: Date;
+}
+export default function ProductButtons(props: {
+  key: number;
+  value: string;
+  setFiltredProducts: (category: Product[]) => void;
+  content: string;
+}) {
+  const { key, value, content, setFiltredProducts } = props;
+  const [IsClicked, setIsClicked] = useState(false);
+
+  async function applyFilter(
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) {
+    setIsClicked(!IsClicked);
+    const category = e.currentTarget.value;
+    console.log(category);
+
+    if (category !== 'All') {
+      const products = await filterProduct(category);
+      if (products !== null) {
+        setFiltredProducts(products);
+      }
+    } else {
+      const products = await getProduct();
+      if (products !== null) {
+        setFiltredProducts(products);
+      }
+    }
+  }
+
+  return (
+    <IndividualContainer>
+      <Button
+        isClicked={IsClicked}
+        key={key}
+        value={value}
+        onClick={e => applyFilter(e)}
+      />
+      <Label isClicked={IsClicked}>{content}</Label>
+    </IndividualContainer>
+  );
+}

src/app/storefront/styles.ts

@@ -5,21 +5,40 @@ export const GlobalStyle = createGlobalStyle`
     background:white;
   }
 `;
+interface props {
+  isClicked: boolean;
+}
+export const Button = styled.button<props>`
+  background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')};
 
-export const Button = styled.button`
-  margin-top: 30px;
-  margin-right: 25px;
-  color: white;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  border: transparent;
+`;
+
+export const Label = styled.p<props>`
+  color: ${props => (props.isClicked ? '#00507f' : '#000')};
   text-align: center;
-  font-family: sans-serif;
-  font-size: 15px;
+  font-family: Inter;
+  font-size: 20px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 500;
   line-height: normal;
-  width: 70px;
-  height: 40px;
-  background: black;
-  border: transparent;
-  border-radius: 5px;
-  float: right;
+`;
+
+export const IndividualContainer = styled.div`
+  width: 100px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const ButtonsContainer = styled.div`
+  width: 600px;
+  height: 600px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;

src/components/InputFields.tsx

@@ -1,17 +1,47 @@
 'use client';
 
+import { useState } from 'react';
 import { FormHeaders, Input } from '../app/login/styles';
 
 export default function InputFields(props: {
   text: string;
   placeholder: string;
+  inputType: string;
+  changeUserName: (newUsername: string) => void;
+  changePassword: (newPassword: string) => void;
+  isPassword: boolean;
 }) {
-  const { text, placeholder } = props;
+  const {
+    text,
+    placeholder,
+    inputType,
+    changeUserName,
+    changePassword,
+    isPassword,
+  } = props;
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setInputValue(value);
+
+    if (isPassword) {
+      changePassword(value);
+    } else {
+      changeUserName(value);
+    }
+  };
+
   return (
     <main>
       <div id="userInfo">
         <FormHeaders>{text}</FormHeaders>
-        <Input type="text" placeholder={placeholder} />
+        <Input
+          type={inputType}
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={handleChange}
+        />
       </div>
     </main>
   );