Start adding registration and authentication features to dashboard

api/src/models/Item.ts

@@ -1,11 +1,18 @@
 import { model, Schema, Document } from 'mongoose';
 import { StoreDocument } from './Store';
 
+enum ItemUnit {
+	Kilogram = 'Kilogram',
+	Litre = 'Litre'
+}
+
 export interface ItemDocument extends Document {
 	name: string;
 	storeId: string;
 	store: StoreDocument;
 	unit: string;
+	pricePerUnit: number;
+	featured: boolean;
 }
 
 const ItemSchema = new Schema(
@@ -21,11 +28,15 @@ const ItemSchema = new Schema(
 		},
 		unit: {
 			type: String,
-			enum: ['']
+			enum: Object.values(ItemUnit)
 		},
 		pricePerUnit: {
 			type: Number,
 			required: true
+		},
+		featured: {
+			type: Boolean,
+			default: false
 		}
 	},
 	{ timestamps: true }

api/src/models/Store.ts

@@ -16,10 +16,10 @@ const StoreSchema = new Schema(
 		websiteUrl: {
 			type: String
 		},
-		instagramUrl: {
+		instagramUsername: {
 			type: String
 		},
-		twitterUrl: {
+		twitterUsername: {
 			type: String
 		}
 	},

api/src/schema.ts

@@ -5,16 +5,19 @@ import UserType from './types/User';
 import ItemType from './types/Item';
 import OrderType from './types/Order';
 import StoreType from './types/Store';
+import ManagerType from './types/Manager';
 
 import * as userMutations from './mutations/users';
 import * as itemMutations from './mutations/items';
 import * as orderMutations from './mutations/orders';
 import * as storeMutations from './mutations/stores';
+import * as managerMutations from './mutations/managers';
 
 import * as userQueries from './queries/users';
 import * as itemQueries from './queries/items';
 import * as orderQueries from './queries/orders';
 import * as storeQueries from './queries/stores';
+import * as managerQueries from './queries/managers';
 
 const RootType = `
 	type Mutation { default: String }
@@ -27,21 +30,24 @@ const typeDefs = [
 	UserType,
 	ItemType,
 	OrderType,
-	StoreType
+	StoreType,
+	ManagerType
 ];
 
 const resolvers = {
 	Mutation: {
 		...userMutations,
 		...itemMutations,
 		...orderMutations,
-		...storeMutations
+		...storeMutations,
+		...managerMutations
 	},
 	Query: {
 		...userQueries,
 		...itemQueries,
 		...orderQueries,
-		...storeQueries
+		...storeQueries,
+		...managerQueries
 	}
 };
 

api/src/types/Item.ts

@@ -6,17 +6,19 @@ const ItemType = `
 		store: Store! @embedded
 		unit: ItemUnit @column
 		pricePerUnit: Int! @column
+		featured: Boolean! @column
 	}
 
 	enum ItemUnit {
-		Kilograms
-		Litres
+		Kilogram
+		Litre
 	}
 
 	input ItemInput {
 		name: String!
 		pricePerUnit: Int!
 		unit: ItemUnit
+		featured: Boolean
 	}
 
 	extend type Mutation {

api/src/types/Store.ts

@@ -1,10 +1,17 @@
 const StoreType = `
 	type Store @entity {
+		_id: ID! @id
 		name: String! @column
+		websiteUrl: String @column
+		instagramUsername: String @column
+		twitterUsername: String @column
 	}
 
 	input StoreInput {
 		name: String
+		websiteUrl: String
+		instagramUsername: String
+		twitterUsername: String
 	}
 
 	extend type Query {

dashboard/.eslintrc

@@ -0,0 +1 @@
+{ "extends": "../.eslintrc" }

dashboard/codegen.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema: http://localhost:5000
-documents: src/**/*.graphql
+documents: graphql/*.graphql
 generates:
   src/types.tsx:
     plugins:

dashboard/graphql/Item.graphql

@@ -0,0 +1,29 @@
+mutation CreateItem($storeId: ID!, $input: ItemInput!) {
+	createItem(storeId: $storeId, input: $input) {
+		_id
+		name
+		pricePerUnit
+		featured
+		unit
+	}
+}
+
+query StoreItems($storeId: ID!) {
+	storeItems(storeId: $storeId) {
+		_id
+		name
+		pricePerUnit
+		featured
+		unit
+	}
+}
+
+query Items {
+	items {
+		_id
+		name
+		pricePerUnit
+		featured
+		unit
+	}
+}

dashboard/graphql/Manager.graphql

@@ -0,0 +1,17 @@
+mutation CreateManager($storeId: ID!, $input: ManagerInput) {
+	createManager(storeId: $storeId, input: $input) {
+		_id
+		name
+		email
+		role
+	}
+}
+
+query StoreManagers($storeId: ID!) {
+	storeManagers(storeId: $storeId) {
+		_id
+		name
+		email
+		role
+	}
+}

dashboard/graphql/Store.graphql

@@ -0,0 +1,6 @@
+mutation CreateStore($input: StoreInput) {
+	createStore(input: $input) {
+		_id
+		name
+	}
+}

dashboard/package.json

@@ -11,11 +11,13 @@
 		"@types/react": "^16.9.0",
 		"@types/react-dom": "^16.9.0",
 		"formik": "^2.1.4",
+		"graphql": "^15.0.0",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-router-dom": "^5.1.2",
 		"react-scripts": "3.4.1",
 		"react-select": "^3.1.0",
+		"react-spring": "^8.0.27",
 		"styled-components": "^5.0.1",
 		"typescript": "~3.7.2",
 		"urql": "^1.9.5"

dashboard/src/App.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+import Home from './pages/Home';
+import Orders from './pages/Orders';
+import Items from './pages/Items';
+
+import Sidebar from './components/Sidebar';
+import { Provider, createClient } from 'urql';
+
+const AppContainer = styled.div`
+	display: flex;
+	align-items: stretch;
+	height: 100vh;
+`;
+
+const MainContainer = styled.main`
+	flex-grow: 1;
+`;
+
+const client = createClient({
+	url: 'http://localhost:5000'
+});
+
+const App = () => {
+	return (
+		<Provider value={client}>
+			<BrowserRouter>
+				<AppContainer>
+					<Sidebar />
+					<MainContainer>
+						<Switch>
+							<Route exact path='/' component={Home} />
+							<Route exact path='/orders' component={Orders} />
+							<Route exact path='/items' component={Items} />
+						</Switch>
+					</MainContainer>
+				</AppContainer>
+			</BrowserRouter>
+		</Provider>
+	);
+};
+
+export default App;

dashboard/src/index.js → dashboard/src/index.tsx

@@ -5,10 +5,10 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change

dashboard/src/pages/Onboarding.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const PageBackground = styled.main`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: #efefef;
+`;
+
+const OnboardingContainer = styled.div`
+	border-radius: 6px;
+	box-shadow: 0 1px 3px hsla(0, 0%, 0.2);
+	padding: 20px;
+`;
+
+const Onboarding = () => {
+	return (
+		<PageBackground>
+			<OnboardingContainer>Onboarding</OnboardingContainer>
+		</PageBackground>
+	);
+};
+
+export default Onboarding;

dashboard/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />