feat: onboarding (#475)

* 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 <[email protected]> Co-authored-by: G.Anish Kumar Patro <[email protected]> * fix: missing pagination component (#469) * chore: rename pagination to _pagination * chore: rename _pagination to Pagination * fix: gsi call after script load (#472) * chore: remove gsi script (#473) * feat: rebase with main (#474) * chore: update CC info 2023 (#451) * feat(home): increase number of displayed articles on the home page (#453) chore(home): increase display articles * chore: delete repo docs (#455) * chore: delete repo docs * chore: format html templete * fix(home): remove duplicate article in home page (#456) * fix(photostory): optimise the state update in photostory (#444) * fix(photostory): optimise the state update * fix(photostory): update right side image in carousel * chore: update sac info page (#467) * fix: search bar (#460) * fix: search bar * fix: serach bar * fix: search bar --------- Co-authored-by: Anish Sarawgi <[email protected]> Co-authored-by: Dibendu Sahani <[email protected]> Co-authored-by: SUNNY KUMAR <[email protected]> --------- Co-authored-by: Rutaj Dash <[email protected]> Co-authored-by: Ashish Padhy <[email protected]> Co-authored-by: G.Anish Kumar Patro <[email protected]> Co-authored-by: anish <[email protected]> Co-authored-by: Anish Sarawgi <[email protected]> Co-authored-by: Dibendu Sahani <[email protected]> Co-authored-by: SUNNY KUMAR <[email protected]>
Monday-Morning · Oct 15, 2023 · 57a6e02 · 57a6e02
1 parent 05e8eac
commit 57a6e02
Show file tree

Hide file tree

Showing 65 changed files with 1,382 additions and 624 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
@@ -18,8 +18,8 @@ export const ONBOARDING = Object.freeze({
     EMAIL_PLACEHOLDER: '[email protected]',
     BUTTON: {
       PRIMARY: 'Get Verification Link',
-      SECONDARY: 'Check again and continue',
-      MOBILE: 'Next',
+      SECONDARY: 'Open webmail',
+      FINALLY: 'Confirm Verification',
     },
     NOTE: 'Note: This only works if you’re a current student/ employee of \n NIT Rourkela with a valid institute email id.',
   },
@@ -28,27 +28,26 @@ 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',
-      'Campus Buzz',
-      'Alumni Affairs',
-      'Student Activities',
-      'Halls',
-      'Interviews',
-      'SAC Speaks',
-      'Dean Speaks',
-      'Videos',
-      'Guest Interviews',
-      "Director's Desk",
-      "Chief Warden's Column",
-      'Comics',
-      'Alumnus Speaks',
-      'Editorial',
-      'Placements',
-      'Internships',
-      'Higher Education',
-      'Photostories',
+      ['Campus Buzz', 12],
+      ['Alumni Affairs', 52],
+      ['Student Activities', 14],
+      ['Halls', 15],
+      ['Interviews', 21],
+      ['SAC Speaks', 22],
+      ['Guest Interviews', 24],
+      ["Director's Desk", 31],
+      ["Chief Warden's Column", 32],
+      ['Alumnus Speaks', 51],
+      ['Editorial', 66],
+      ['Placements', 41],
+      ['Internships', 42],
+      ['Higher Education', 43],
+      ['Photostories', 62],
+      ['Witsdom', 61],
     ],
   },
   NEWSLETTER: {

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) => (