updated client code

gopinathsjsu · Dec 5, 2023 · ed83e4b · ed83e4b
1 parent a54cc85
commit ed83e4b
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 139 deletions.
diff --git a/client/components/elements/FormInput/index.js b/client/components/elements/FormInput/index.js
@@ -1,5 +1,3 @@
 import FormInput from './FormInput';
-import SearchBarCity from './SearchBarCity';
 
-export { SearchBarCity };
 export default FormInput;
diff --git a/client/components/environment/Main/Main.js b/client/components/environment/Main/Main.js
@@ -5,13 +5,9 @@ import { ReactNotifications } from 'react-notifications-component';
 import { useDispatch } from 'react-redux';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
-import '../../../styles/css/customcss.css';
-import '../../../styles/css/tailwindcss.css';
-import '../../../styles/css/mediaqueries.css';
-
-// import Footer from '_components/layouts/Footer';
-// import Navigation from '_components/layouts/Navigation';
-// import HomePage from '_components/pages/HomePage';
+import Footer from '_components/layouts/Footer';
+import Navigation from '_components/layouts/Navigation';
+import HomePage from '_components/pages/HomePage';
 import LoginPage from '_components/pages/LoginPage';
 import LostPage from '_components/pages/LostPage';
 import RegisterPage from '_components/pages/RegisterPage';
@@ -21,8 +17,7 @@ import WelcomePage from '_components/pages/WelcomePage';
 
 import { attemptGetUser } from '_store/thunks/user';
 
-import AuthLayout from '../../layouts/AuthLayout';
-import LandingPage from '../../pages/LandingPage';
+import styles from './styles.module.css';
 
 export default function Main() {
   const dispatch = useDispatch();
@@ -40,25 +35,22 @@ export default function Main() {
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  return (
-    !loading && (
-      <React.Fragment>
-        <ReactNotifications />
-        {/* <Navigation />
-        <main className={styles.root}> */}
+  return !loading && (
+    <React.Fragment>
+      <ReactNotifications />
+      <Navigation />
+      <main className={styles.root}>
         <Routes>
           <Route path="/" element={<WelcomePage />} />
           <Route path="login" element={<LoginPage />} />
           <Route path="register" element={<RegisterPage />} />
-          <Route path="auth/*" element={<AuthLayout />} />
-          <Route path="home" element={<LandingPage />} />
+          <Route path="home" element={<HomePage />} />
           <Route path="todo" element={<TodoPage />} />
           <Route path="settings/*" element={<SettingsPage />} />
           <Route path="*" element={<LostPage />} />
         </Routes>
-        {/* </main>
-        <Footer /> */}
-      </React.Fragment>
-    )
+      </main>
+      <Footer />
+    </React.Fragment>
   );
 }
diff --git a/client/components/environment/Main/styles.module.css b/client/components/environment/Main/styles.module.css
@@ -0,0 +1,4 @@
+.root {
+  margin-top: 3.5rem;
+  min-height: calc(100vh - 11rem);
+}
diff --git a/client/components/layouts/Footer/Footer.js b/client/components/layouts/Footer/Footer.js
@@ -1,118 +1,23 @@
-/* eslint-disable react/jsx-curly-newline */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 
-// import crossifyImg from 'assets/logos/logo_final.png';
+import Container from 'react-bulma-companion/lib/Container';
+import Content from 'react-bulma-companion/lib/Content';
+import Footer from 'react-bulma-companion/lib/Footer';
+
+import styles from './styles.module.css';
+
+export default function FooterComponent() {
+  const year = new Date().getFullYear();
 
-export default function Footer() {
   return (
-    <footer className=" bg-gray-300 pt-8 pb-6">
-      <div
-        className="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <svg
-          className="absolute bottom-0 overflow-hidden"
-          xmlns="http://www.w3.org/2000/svg"
-          preserveAspectRatio="none"
-          version="1.1"
-          viewBox="0 0 2560 100"
-          x="0"
-          y="0"
-        >
-          <polygon
-            className="text-gray-300 fill-current"
-            points="2560 0 2560 100 0 100"
-          />
-        </svg>
-      </div>
-      <div className="container mx-auto px-4">
-        <div className="flex flex-wrap text-center lg:text-left">
-          <div className="w-full lg:w-6/12 px-4 ">
-            <img
-              alt="brandphoto"
-              // TODO : Add brand icon
-              src=""
-              className="mr-2 inline-block"
-              style={{ height: 30 }}
-            />
-            <h4 className="text-3xl font-semibold inline-block pb-2">
-              Crossify
-            </h4>
-            <h5 className="text-lg mt-0 mb-2 text-gray-700">
-              Find your next favourite movie
-            </h5>
-          </div>
-          <div className="w-full lg:w-6/12 px-4">
-            <div className="flex flex-wrap items-top mb-6">
-              <div className="w-full lg:w-6/12 px-4 ml-auto">
-                <div className="mt-6 lg:mb-0 mb-6">
-                  <button
-                    className="bg-white text-blue-400 shadow-lg font-normal h-10 w-10 items-center justify-center
-                     align-center rounded-full outline-none focus:outline-none mr-2"
-                    type="button"
-                    onClick={() => {
-                      window.open(
-                        ' https://twitter.com/moviebookbyalphaq',
-                        '_blank',
-                      );
-                    }}
-                  >
-                    <i className="fab fa-twitter" />
-                  </button>
-                  <button
-                    className="bg-white text-blue-600 shadow-lg font-normal h-10 w-10 items-center justify-center
-                    align-center rounded-full outline-none focus:outline-none mr-2"
-                    type="button"
-                    onClick={() =>
-                      window.open(
-                        'https://www.facebook.com/groups/510718810086566',
-                        '_blank',
-                      )
-                    }
-                  >
-                    <i className="fab fa-facebook-square" />
-                  </button>
-                  <button
-                    className="bg-white text-blue-600 shadow-lg font-normal h-10 w-10 items-center justify-center
-                    align-center rounded-full outline-none focus:outline-none mr-2"
-                    type="button"
-                    onClick={() => {
-                      window.open(
-                        'https://www.linkedin.com/groups/9049763/',
-                        '_blank',
-                      );
-                    }}
-                  >
-                    <i className="fab fa-linkedin" />
-                  </button>
-                  <button
-                    className="bg-white text-gray-900 shadow-lg font-normal h-10 w-10 items-center justify-center
-                     align-center rounded-full outline-none focus:outline-none mr-2"
-                    type="button"
-                    onClick={() => {
-                      window.open(
-                        'https://www.github.com/dhruvilshah191999/Crossify',
-                        '_blank',
-                      );
-                    }}
-                  >
-                    <i className="fab fa-github" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr className="my-6 border-gray-400" />
-        <div className="flex flex-wrap items-center md:justify-between justify-center">
-          <div className="w-full md:w-4/12 px-4 mx-auto text-center">
-            <div className="text-sm text-gray-600 font-semibold py-1 ">
-              MovieBook by AlphaQ
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
+    <Footer className={styles.root}>
+      <Container>
+        <Content className={styles.content} textAlign="center">
+          <p>
+            {`Copyright Ⓒ ${year} MERN Boilerplate. All Rights Reserved.`}
+          </p>
+        </Content>
+      </Container>
+    </Footer>
   );
 }
diff --git a/client/components/layouts/Footer/styles.module.css b/client/components/layouts/Footer/styles.module.css
@@ -0,0 +1,9 @@
+.root {
+  background-color: #c5c5c5;
+  padding: 3rem 1.5rem;
+
+}
+
+.content a:visited {
+  color: #000;
+}
diff --git a/client/components/pages/SettingsPage/AccountSettings/ChangeUsername/ChangeUsername.js b/client/components/pages/SettingsPage/AccountSettings/ChangeUsername/ChangeUsername.js
@@ -31,7 +31,7 @@ export default function ChangeUsername() {
 
   const saveUsernameCase = () => {
     if (usernameCase.toLowerCase() === user.username) {
-      const updatedUser = { username_case: usernameCase };
+      const updatedUser = { usernameCase };
 
       dispatch(attemptUpdateUser(updatedUser))
         .catch(() => setUsernameCase(user.usernameCase));

diff --git a/client/components/pages/SettingsPage/ProfileSettings/GeneralProfile/GeneralProfile.js b/client/components/pages/SettingsPage/ProfileSettings/GeneralProfile/GeneralProfile.js
@@ -83,9 +83,9 @@ export default function GeneralProfile() {
   const save = () => {
     const updatedUser = {};
 
-    if (firstNameEdited) { updatedUser.first_name = firstName; }
-    if (lastNameEdited) { updatedUser.last_name = lastName; }
-    if (profilePicEdited) { updatedUser.profile_pic = profilePic; }
+    if (firstNameEdited) { updatedUser.firstName = firstName; }
+    if (lastNameEdited) { updatedUser.lastName = lastName; }
+    if (profilePicEdited) { updatedUser.profilePic = profilePic; }
     if (bioEdited) { updatedUser.bio = bio; }
 
     if (!R.isEmpty(updatedUser)) {