Code Enhancements

- Project Restructuring
- Introduced Barrels for ease in dev
- Renamed Components to more intuitive ones.

Author: karanysingh

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "eslint.codeActionsOnSave.mode": "all"
+}

src/App.js

@@ -2,15 +2,14 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as React from "react";
 
 // components
-import LandingPage from "./pages/landingPage/LandingPage.jsx";
-import AdminPanel from "./adminPanel/AdminPanel";
+import LandingPage from "./pages/LandingPage.jsx";
+import AdminPanel from "./adminPanel/AdminPanel.jsx";
 import UserPanel from "./userPanel/UserPanel";
-import Gallery from "./pages/Gallery/Gallery";
-import Blogs from "./pages/blog/Blog";
-import Team from "./pages/about_us/TeamMembers";
-import Acheivements from "./components/about_us/Acheivements";
+import Blogs from "./pages/Blog";
+import TeamMembers from "./pages/TeamMembers";
+import Acheivements from "./components/Acheivements";
+import Developers from "./pages/Developers";
 // import Recruitments from "./pages/Recruitments/Recruitments";
-import Developers from "./pages/about_us/Developers";
 
 // CSS
 import "./App.css";
@@ -28,10 +27,9 @@ function App() {
           <Route exact path="/" component={LandingPage} />
           <Route path="/adminPanel" component={AdminPanel} />
           <Route path="/userPanel" component={UserPanel} />
-          <Route exact path="/gallery" component={Gallery} />
           <Route exact path="/developers" component={Developers} />
           <Route exact path="/blogs" component={Blogs} />
-          <Route exact path="/team" component={Team} />
+          <Route exact path="/team" component={TeamMembers} />
           <Route exact path="/acheivements" component={Acheivements} />
           {/* <Route exact path="/recruitments" component={Recruitments} /> */}
           <script src="/node_modules/rive-canvas/rive.js"></script>

src/adminPanel/AddMembers.js renamed to src/adminPanel/AddMembers.jsx

@@ -9,8 +9,7 @@ import { addNewUser } from "../services/google-firebase/utilities";
 import FullPageLoader from "../components/LoadingScreen/FullPageLoader";
 
 //Message (automatically disappers after 3sec)
-import Warning from "../components/Messages/Warning";
-import Success from "../components/Messages/Success";
+import { Warning, Success } from "../components";
 
 function AddMembers() {
   useEffect(() => {

src/adminPanel/AdminLogin.js renamed to src/adminPanel/AdminLogin.jsx

@@ -10,7 +10,7 @@ import { admin_email } from "../constants";
 import FullPageLoader from "../components/LoadingScreen/FullPageLoader";
 
 //waring message hook
-import Warning from "../components/Messages/Warning"; //(autmatically disappers after 3000 ms)
+import Warning from "../components/messages/Warning"; //(autmatically disappers after 3000 ms)
 
 function AdminLogin() {
   //state variables

src/adminPanel/AdminPanel.js renamed to src/adminPanel/AdminPanel.jsx

@@ -15,9 +15,8 @@ import { admin_db } from "../services/google-firebase/setup";
 import Member from "../services/google-firebase/models/members/member";
 import Role from "../services/google-firebase/models/members/role";
 import Department from "../services/google-firebase/models/members/department";
+import { Warning, Success } from "../components";
 
-import Success from "../components/Messages/Success";
-import Warning from "../components/Messages/Warning";
 
 function Memberdivel() {
   // State variables

src/adminPanel/MakeAnnouncements.js renamed to src/adminPanel/MakeAnnouncements.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const SendMails = () => <h3>This page is under construction !!</h3>
+
+export default SendMails;

src/adminPanel/MembersPanel.js renamed to src/adminPanel/MembersPanel.jsx

@@ -8,7 +8,7 @@ import {
   Icon,
   Button,
 } from "semantic-ui-react";
-import "./InfoCard.css";
+import "./css/info-card.css";
 
 export default class Acheivements extends Component {
   achievements = [
@@ -50,7 +50,7 @@ export default class Acheivements extends Component {
       Desc: "Magnesium is one of the six essential macro-minerals that is required by the body for energy production and synthesis of protein and enzymes. It contributes to the development of bones and most importantly it is responsible for synthesis of your DNA and RNA. A new report that has appeared in theBritish Journal of Cancer, gives you another reason to add more magnesium to your diet...",
     },
   ];
-  componentDidMount() {}
+  componentDidMount() { }
   render() {
     return (
       <div>

src/adminPanel/Navigation.js renamed to src/adminPanel/Navigation.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import {
   Grid,
   Header,
@@ -8,9 +8,9 @@ import {
   GridRow,
   Icon,
 } from "semantic-ui-react";
-import BlogCards from "../../components/blog/BlogCards";
-import BlogMenuTop from "../../components/blog/BlogMenuTop";
-export default class ImageMat extends Component {
+import BlogCards from "./BlogCards";
+import BlogMenuTop from "./BlogMenuTop";
+export default class BlogSection extends PureComponent {
   state = { activeItem: "home" };
   handleItemClick = (_e, { name }) => this.setState({ activeItem: name });
 

src/adminPanel/SendMails.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 // mail service (email,data) => email as string and data as object
-import { sendFeedback } from "../../services/mail/sendEmail.js";
+import { sendFeedback } from "../services/mail/sendEmail.js";
 
 export default function ContactForm() {
   /**

src/adminPanel/SendMails.jsx

@@ -2,13 +2,10 @@ import PropTypes from "prop-types";
 import { Slide } from "pure-react-carousel";
 import React from "react";
 import {
-  Card,
   Image,
   Grid,
   GridColumn,
-  CardContent,
   Segment,
-  GridRow,
   Header,
 } from "semantic-ui-react";
 

src/components/about_us/Acheivements.jsx renamed to src/components/Acheivements.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Header, Image, Button } from "semantic-ui-react";
-import "./DeveloperCard.css";
+import "./css/developer-card.css";
 
 export default class DeveloperCard extends Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export default class DeveloperCard extends Component {
     window.open(url, "_blank");
   };
 
-  handleUpdate = (e, { calculations }) => {};
+  handleUpdate = (e, { calculations }) => { };
 
   render() {
     return (

src/components/blog/BlogCards.jsx renamed to src/components/BlogCards.jsx

@@ -5,19 +5,13 @@ import ImageGallery from "react-image-gallery";
 import { useAsyncEffect } from "use-async-effect";
 
 //CSS
-import "./Gallery.css";
+import "./css/gallery.css";
 
 // API TOKEN
-import { API_TOKEN } from "../../constants";
+import { API_TOKEN } from "../constants";
 
 const axios = require("axios");
-// document.addEventListener("DOMContentLoaded", ()=>{
-//   setInterval(()=>{
-//       if(document.getElementsByClassName('loadScreenGallery')[0]){
-//       document.getElementsByClassName('loadScreenGallery')[0].style.display='none';
-//       }
-//   },2000);
-// });
+
 function Gallery() {
   const [images, setImages] = useState(null);
 
@@ -54,15 +48,6 @@ function Gallery() {
     return () => (shouldCancel = true);
   }, []);
 
-  // const handleBack = () => {
-  //   history.push("/");
-  // };
-
-  // const sections = [
-  //   { key: "Home", content: "Home", link: true, onClick: handleBack },
-  //   { key: "Gallery", content: "Gallery", active: true },
-  // ];
-
   return (
     <div className="galleryDiv">
       <Segment inverted>

src/components/blog/BlogMenuTop.jsx renamed to src/components/BlogMenuTop.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import { Grid } from "semantic-ui-react";
 
-export default class ImageMat extends Component {
+export default class ImageMatrixArt extends PureComponent {
   render() {
     return (
       <div style={{ textAlign: "center" }}>

src/pages/blog/Page1.jsx renamed to src/components/BlogSection.jsx

@@ -8,8 +8,8 @@ import {
   Transition,
   Placeholder,
 } from "semantic-ui-react";
-import Achievements from "../../services/google-firebase/models/achievements/achievements";
-import "./InfoCard.css";
+import Achievements from "../services/google-firebase/models/achievements/achievements";
+import "./css/info-card.css";
 
 var x = window.matchMedia("(max-width: 900px)");
 var maxAchievementCards = 2;
@@ -61,7 +61,7 @@ export default class InfoCard extends Component {
             ? "0px 2px 6px 0px green"
             : "0px 0px 0px 0px green";
       } catch (error) {
-        console.log("Some error occured",e)
+        console.log("Some error occured", e)
       }
     }
   };
@@ -99,64 +99,64 @@ export default class InfoCard extends Component {
               {
                 // Check if the cards should be visible
                 this.state.visible &&
-                  // Map the sliced cards to create an array of rendered components
-                  this.state.achievements
-                    .slice(
-                      cardIndex(this.state.slide_idx),
-                      cardIndex(this.state.slide_idx + 1)
-                    )
-                    .map((card, card_index) => (
-                      <Grid.Row key={Math.random()} className="aboutCard">
-                        {card_index % 2 === 0 ? (
-                          <Grid.Column
-                            textAlign="center"
-                            className="justToAlignImage"
-                            mobile={8}
-                            computer={4}
-                          >
-                            <Suspense fallback={<Placeholder />}>
-                              <Image
-                                style={{ objectFit: "contain" }}
-                                className="thumbnail1"
-                                src={
-                                  card.posterLink
-                                    ? card.posterLink
-                                    : "./TcrLogoClean.png"
-                                }
-                              />
-                            </Suspense>
-                          </Grid.Column>
-                        ) : null}
-                        <Grid.Column width={7}>
-                          <Header>
-                            <div className="title1">{card.header}</div>
-                            <Header.Subheader className="paraCard">
-                              {card.body}
-                            </Header.Subheader>
-                          </Header>
+                // Map the sliced cards to create an array of rendered components
+                this.state.achievements
+                  .slice(
+                    cardIndex(this.state.slide_idx),
+                    cardIndex(this.state.slide_idx + 1)
+                  )
+                  .map((card, card_index) => (
+                    <Grid.Row key={Math.random()} className="aboutCard">
+                      {card_index % 2 === 0 ? (
+                        <Grid.Column
+                          textAlign="center"
+                          className="justToAlignImage"
+                          mobile={8}
+                          computer={4}
+                        >
+                          <Suspense fallback={<Placeholder />}>
+                            <Image
+                              style={{ objectFit: "contain" }}
+                              className="thumbnail1"
+                              src={
+                                card.posterLink
+                                  ? card.posterLink
+                                  : "./TcrLogoClean.png"
+                              }
+                            />
+                          </Suspense>
+                        </Grid.Column>
+                      ) : null}
+                      <Grid.Column width={7}>
+                        <Header>
+                          <div className="title1">{card.header}</div>
+                          <Header.Subheader className="paraCard">
+                            {card.body}
+                          </Header.Subheader>
+                        </Header>
+                      </Grid.Column>
+                      {card_index % 2 !== 0 ? (
+                        <Grid.Column
+                          textAlign="center"
+                          className="justToAlignImage"
+                          mobile={8}
+                          computer={4}
+                        >
+                          <Suspense fallback={<Placeholder />}>
+                            <Image
+                              style={{ objectFit: "contain" }}
+                              className="thumbnail1"
+                              src={
+                                card.posterLink
+                                  ? card.posterLink
+                                  : "./TcrLogoClean.png"
+                              }
+                            />
+                          </Suspense>
                         </Grid.Column>
-                        {card_index % 2 !== 0 ? (
-                          <Grid.Column
-                            textAlign="center"
-                            className="justToAlignImage"
-                            mobile={8}
-                            computer={4}
-                          >
-                            <Suspense fallback={<Placeholder />}>
-                              <Image
-                                style={{ objectFit: "contain" }}
-                                className="thumbnail1"
-                                src={
-                                  card.posterLink
-                                    ? card.posterLink
-                                    : "./TcrLogoClean.png"
-                                }
-                              />
-                            </Suspense>
-                          </Grid.Column>
-                        ) : null}
-                      </Grid.Row>
-                    ))
+                      ) : null}
+                    </Grid.Row>
+                  ))
               }
 
               <Grid.Row>
@@ -168,7 +168,7 @@ export default class InfoCard extends Component {
                     content="Prev"
                     disabled={
                       this.state.achievements[
-                        cardIndex(this.state.slide_idx - 1)
+                      cardIndex(this.state.slide_idx - 1)
                       ] == null
                     }
                     className="nextPrevBtns"
@@ -184,7 +184,7 @@ export default class InfoCard extends Component {
                     content="Next"
                     disabled={
                       this.state.achievements[
-                        cardIndex(this.state.slide_idx + 1)
+                      cardIndex(this.state.slide_idx + 1)
                       ] == null
                     }
                     className="nextPrevBtns"

src/components/contact_us/ContactForm.jsx renamed to src/components/ContactForm.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Header } from "semantic-ui-react";
-import "./introcard.css";
+import "./css/intro-card.css";
 
 export default class introCard extends Component {
   render() {