Merge pull request #9 from prabhuomkar/frontend

done issue #4 and issue #8

frontend/.eslintrc.json

@@ -14,6 +14,7 @@
   "plugins": ["react"],
   "ignorePatterns": ["*.test.js"],
   "rules": {
-    "react/jsx-filename-extension": "off"
+    "react/jsx-filename-extension": "off",
+    "no-undef": "off"
   }
 }

frontend/package.json

@@ -3,16 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@rmwc/button": "^6.1.4",
+    "@apollo/client": "^3.4.11",
     "@rmwc/drawer": "^6.1.4",
     "@rmwc/grid": "^6.1.4",
     "@rmwc/icon": "^6.1.4",
     "@rmwc/list": "^6.1.4",
+    "@rmwc/textfield": "^6.1.4",
+    "@rmwc/theme": "^6.1.4",
     "@rmwc/top-app-bar": "^6.1.4",
     "@rmwc/typography": "^6.1.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "graphql": "^15.5.3",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

frontend/src/App.js

@@ -1,20 +1,37 @@
 import React, { useState } from 'react';
+import { ThemeProvider } from '@rmwc/theme';
 import { BrowserRouter } from 'react-router-dom';
-import Header from './components/Header';
-import Content from './components/Content';
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+import { Header, Content } from './components';
+import '@rmwc/theme/styles';
 import './App.scss';
 
 const App = () => {
+  const client = new ApolloClient({
+    uri: process.env.REACT_APP_API_URL,
+    cache: new InMemoryCache(),
+  });
   const [open, setOpen] = useState(true);
   const toggle = () => setOpen(!open);
 
   return (
-    <BrowserRouter>
-      <div className="App">
-        <Header toggleSideNav={toggle} />
-        <Content open={open} />
-      </div>
-    </BrowserRouter>
+    <ApolloProvider client={client}>
+      <ThemeProvider
+        options={{
+          primary: '#812ce5',
+          secondary: '#ffffff',
+          onPrimary: '#ffffff',
+          textPrimaryOnBackground: '#000',
+        }}
+      >
+        <BrowserRouter>
+          <div className="App">
+            <Header toggleSideNav={toggle} />
+            <Content open={open} />
+          </div>
+        </BrowserRouter>
+      </ThemeProvider>
+    </ApolloProvider>
   );
 };
 

frontend/src/App.scss

@@ -119,3 +119,29 @@ p {
   color: $primary-dark-color !important;
 }
 /* sidenav styles end */
+
+.search-bar-section {
+  width: 100%;
+}
+
+.search-bar > .mdc-text-field__input {
+  padding-top: 16px;
+}
+
+.search-bar {
+  border-radius: 4px !important;
+  background-color: white !important;
+  height: 40px;
+  width: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+  .search-bar-section {
+    max-width: 180px;
+  }
+}
+
+.grid-cols > .mdc-layout-grid__inner {
+  display: flex;
+  justify-content: space-between;
+}

frontend/src/components/Content.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Route, Switch } from 'react-router-dom';
 import { DrawerAppContent } from '@rmwc/drawer';
 import Photos from '../pages/Photos';
-import Explore from '../pages/Explore';
+import { Explore, People, Places, Things } from '../pages/explore';
 import Sharing from '../pages/Sharing';
 import SideNav from './SideNav';
 
@@ -16,6 +16,9 @@ const Content = (props) => {
         <Switch>
           <Route exact path="/" component={Photos} />
           <Route exact path="/explore" component={Explore} />
+          <Route exact path="/explore/people" component={People} />
+          <Route exact path="/explore/places" component={Places} />
+          <Route exact path="/explore/things" component={Things} />
           <Route exact path="/sharing" component={Sharing} />
         </Switch>
       </DrawerAppContent>

frontend/src/components/SideNav.js

@@ -37,9 +37,13 @@ const SideNav = (props) => {
         <List>
           {sideNavItems.map((section) => (
             <div key={section.subtitle}>
-              <DrawerSubtitle className="drawer-subtitle">
-                {section.subtitle}
-              </DrawerSubtitle>
+              {
+                section.subtitle ? (
+                  <DrawerSubtitle className="drawer-subtitle">
+                    {section.subtitle}
+                  </DrawerSubtitle>
+                ) : <></>
+              }
               {section.items.map((item) => (
                 <NavLink
                   key={item.link_to}

frontend/src/components/Header.js → frontend/src/components/header/Header.js

@@ -7,10 +7,11 @@ import {
   TopAppBarTitle,
   TopAppBarFixedAdjust,
   TopAppBarNavigationIcon,
+  TopAppBarActionItem,
 } from '@rmwc/top-app-bar';
-
 import { NavLink } from 'react-router-dom';
 import '@rmwc/top-app-bar/styles';
+import SearchBar from './SearchBar';
 
 const Header = ({ toggleSideNav }) => {
   return (
@@ -25,6 +26,13 @@ const Header = ({ toggleSideNav }) => {
               </NavLink>
             </TopAppBarTitle>
           </TopAppBarSection>
+          <TopAppBarSection>
+            <SearchBar />
+          </TopAppBarSection>
+          <TopAppBarSection alignEnd>
+            <TopAppBarActionItem icon="help" />
+            <TopAppBarActionItem icon="settings" />
+          </TopAppBarSection>
         </TopAppBarRow>
       </TopAppBar>
       <TopAppBarFixedAdjust />

frontend/src/components/header/SearchBar.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextField } from '@rmwc/textfield';
+import '@rmwc/grid/styles';
+import '@rmwc/textfield/styles';
+
+const SearchBar = () => {
+  return (
+    <div className="search-bar-section">
+      <TextField
+        outlined
+        className="search-bar"
+        icon="search"
+        placeholder="Search your photos"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;

frontend/src/components/index.js

@@ -0,0 +1,5 @@
+import Content from './Content';
+import SideNav from './SideNav';
+import Header from './header/Header';
+
+export { Content, SideNav, Header };

frontend/src/pages/explore/Explore.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Grid, GridCell } from '@rmwc/grid';
+import '@rmwc/grid/styles';
+
+const Explore = () => {
+  return (
+    <>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          People
+        </GridCell>
+        <GridCell desktop={2} tablet={2} phone={1}>
+          <Link to="/explore/people" className="link">
+            SEE ALL
+          </Link>
+        </GridCell>
+      </Grid>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          Places
+        </GridCell>
+        <GridCell desktop={2} tablet={2} phone={1}>
+          <Link to="/explore/places" className="link">
+            SEE ALL
+          </Link>
+        </GridCell>
+      </Grid>
+      <Grid className="grid-cols">
+        <GridCell desktop={10} tablet={6} phone={3}>
+          Things
+        </GridCell>
+        <GridCell desktop={2} tablet={2} phone={1}>
+          <Link to="/explore/things" className="link">
+            SEE ALL
+          </Link>
+        </GridCell>
+      </Grid>
+    </>
+  );
+};
+
+export default Explore;

frontend/src/pages/explore/People.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const People = () => {
+  return <>People</>;
+};
+
+export default People;

frontend/src/pages/explore/Places.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Places = () => {
+  return <>Places</>;
+};
+
+export default Places;

frontend/src/pages/explore/Things.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Things = () => {
+  return <>Things</>;
+};
+
+export default Things;

frontend/src/pages/explore/index.js

@@ -0,0 +1,6 @@
+import Explore from './Explore';
+import People from './People';
+import Places from './Places';
+import Things from './Things';
+
+export { Explore, People, Places, Things };