Merge branch 'main' into working-on-profile

tech-for-better · Dec 9, 2021 · 949ad2a · 949ad2a
2 parents 2a517ef + 7dadb31
commit 949ad2a
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 122 deletions.
diff --git a/components/Auth.js b/components/Auth.js
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { supabase } from '../utils/supabaseClient';
+import Main from './Main';
 
 export default function Auth() {
   const [loading, setLoading] = useState(false);
@@ -19,34 +20,32 @@ export default function Auth() {
   };
 
   return (
-    <div className="row flex flex-center">
-      <div className="col-6 form-widget">
-        <h1 className="header">Supabase + Next.js</h1>
-        <p className="description">
-          Sign in via magic link with your email below
-        </p>
-        <div>
-          <input
-            className="inputField"
-            type="email"
-            placeholder="Your email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-          />
-        </div>
-        <div>
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              handleLogin(email);
-            }}
-            className="button block"
-            disabled={loading}
-          >
-            <span>{loading ? 'Loading' : 'Send magic link'}</span>
-          </button>
-        </div>
+    <Main>
+      <h1 className="header">Welcome to Solent Mind</h1>
+      <p className="description">
+        Sign in via magic link with your email below
+      </p>
+      <div>
+        <input
+          className="inputField"
+          type="email"
+          placeholder="Your email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
       </div>
-    </div>
+      <div>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            handleLogin(email);
+          }}
+          className="button block"
+          disabled={loading}
+        >
+          <span>{loading ? 'Loading' : 'Send magic link'}</span>
+        </button>
+      </div>
+    </Main>
   );
 }
diff --git a/components/Greeting.js b/components/Greeting.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { CgProfile } from 'react-icons/cg';
-import { supabase } from '../utils/supabaseClient';
 
 const Greeting = ({ user }) => {
   return (

diff --git a/components/Main.js b/components/Main.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import Link from 'next/link';
-import { BsFillArrowRightCircleFill } from 'react-icons/bs';
 
 const Main = ({ children }) => {
   return (

diff --git a/components/Tabs.js b/components/Tabs.js
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import { BsFillArrowRightCircleFill } from 'react-icons/bs';
+
+const Tabs = ({ contents }) => {
+  return (
+    <ul className=" p-4">
+      {contents.map((content) => (
+        <li
+          key={content.topic}
+          className="border border-BLUE p-2 rounded mb-4 shadow-md"
+        >
+          <div className="flex flex-row justify-between font-bold items-center">
+            <div>{content.topic} </div>
+            <Link href={content.url}>
+              <a>
+                <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
+              </a>
+            </Link>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Tabs;
diff --git a/pages/aboutUs.js b/pages/aboutUs.js
@@ -1,13 +1,29 @@
-import Link from 'next/link';
 import Header from '../components/Header';
-import { BsFillArrowRightCircleFill } from 'react-icons/bs';
 import Main from '../components/Main';
+import Tabs from '../components/Tabs';
 
 const AboutUs = () => {
+  const contents = [
+    {
+      topic: 'What we do',
+      url: 'https://www.solentmind.org.uk/about-us/what-we-do/',
+    },
+    {
+      topic: 'Who we are',
+      url: 'https://www.solentmind.org.uk/about-us/who-we-are/',
+    },
+    {
+      topic: 'Reports & accounts',
+      url: 'https://www.solentmind.org.uk/about-us/reports-and-accounts/',
+    },
+    {
+      topic: 'Policies',
+      url: 'https://www.solentmind.org.uk/about-us/policies/',
+    },
+  ];
   return (
     <>
       <Header />
-
       <Main>
         <h1 className="mt-8 text-2xl p-4">ABOUT US</h1>
         <div className="bg-PURPLE shadow-md">
@@ -17,48 +33,7 @@ const AboutUs = () => {
             plan to achieve it.
           </div>
         </div>
-        <ul className=" p-4">
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>What we do </div>
-              <Link href="https://www.solentmind.org.uk/about-us/what-we-do/">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>Who we are </div>
-              <Link href="https://www.solentmind.org.uk/about-us/who-we-are/">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>Reports & accounts </div>
-              <Link href="https://www.solentmind.org.uk/about-us/reports-and-accounts/">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>Policies </div>
-              <Link href="https://www.solentmind.org.uk/about-us/policies/">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-        </ul>
+        <Tabs contents={contents} />
       </Main>
     </>
   );

diff --git a/pages/announcements.js b/pages/announcements.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import Header from '../components/Header';
+import Main from '../components/Main';
 
 const Announcements = () => {
   return (
     <>
       <Header />
-      <h1>Announcements 🔊</h1>
+      <Main>
+        <h1>Announcements 🔊</h1>
+      </Main>
     </>
   );
-}
+};
 export default Announcements;
diff --git a/pages/courses/[name].js b/pages/courses/[name].js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { supabase } from '../../utils/supabaseClient';
-import { useRouter } from 'next/router';
 import Header from '../../components/Header';
 
 export async function getStaticProps({ params }) {
   const { data, error } = await supabase.from('classes').select('name');
 
-  console.log(data);
   return {
     props: {
       data,

diff --git a/pages/index.js b/pages/index.js
@@ -1,10 +1,13 @@
 import Auth from '../components/Auth';
 import Account from '../components/Account';
+import Main from '../components/Main';
+import Header from '../components/Header';
 
 export default function Home({ supabase, session }) {
   return (
     <>
-      <div
+      <Header />
+      <Main
         className="container font-sans"
         style={{ padding: '50px 0 100px 0' }}
       >
@@ -13,7 +16,7 @@ export default function Home({ supabase, session }) {
         ) : (
           <Account key={session.user.id} session={session} />
         )}
-      </div>
+      </Main>
     </>
   );
 }
diff --git a/pages/myCourses.js b/pages/myCourses.js
@@ -18,7 +18,6 @@ export default function MyCourses() {
       .select('user_id, course_id, classes("name", "short_description")')
       .eq('user_id', user.id);
     setEnrolData(data);
-    console.log('Enrol data is: ', data);
   }
 
   React.useEffect(() => {

diff --git a/pages/myProfile.js b/pages/myProfile.js
@@ -1,15 +1,22 @@
 import React from 'react';
-import Link from 'next/link';
 import Header from '../components/Header';
 import Greeting from '../components/Greeting';
 import Account from '../components/Account';
-import { BsFillArrowRightCircleFill } from 'react-icons/bs';
 import Main from '../components/Main';
+
+
+
+import Tabs from '../components/Tabs';
 import { supabase } from '../utils/supabaseClient';
 
 const MyProfile = ({ supabase }) => {
   const [userData, setUserData] = React.useState(null);
+  const contents = [
+    { topic: 'My booked courses', url: '/myCourses' },
+    { topic: 'Upcoming courses', url: '/courses' },
+  ];
   const [userProfile, setUserProfile] = React.useState(null);
+
   async function fetchData() {
     const user = await supabase.auth.user();
     setUserData(user);
@@ -30,52 +37,18 @@ const MyProfile = ({ supabase }) => {
   return (
     <>
       <Header />
-
       <Greeting user={userData ? ` ${userData.email}` : 'User'} />
       <Main>
         <h1 className="mt-8 text-2xl p-4"> My Profile</h1>
 
         <Account userProfile={userProfile} setUserProfile={setUserProfile} />
+
         <div className="bg-PURPLE shadow-md"></div>
-        <ul className=" p-4">
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>My booked courses </div>
-              <Link href="/myCourses">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-          <li className="border border-BLUE p-2 rounded mb-4 shadow-md">
-            <div className="flex flex-row justify-between font-bold items-center">
-              <div>Upcoming courses </div>
-              <Link href="/courses">
-                <a>
-                  <BsFillArrowRightCircleFill className="text-lg text-PURPLE" />
-                </a>
-              </Link>
-            </div>
-          </li>
-        </ul>
+        <Tabs contents={contents} />
       </Main>
     </>
   );
 };
 
-// export async function getServerSideProps({ session, supabase }) {
-//   const user = supabase.auth.user();
-//   const { userProfile, error, status } = await supabase
-//     .from('profiles')
-//     .select('username, avatar')
-//     .eq('id', user.id)
-//     .single();
-
-//   console.log(userProfile);
-//   return {
-//     props: { userProfile, error },
-//   };
-// }
 
 export default MyProfile;
diff --git a/pages/resources.js b/pages/resources.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import Header from '../components/Header';
+import Main from '../components/Main';
 
 export default function Announcements() {
   return (
     <>
       <Header />
-      <h1>Resources</h1>
+      <Main>
+        <h1>Resources</h1>
+      </Main>
     </>
   );
 }