finished project

j-barreiros · Jan 31, 2023 · 3c9b900 · 3c9b900
1 parent 6d7f4ef
commit 3c9b900
Show file tree

Hide file tree

Showing 40 changed files with 2,019 additions and 186 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.2",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
 .App {
   height: 100vh;
   display: flex;

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,44 +1,61 @@
 // Hooks
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
+// Router
+import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom'
 
 // Style
 import './App.css'
-import CollectionBar from './components/CollectionBar/CollectionBar'
 
 // Components
 import Navbar from './components/Navbar/Navbar'
 import PalleteDisplay from './components/PalleteDisplay/PalleteDisplay'
 import Sidebar from './components/Sidebar/Sidebar'
+import CollectionBar from './components/CollectionBar/CollectionBar'
 
 // Context
 import { PalleteContextProvider } from './context/PalletesContext'
 import GlobalStyle from './GlobalStyle'
 
+// Pages
+import CreatePallete from './pages/Create/CreatePallete'
+import PalletePage from './pages/PalletePage/PalletePage'
+import CollectionPage from './pages/CollectionPage/CollectionPage'
+import PopularMonth from './pages/Popular/PopularMonth'
+import PopularYear from './pages/Popular/PopularYear'
+import PopularAllTime from './pages/Popular/PopularAllTime'
+
 function App() {
   const [activePage, setActivePage] = useState('New');
-  const [activeSubPage, setActiveSubPage] = useState('Month');
+  const [activeSubpage, setActiveSubpage] = useState('Month');
 
   return (
     <main className="App">
       <PalleteContextProvider>
         <GlobalStyle />
-        <Navbar />
         <section className='main-content'>
-          <Sidebar
-            activePage={activePage}
-            setActivePage={setActivePage}
-            activeSubpage={activeSubPage}
-            setActiveSubpage={setActiveSubPage}
-          />
-          <PalleteDisplay
-            activePage={activePage}
-            activeSubpage={activeSubPage}
-          />
-          <CollectionBar />
+          <BrowserRouter>
+            <Navbar />
+            <Sidebar
+              activePage={activePage}
+              activeSubpage={activeSubpage}
+              setActiveSubpage={setActiveSubpage}
+            />
+            <Routes>
+              <Route path='/' element={<PalleteDisplay activePage={activePage} activeSubpage={activeSubpage} />} />
+              <Route path='/popular/month' element={<PopularMonth />} />
+              <Route path='/popular/year' element={<PopularYear />} />
+              <Route path='/popular/allTime' element={<PopularAllTime />} />
+              <Route path='/collection' element={<CollectionPage />} />
+              <Route path='/add' element={<CreatePallete />} />
+              <Route path='/pallete/:palleteId' element={<PalletePage />} />
+            </Routes>
+            <CollectionBar />
+          </BrowserRouter>
         </section>
       </PalleteContextProvider>
     </main>
   )
 }
 
-export default App
+export default App
diff --git a/src/GlobalStyle.ts b/src/GlobalStyle.ts
@@ -1,7 +1,6 @@
 import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
     * {
         font-family: 'Poppins', sans-serif;
     }

diff --git a/src/assets/Icons.tsx b/src/assets/Icons.tsx
@@ -1,24 +1,93 @@
+import { PalleteType } from "../context/PalletesContext"
 
-export const EmptyHeart = () => {
+export const HeartEmpty = () => {
     return (
-        <svg className='icon' xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-            <path d="m12 19.65-.75-.675q-2.45-2.25-4.05-3.838-1.6-1.587-2.537-2.8-.938-1.212-1.301-2.2Q3 9.15 3 8.15q0-1.9 1.3-3.2 1.3-1.3 3.2-1.3 1.325 0 2.475.675Q11.125 5 12 6.3q.875-1.3 2.025-1.975T16.5 3.65q1.9 0 3.2 1.3 1.3 1.3 1.3 3.2 0 1-.362 1.987-.363.988-1.3 2.2-.938 1.213-2.526 2.8-1.587 1.588-4.062 3.838Zm0-1.35q2.4-2.175 3.95-3.725 1.55-1.55 2.45-2.688.9-1.137 1.25-2.012T20 8.15q0-1.5-1-2.5t-2.5-1q-1.2 0-2.212.687-1.013.688-1.788 2.038h-1Q10.7 6 9.7 5.325q-1-.675-2.2-.675-1.475 0-2.487 1Q4 6.65 4 8.15q0 .85.35 1.725.35.875 1.25 2.012.9 1.138 2.45 2.675Q9.6 16.1 12 18.3Zm0-6.825Z" />
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="m20 32.75-1.042-.958q-4.166-3.792-6.854-6.5-2.687-2.709-4.271-4.771-1.583-2.063-2.208-3.729Q5 15.125 5 13.458q0-3.125 2.125-5.25t5.25-2.125q2.25 0 4.187 1.188Q18.5 8.458 20 10.75q1.583-2.333 3.479-3.5 1.896-1.167 4.146-1.167 3.125 0 5.25 2.125T35 13.458q0 1.667-.625 3.334-.625 1.666-2.187 3.729-1.563 2.062-4.271 4.771-2.709 2.708-6.875 6.5Zm0-1.917q4.042-3.666 6.667-6.312 2.625-2.646 4.166-4.604 1.542-1.959 2.146-3.459.604-1.5.604-3 0-2.541-1.687-4.25Q30.208 7.5 27.625 7.5q-2.083 0-3.792 1.188-1.708 1.187-3.208 3.687h-1.25q-1.5-2.5-3.229-3.687Q14.417 7.5 12.375 7.5q-2.542 0-4.25 1.708-1.708 1.709-1.708 4.25 0 1.5.604 3t2.125 3.48q1.521 1.979 4.166 4.583 2.646 2.604 6.688 6.312Zm0-11.666Z" />
         </svg>
     )
 }
 
-export const FullHeart = () => {
+export const HeartFull = () => {
     return (
-        <svg className='icon' xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-            <path d="m12 19.65-.75-.675q-2.45-2.25-4.05-3.838-1.6-1.587-2.537-2.8-.938-1.212-1.301-2.2Q3 9.15 3 8.15q0-1.9 1.3-3.2 1.3-1.3 3.2-1.3 1.325 0 2.475.675Q11.125 5 12 6.3q.875-1.3 2.025-1.975T16.5 3.65q1.9 0 3.2 1.3 1.3 1.3 1.3 3.2 0 1-.362 1.987-.363.988-1.3 2.2-.938 1.213-2.526 2.8-1.587 1.588-4.062 3.838Z" />
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="m20 32.75-1.042-.958q-4.166-3.792-6.854-6.5-2.687-2.709-4.271-4.771-1.583-2.063-2.208-3.729Q5 15.125 5 13.458q0-3.125 2.125-5.25t5.25-2.125q2.25 0 4.187 1.188Q18.5 8.458 20 10.75q1.583-2.333 3.479-3.5 1.896-1.167 4.146-1.167 3.125 0 5.25 2.125T35 13.458q0 1.667-.625 3.334-.625 1.666-2.208 3.729-1.584 2.062-4.271 4.771-2.688 2.708-6.854 6.5Z" />
         </svg>
     )
 }
 
 export const NewEmpty = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="M14.375 30.25 20 26.833l5.625 3.459-1.458-6.459 4.958-4.291-6.542-.584L20 12.875l-2.583 6.042-6.542.583 4.958 4.333Zm-2.167 2.958 2.084-8.875-6.875-5.916 9.041-.792L20 9.25l3.542 8.375 9.041.792-6.875 5.916 2.084 8.875L20 28.5ZM20 22Z" />
+        </svg>
+    )
+}
+
+export const NewFull = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="m12.208 33.208 2.084-8.875-6.875-5.916 9.041-.792L20 9.25l3.542 8.375 9.041.792-6.875 5.916 2.084 8.875L20 28.5Z" />
+        </svg>
+    )
+}
+
+export const PopularEmpty = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="M9.75 23.333q0 3 1.625 5.521t4.375 3.729q-.375-.583-.562-1.208Q15 30.75 15 30.083q0-1 .396-1.875t1.062-1.583L20 23.167l3.542 3.458q.708.708 1.083 1.583T25 30.083q0 .667-.188 1.292-.187.625-.562 1.208 2.75-1.208 4.375-3.729t1.625-5.521q0-2.125-.833-4.083-.834-1.958-2.375-3.5-.834.583-1.771.875-.938.292-1.896.292-2.583 0-4.417-1.709-1.833-1.708-2-4.333v-.25q-1.708 1.333-3.062 2.875-1.354 1.542-2.271 3.188-.917 1.645-1.396 3.333-.479 1.687-.479 3.312ZM20 25.167l-2.542 2.5q-.5.5-.77 1.125-.271.625-.271 1.291 0 1.459 1.041 2.479Q18.5 33.583 20 33.583q1.5 0 2.542-1.021 1.041-1.02 1.041-2.479 0-.708-.271-1.333-.27-.625-.77-1.083ZM18.333 8v2.5q0 2.125 1.459 3.562Q21.25 15.5 23.375 15.5q.792 0 1.521-.271.729-.271 1.396-.771l.708-.541q2.208 1.625 3.438 4.125 1.229 2.5 1.229 5.291 0 4.875-3.396 8.271Q24.875 35 20 35q-4.875 0-8.271-3.396-3.396-3.396-3.396-8.271 0-4.291 2.667-8.416T18.333 8Z" />
+        </svg>
+    )
+}
+
+export const PopularFull = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="M8.333 23.333q0-3 1.167-5.479t2.792-4.437q1.625-1.959 3.312-3.334Q17.292 8.708 18.333 8v2.5q0 2.292 1.563 3.646 1.562 1.354 3.479 1.354.792 0 1.521-.25.729-.25 1.396-.792l.708-.541q2.167 1.625 3.417 4.083t1.25 5.333q0 3.917-2.25 6.917t-5.792 4.167q1-.792 1.542-1.917.541-1.125.541-2.417 0-1.125-.437-2.125-.438-1-1.188-1.833L20 22.167l-4.042 3.958q-.791.833-1.229 1.833-.437 1-.437 2.125 0 1.292.541 2.417.542 1.125 1.542 1.917-3.542-1.167-5.792-4.167t-2.25-6.917ZM20 24.125l3.042 3.042q.583.583.916 1.333.334.75.334 1.583 0 1.75-1.25 2.979-1.25 1.23-3.042 1.23-1.792 0-3.042-1.23-1.25-1.229-1.25-2.979 0-.833.313-1.583.312-.75.937-1.333Z" />
+        </svg>
+    )
+}
+
+export const AddEmpty = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="M19.333 27.5h1.417v-6.75h6.75v-1.417h-6.75V12.5h-1.417v6.833H12.5v1.417h6.833ZM20 35q-3.125 0-5.833-1.188-2.709-1.187-4.75-3.229-2.042-2.041-3.229-4.75Q5 23.125 5 20t1.188-5.854q1.187-2.729 3.229-4.75 2.041-2.021 4.75-3.208Q16.875 5 20 5t5.854 1.188q2.729 1.187 4.75 3.208t3.208 4.75Q35 16.875 35 20t-1.188 5.833q-1.187 2.709-3.208 4.75-2.021 2.042-4.75 3.229Q23.125 35 20 35Zm0-1.417q5.667 0 9.625-3.958T33.583 20q0-5.667-3.937-9.625Q25.708 6.417 20 6.417q-5.667 0-9.625 3.937Q6.417 14.292 6.417 20q0 5.667 3.958 9.625T20 33.583ZM20 20Z" />
+        </svg>
+    )
+}
+
+export const AddFull = () => {
+    return (
+        <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+            <path d="M19.333 27.5h1.417v-6.75h6.75v-1.417h-6.75V12.5h-1.417v6.833H12.5v1.417h6.833ZM20 35q-3.125 0-5.833-1.188-2.709-1.187-4.75-3.229-2.042-2.041-3.229-4.75Q5 23.125 5 20t1.188-5.854q1.187-2.729 3.229-4.75 2.041-2.021 4.75-3.208Q16.875 5 20 5t5.854 1.188q2.729 1.187 4.75 3.208t3.208 4.75Q35 16.875 35 20t-1.188 5.833q-1.187 2.709-3.208 4.75-2.021 2.042-4.75 3.229Q23.125 35 20 35Z" />
+        </svg>
+    )
+}
+
+export const AddBtnIcon = () => {
     return (
         <svg className='icon' xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-            <path d="m8.85 17.825 3.15-1.9 3.15 1.925-.825-3.6 2.775-2.4-3.65-.325-1.45-3.4-1.45 3.375-3.65.325 2.775 2.425ZM5.825 22l1.625-7.025L2 10.25l7.2-.625L12 3l2.8 6.625 7.2.625-5.45 4.725L18.175 22 12 18.275ZM12 13.25Z" />
+            <path d="M11 19v-6H5v-2h6V5h2v6h6v2h-6v6Z" />
         </svg>
     )
+}
+
+export const Logo = () => {
+    return (
+        <>
+            <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
+                <path d="M20 36.667q-3.417 0-6.458-1.313-3.042-1.312-5.313-3.583t-3.583-5.313Q3.333 23.417 3.333 20q0-3.5 1.334-6.542Q6 10.417 8.312 8.167q2.313-2.25 5.417-3.542 3.104-1.292 6.646-1.292 3.292 0 6.25 1.125t5.187 3.105q2.23 1.979 3.542 4.687 1.313 2.708 1.313 5.917 0 4.583-2.729 7.187-2.73 2.604-6.98 2.604h-3.125q-.625 0-1.041.459-.417.458-.417 1 0 .708.625 1.521.625.812.625 1.937 0 1.417-1.063 2.604Q21.5 36.667 20 36.667Zm-9.542-15.375q.917 0 1.584-.667.666-.667.666-1.583 0-.917-.666-1.563-.667-.646-1.584-.646-.916 0-1.562.646t-.646 1.563q0 .916.646 1.583.646.667 1.562.667Zm5.167-6.959q.917 0 1.583-.645.667-.646.667-1.563 0-.917-.667-1.583-.666-.667-1.583-.667-.917 0-1.563.667-.645.666-.645 1.583 0 .917.645 1.563.646.645 1.563.645Zm8.75 0q.917 0 1.563-.645.645-.646.645-1.563 0-.917-.645-1.583-.646-.667-1.563-.667-.917 0-1.583.667-.667.666-.667 1.583 0 .917.667 1.563.666.645 1.583.645Zm5.292 6.959q.916 0 1.562-.667t.646-1.583q0-.917-.646-1.563-.646-.646-1.562-.646-.917 0-1.563.646-.646.646-.646 1.563 0 .916.646 1.583.646.667 1.563.667Z" />
+            </svg>
+        </>
+    )
+}
+
+export const LinkIcon = () => {
+    return (
+        <>
+            <svg className='icon' xmlns="http://www.w3.org/2000/svg" height="24" width="24">
+                <path d="M11 17H7q-2.075 0-3.537-1.463Q2 14.075 2 12t1.463-3.538Q4.925 7 7 7h4v2H7q-1.25 0-2.125.875T4 12q0 1.25.875 2.125T7 15h4Zm-3-4v-2h8v2Zm5 4v-2h4q1.25 0 2.125-.875T20 12q0-1.25-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.462Q22 9.925 22 12q0 2.075-1.462 3.537Q19.075 17 17 17Z" />
+            </svg>
+        </>
+    )
 }
diff --git a/src/components/CollectionBar/CollectionBar.tsx b/src/components/CollectionBar/CollectionBar.tsx
@@ -1,11 +1,19 @@
+import { useContext, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { PalleteContext } from "../../context/PalletesContext";
+import CollectionItem from "./CollectionItem/CollectionItem";
 import StyledCollectionBar from "./StyledCollectionBar";
 
+
 const CollectionBar = () => {
+    // Context
+    const palleteContext = useContext(PalleteContext);
+
     return (
-        <StyledCollectionBar>
+        <StyledCollectionBar activePage={useLocation().pathname === '/collection'}>
             <h2 className='title'>Collection</h2>
             <section className='collection-display'>
-
+                {palleteContext.collection.map(c => <CollectionItem key={c.id} pallete={c} />)}
             </section>
         </StyledCollectionBar>
     )

diff --git a/src/components/CollectionBar/CollectionItem/CollectionItem.tsx b/src/components/CollectionBar/CollectionItem/CollectionItem.tsx
@@ -1,19 +1,35 @@
-import { PalleteType } from "../../../context/PalletesContext";
+import { MouseEvent, useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { PalleteContext, PalleteType } from "../../../context/PalletesContext";
 import StyledCollectionItem from "./StyledCollectionItem";
 
 type CollectionItemProps = {
     pallete: PalleteType;
 
 }
 
-const CollectionItem = ({pallete}: CollectionItemProps) => {
+const CollectionItem = ({ pallete }: CollectionItemProps) => {
+
+    const palleteContext = useContext(PalleteContext);
+    const navigator = useNavigate();
+
+    const handleDeleteBtn = (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {
+        event.stopPropagation();
+        palleteContext.handleLike(pallete);
+    }
+
     return (
-        <StyledCollectionItem>
-            <button className='close-btn' onClick={() => console.log('remove pallete')}>X</button>
-            <article className='color-stripe'></article>
-            <article className='color-stripe'></article>
-            <article className='color-stripe'></article>
-            <article className='color-stripe'></article>
+        <StyledCollectionItem pallete={pallete}>
+            <button className='close-btn' onClick={(event) => handleDeleteBtn(event)}>x</button>
+            <section className='pallete-box' onClick={() => navigator(`/pallete/${pallete.id}`)}>
+                <article className='color1'></article>
+                <article className='color2'></article>
+                <article className='color3'></article>
+                <article className='color4'></article>
+            </section>
+            <div className="saved-popup">
+                <p>Saved!</p>
+            </div>
         </StyledCollectionItem>
     )
 }

diff --git a/src/components/CollectionBar/CollectionItem/StyledCollectionItem.ts b/src/components/CollectionBar/CollectionItem/StyledCollectionItem.ts
@@ -1,7 +1,67 @@
 import styled from 'styled-components';
+import { PalleteType } from '../../../context/PalletesContext';
 
-export const StyledCollectionItem = styled.article`
+type StyledCollectionItemProps = {
+    pallete: PalleteType; 
+}
 
+export const StyledCollectionItem = styled.article<StyledCollectionItemProps>`
+    position: relative;
+    width: 50px;
+    height: 50px;
+    margin: 0 auto;
+    border-radius: 5px;
+    
+    &:hover {
+        .close-btn {
+            display: block;
+        }
+    }
+
+    .close-btn {
+        display: none;
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        padding: 1px 6px 3px 6px;
+        background-color: rgba(0,0,0,0.6);
+        border: none;
+        border-radius: 50%;
+        font-size: 12px;
+        color: #fff;
+        cursor:pointer;
+    }
+    
+    .pallete-box {
+        width: 50px;
+        height: 50px;
+        border-radius: 7px;
+        overflow: hidden;
+        display: grid;
+        grid-template-rows: repeat(4, 25%);
+        cursor: pointer;
+        .color1 {
+            background-color: ${props => props.pallete.color1};
+        }
+        .color2 {
+            background-color: ${props => props.pallete.color2};
+        }
+        .color3 {
+            background-color: ${props => props.pallete.color3};
+        }
+        .color4 {
+            background-color: ${props => props.pallete.color4};
+        }
+    }
+
+
+    .saved-popup {
+        position: absolute;
+        bottom: -15px;
+        background-color: gray;
+        z-index: 1;
+        opacity: 0;
+    }
 `
 
 export default StyledCollectionItem;
diff --git a/src/components/CollectionBar/StyledCollectionBar.ts b/src/components/CollectionBar/StyledCollectionBar.ts
@@ -1,15 +1,34 @@
 import styled from 'styled-components';
 
-const StyledCollectionBar = styled.section`
-    width: 270px;
-    height: 100vh;
-    margin-top: 50px;
-    position: fixed;
-    display: flex;
+type StyledCollectionBarProps = {
+    activePage: boolean;    
+} 
+
+const StyledCollectionBar = styled.section<StyledCollectionBarProps>`
+    display: ${props => props.activePage ? 'none' : 'flex'};
     flex-direction: column;
     align-items: center;
+    position: fixed;
+    width: 270px;
+    height: 100vh;
+    margin-top: 70px;
     right: 0px;
-    background-color: gray;
+
+    .title {
+        color: #191919;
+        margin-bottom: 15px;
+    }
+    
+    .collection-display {
+        display: grid;
+        margin: 0px 10px;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 7px;
+    }
+
+    @media screen and (max-width: 800px) {
+        display: none;
+    }
 `
 
 export default StyledCollectionBar;