feat: rebase with onboarding (#462)

* feat: get podcast data (#356) * chore: fix pritter issue (#359) * fix: prettier format check (#360) * chore: fix prettier issue * fix: prettier format check * fix: photostory import issue (#362) * wip:PhotoStory to _Photostory * wip: _Photostory to Photostory * fix: update yarn.lock * feat: enable dynamic spotify embed (#364) * feat: enable spotify * feat: show dynamic embded * feat: basic integration of live page (#384) * fix: add course list and disable till implementation * fix: integrate data display * chore: add session list * feat: integrate live page * feat(events): add calendar component for events page (#338) * feat(events): add calendar component for events page * style: add gaps between weekdays and the days box. * feat: add a events page * chore: rename about to event. * fix: flicker * fix: gap between day box and bottom * fix: remove events page * chore: add chart js Co-authored-by: Kanhaiya <kagrawal88628@gmail.com> * fix(photostory): add dynamic og meta tags (#378) * fix(photostory): add dynamic og meta tags * fix: modify og tag content url * fix: modify og tag in article page * fix: live and department links (#387) * fix: live and departments links * chore: prettier check * fix: autocomplete search-bar flickering (#373) * fix: search-bar animation * fix: debounce time * fix: article overflow due to link (#375) * fix: link overflow * fix: deprecated break-word * fix: add null check for article (#370) * fix: add null check for article * fix: remove while loop * fix: remove console.log * fix: optional rendering of articles * fix: consider all cases * feat: add onboarding pagination (#388) * feat: add onboarding pagination * feat: smoothen mobile onboarding * fix: button styling * chore: remove redundant lines * fix: set placed data in mobile screen (#386) * style: fix styling issue in mobile screen * fix: set placed data in mobile screen * fix(article): fix table data and max width of article (#368) * fix(table): fix missing data and max width * style: add max width to the width * feat(guide): add mini print carousel (#374) * feat(guide): add mini print carousel * fix: add link in mobile view * fix: back button routing in healthInfo Page * chore: redirect live page (#391) * Merge branch 'main' into guide-miniPrint * chore: reduce no. of state * fix: remove coming soon Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> * fix: handle null contributions (#396) * fix: handle null contributions * fix(portfolio): null contributions * chore: change contribution message * fix: alignment of table of content (#385) * fix: alignment of table of content * fix: alignment on mobile/tablet screens * feat: temporarily remove cwc section (#408) * fix: add sac posts (#409) * chore: remove url hardcoding (#410) * fix: og tags of portfolio (#400) * fix: og tags of portfolio * fix: og tags * feat: add hall page (#401) * Hall Images * feat: Hall Info Page * fix: Hall Page Routing * fix: Mobile view * fix: Cleaning code * Fix: Formating * Fix: Placeholder change * fix(guide): add icon3 in option.js (#420) * fix: auth key errors (#411) * chore: upgrade packages to latest minor-patch (#423) * chore(deps): bump loader-utils from 2.0.2 to 2.0.4 in /client (#312) Bumps [loader-utils](https://github.com/webpack/loader-utils) from 2.0.2 to 2.0.4. - [Release notes](https://github.com/webpack/loader-utils/releases) - [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.4/CHANGELOG.md) - [Commits](webpack/loader-utils@v2.0.2...v2.0.4) --- updated-dependencies: - dependency-name: loader-utils dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /client (#341) Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2. - [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases) - [Commits](SamVerschueren/decode-uri-component@v0.2.0...v0.2.2) --- updated-dependencies: - dependency-name: decode-uri-component dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump json5 from 1.0.1 to 1.0.2 in /client (#392) Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](json5/json5@v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: user onboarding flow (#426) * feat: redirect to home on skip onboarding * chore: go to interested topic page * feat(graphql): add add user store path mutation * feat(graphql): add user interested topic mutation * feat(graphql): add user news letter subscription mutation * feat: integrate mutation to selected topics * chore: change auth state * feat: integrate newsletter subscricption * chore:change user flow * chore: change to user id * chore: add category number in interested topics * chore: change data type * feat: add update user profile picture * fix: user profile image path and mid * feat: add get firebase user * chore: change verify email flow * feat: webmail authentication userflow (#440) * feat: addNITRMail mutation * feat: imagekit config file * chore: update onboarding placeholders * fix: standardise user mutations * fix: add null check for firebaseToken * feat: sign in and sign up auth user flows * feat: implement sign in and signup auth user flows * chore: rectify imports for used and unused * feat: handle migrated accounts * fix(migrated-user): add missing field * fix: uncomment useRouter * feat: user onboarding experience (#441) * feat: add loading fallback * feat: check already registered nitr mail * fix: restore deleted imports * feat: add default profile picture * refactor: auth for server and client-side with middleware checks (#447) * feat: create auth middleware for article pages * chore(icons): use precise imports to reduce build * fix: use defaultValue instead of selected * fix: no div inside p * fix: missing key prop in home * chore: configure dev and prod for debugger * refactor: apollo context provider * refactor: apollo client for server side queries * chore: update env sample for server key * fix(middleware): retrieve correct cookies * refactor: consume client side graphClient context * refactor: merge auth context and state as provider * refactor: remove redundant files * fix(import): wrong path for checkNITRMail * fix(auth-context-provider): typo in graphClient * fix(auth-context): typo in variable name * fix(auth-context): send email link prod switch * feat: add sign in button (#425) * feat: add sign in button * fix * fixed * feat: add signIn button in mobile view * feat: add signin and signout feature (#461) * feat: add sign in button * fix * fixed * feat: add signIn button in mobile view * feat: add user avatar * feat: add signin signout --------- Co-authored-by: anish <anishkumarpatro03@gmail.com> Co-authored-by: G.Anish Kumar Patro <105335549+anish-patro@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Rutaj Dash <33367546+rutajdash@users.noreply.github.com> Co-authored-by: Kanhaiya Agrawal <83342480+kanhaiya88628@users.noreply.github.com> Co-authored-by: Kanhaiya <kagrawal88628@gmail.com> Co-authored-by: Anish Sarawgi <98693953+Anish-Sarawgi@users.noreply.github.com> Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> Co-authored-by: Silpa Priyadarshini <98985007+priyadarshini-silpa@users.noreply.github.com> Co-authored-by: G.Anish Kumar Patro <105335549+anish-patro@users.noreply.github.com> Co-authored-by: Amal Mohan <102766508+Amal-Mohan-2002@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: anish <anishkumarpatro03@gmail.com>
Monday-Morning · Aug 26, 2023 · 66995b4 · 66995b4
1 parent 6ed1c59
commit 66995b4
Show file tree

Hide file tree

Showing 64 changed files with 1,427 additions and 598 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "Next.js: debug client-side",
-      "type": "pwa-msedge",
+      "type": "msedge",
       "request": "launch",
       "url": "http://localhost:3000",
       "cwd": "${workspaceFolder}/client"
@@ -21,7 +21,18 @@
       "request": "launch",
       "command": "yarn start",
       "cwd": "${workspaceFolder}/client",
-      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithEdge"
+      }
+    },
+    {
+      "name": "Next.js: debug production stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn start:prod",
+      "cwd": "${workspaceFolder}/client",
       "serverReadyAction": {
         "pattern": "started server on .+, url: (https?://.+)",
         "uriFormat": "%s",

diff --git a/client/env/.env.sample b/client/env/.env.sample
@@ -5,6 +5,7 @@ PORT=3000
 # ----- ----- APOLLO GRAPHQL ----- -----
 
 NEXT_PUBLIC_SERVER_ADDRESS=some-server-url
+SERVER_ACCESS_API_KEY=some-api-key
 
 # ----- ----- IMAGEKIT ----- -----
 

diff --git a/client/src/assets/placeholder/onboarding.js b/client/src/assets/placeholder/onboarding.js
@@ -28,6 +28,8 @@ export const ONBOARDING = Object.freeze({
       TITLE: 'Interested Topics',
       CONTENT:
         "Select the topics you're interested in, and get smarter article suggestions on the MM website!",
+      LOADING_CONTENT:
+        "Give us a moment while we save your choices. Wouldn't want to mix them up.",
     },
     TOPICS: [
       'Witsdom',

diff --git a/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx b/client/src/components/admin/Sidebar/menulist/NavCollapse.jsx
@@ -9,11 +9,9 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import {
-  FiberManualRecord,
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-} from '@mui/icons-material';
+import FiberManualRecord from '@mui/icons-material/FiberManualRecord';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 
 // components
 import NavItem from './NavItem';

diff --git a/client/src/components/admin/Sidebar/menulist/NavItem.jsx b/client/src/components/admin/Sidebar/menulist/NavItem.jsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 // context
-import { SidebarContext } from '../../../../context/SidebarContext';
+import { SidebarContext } from '../../../../context/SidebarContextProvider';
 
 const NavItem = ({ item, level }) => {
   const theme = useTheme();

diff --git a/client/src/components/homepage/SocialMedia.js b/client/src/components/homepage/SocialMedia.js
@@ -15,7 +15,8 @@ import insta4 from '../../assets/images/instagram/insta4.jpeg';
 import insta5 from '../../assets/images/instagram/insta5.jpeg';
 import insta6 from '../../assets/images/instagram/insta6.jpeg';
 import Image from 'next/image';
-import { YouTube, Instagram } from '@mui/icons-material';
+import YouTube from '@mui/icons-material/YouTube';
+import Instagram from '@mui/icons-material/Instagram';
 
 const INSTA_LINKS = [insta1, insta2, insta3, insta4, insta5, insta6];
 

diff --git a/client/src/components/marginals/DesktopNavbar.js b/client/src/components/marginals/DesktopNavbar.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -7,27 +7,37 @@ import { useRouter } from 'next/router';
 import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Typography, TextField, Fade } from '@mui/material';
+import {
+  Container,
+  Typography,
+  TextField,
+  ButtonBase,
+  Fade,
+} from '@mui/material';
 // import TrendingUpSharpIcon from '@mui/icons-material/TrendingUpSharp';
 
 // Utils
 import ROUTES from '../../utils/getRoutes';
 import NewTabLink from '../shared/links/NewTabLink';
 import getArticleLink from '../../utils/getArticleLink';
+import { authContext } from '../../context/AuthContextProvider';
 
 // Assets
 import logoFullBlack from '../../assets/images/logos/logo_full_black.png';
 
 //hooks
 import useAutoComplete from '../../hooks/useAutoComplete';
 
+//components
+import UserAvatar from '../widgets/UserAvatar';
+
 const DesktopNavbar = () => {
   const router = useRouter();
   const [search, setSearch] = useState('');
   const [isSearchActive, setIsSearchActive] = useState(false);
   const inputRef = useRef(null);
   const classes = useStyles({ isSearchActive });
-
+  const { user } = useContext(authContext);
   const autoCompleteData = useAutoComplete(search, 10);
 
   useEffect(() => {
@@ -120,21 +130,38 @@ const DesktopNavbar = () => {
                 objectFit='cover'
               />
             </div>
-
-            <TextField
-              variant='standard'
-              label='Search for articles'
-              placeholder='Enter related words'
-              onClick={searchActive}
-              disabled={true}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position='start'>
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
-            />
+            <div className={classes.searchAndSign}>
+              <TextField
+                variant='standard'
+                label='Search for articles'
+                placeholder='Enter related words'
+                onClick={searchActive}
+                disabled={true}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position='start'>
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <div className={classes.signIn}>
+                {user ? (
+                  <div className={classes.avatar}>
+                    <UserAvatar
+                      picture={user.photoURL}
+                      name={user.displayName}
+                    />
+                  </div>
+                ) : (
+                  <Link href='/onboarding' passHref>
+                    <ButtonBase type='button' className={classes.button}>
+                      <span className={classes.label}> Sign In </span>
+                    </ButtonBase>
+                  </Link>
+                )}
+              </div>
+            </div>
           </div>
 
           <ul aria-label='Navbar' className={classes.menuContainer}>
@@ -166,16 +193,32 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     marginTop: '10px',
   },
-
   detailsContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-
     paddingTop: '10px',
     paddingBottom: '25px',
     borderBottom: `3px solid ${theme.palette.secondary.neutral50}`,
   },
+  button: {
+    textAlign: 'center',
+    borderRadius: '4px',
+    border: 'solid black 0.5px',
+    margin: '8px 8px 0px 0px',
+    padding: '10px 20px',
+  },
+  avatar: {
+    marginRight: '20px',
+  },
+  label: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: '20px',
+    fontWeight: '400',
+    lineHeight: '1.2rem',
+    textDecoration: 'none',
+    color: theme.palette.secondary.main,
+  },
   imgContainer: {
     width: '33%',
     height: 'auto',
@@ -188,6 +231,13 @@ const useStyles = makeStyles((theme) => ({
     width: 'auto !important',
     height: 'auto !important',
   },
+  searchAndSign: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  signIn: {
+    paddingLeft: '30px',
+  },
   menuContainer: {
     width: '100%',
     marginTop: '20px',

diff --git a/client/src/components/marginals/Footer.js b/client/src/components/marginals/Footer.js
@@ -209,8 +209,9 @@ const Footer = () => {
                       name='month'
                       className={classes.archivesSelect}
                       onChange={(e) => setMonth(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Month</Typography>
                       </option>
                       {ARCHIVES.months.map((month, key) => (
@@ -223,8 +224,9 @@ const Footer = () => {
                       name='year'
                       className={classes.archivesSelect}
                       onChange={(e) => setYear(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Year</Typography>
                       </option>
                       {ARCHIVES.years.map((year, key) => (

diff --git a/client/src/components/marginals/TopBar.js b/client/src/components/marginals/TopBar.js
@@ -1,31 +1,56 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Link from 'next/link';
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container } from '@mui/material';
+import { Container, useMediaQuery } from '@mui/material';
+import theme from '../../config/themes/light';
+
+import { authContext } from '../../context/AuthContextProvider';
 
 const TopBar = () => {
   const classes = useStyles();
+  const isMobileOrTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const { user, logout } = useContext(authContext);
+
   return (
     <div className={classes.topBar}>
       <Container>
         <div className={classes.container}>
           <ul className={classes.navList}>
-            <li className={classes.navItem}>
-              <Link href='/about' className={classes.navLink} passHref>
-                <span className={classes.navLink}>About</span>
-              </Link>
-            </li>
-            <li className={classes.navItem}>
-              <Link href='/guide' className={classes.navLink} passHref>
-                <span className={classes.navLink}>Guide</span>
-              </Link>
-            </li>
-            <li className={classes.navItem}>
-              <Link href='/contact' className={classes.navLink} passHref>
-                <span className={classes.navLink}>Contact Us</span>
-              </Link>
-            </li>
+            {!isMobile && (
+              <>
+                <li className={classes.navItem}>
+                  <Link href='/about' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>About</span>
+                  </Link>
+                </li>
+                <li className={classes.navItem}>
+                  <Link href='/guide' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>Guide</span>
+                  </Link>
+                </li>
+                <li className={classes.navItem}>
+                  <Link href='/contact' className={classes.navLink} passHref>
+                    <span className={classes.navLink}>Contact Us</span>
+                  </Link>
+                </li>
+              </>
+            )}
+            {isMobileOrTablet && (
+              <li className={classes.navItem}>
+                {user ? (
+                  <span onClick={logout} className={classes.signInButton}>
+                    Sign Out
+                  </span>
+                ) : (
+                  <Link href='/onboarding' passHref>
+                    <span className={classes.signInButton}>Sign In</span>
+                  </Link>
+                )}
+              </li>
+            )}
           </ul>
         </div>
       </Container>
@@ -35,6 +60,16 @@ const TopBar = () => {
 export default TopBar;
 
 const useStyles = makeStyles((theme) => ({
+  signInButton: {
+    color: '#ffffff',
+    backgroundColor: '#00368D',
+    alignItems: 'center',
+    padding: '4px 6px',
+    borderRadius: '0.3em',
+    fontFamily: 'IBM Plex Sans',
+    fontSize: '14px',
+    fontWeight: '400',
+  },
   topBar: {
     marginTop: '0',
     backgroundColor: theme.palette.primary.blue50,
@@ -49,6 +84,9 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: '16px',
     marginLeft: 'auto',
     marginRight: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      padding: '0px',
+    },
   },
   navList: {
     margin: '0',
@@ -64,6 +102,7 @@ const useStyles = makeStyles((theme) => ({
       marginLeft: '20px',
       fontSize: '1rem',
     },
+    cursor: 'pointer',
   },
   navLink: {
     fontFamily: 'IBM Plex Sans',