Date Component

PLAN.md → DESIGN.md

@@ -2,34 +2,75 @@
 
 ## Data Structures
 
+- Arrays: for emotions
+
 ### Classes
 
 #### Emotion
 
+- Should be able to store name of the emotion and corresponding color it maps to.
+- getColor
+- getName
+
 #### Entry
 
+    Entry must have:
+
+- list of emotion yoou selected.
+- date and time
+- list of files you uploaded(images)
+- string for notes you typed.
+
 ## Frontend
 
-### Common 
+### Common
+
+    Files which are common among all elements.
+    Example: a theme: defines overall style of our program.
 
 #### Theme
 
+    - overall styling,
+    - font, font size, spacing
+
 #### Assets
 
+    - any icons, images.
+    - we need logo.
+    - for the app, not entered by the users
+
 ### Components
 
 #### AddButtonComponent
 
-#### ArrowLeftComponent
+- opens a pop-up which is a input form
+
+#### ArrowComponent
 
-#### ArrowRightComponent
+- changes date and updates views accordingly
+- there is a left arrow and right arrow.
+- left arrow should goes to the previous date, right arrow goes following date
+- right arrow should
 
 #### CalendarComponent
 
+- show a calendar
+- should be a pop
+- when you click on a date it should go back to home view and the date component should show the date you clicked
+
 #### DateComponent
 
+- should show today's date by default.
+- should show the date passed by props.
+- should open the calendar view when clicked
+
 #### FileInputComponent
 
+- allows you to upload the image.
+- shows the preview of the image
+- when you click, it opens browse file
+- once you select file it shows a preview.
+
 #### ListElementComponent
 
 #### MoodInputComponent
@@ -146,21 +187,21 @@
 
 # Data Structures
 ## User Class
-- Today 
+- Today
 - Name
 - Password
-- HashMap for month to array of 
+- HashMap for month to array of
 
 ## Emotion Class
 - Description of emotion
 - Name
-- Colour associated with it 
+- Colour associated with it
 
 ## Event Class
 ### Has a notes field
 ### Array for list of extra items uploaded by user like images
-### 
+###
 
 # NodeJS + Express vs Firebase
 ## Server
-## YAML database? -->
+## YAML database? -->

src/App.tsx

@@ -1,50 +1,44 @@
-import React, { useState, Suspense } from 'react';
-import {
-  BrowserRouter,
-  Switch,
-  Route,
-  Redirect
-} from 'react-router-dom';
-import './App.css';
-import * as serviceWorker from './serviceWorker';
+import React, { useState, Suspense } from "react";
+import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import "./App.css";
+import * as serviceWorker from "./serviceWorker";
 // import CalendarView from './views/CalendarView';
-import HomeView from './views/HomeView';
+import HomeView from "./views/HomeView";
 // import NotesView from './views/NotesView';
 // import InputView from './views/InputView';
-import WelcomeView from './views/WelcomeView';
-
+import WelcomeView from "./views/WelcomeView";
 
 const App: React.FC = () => {
-  const [date, setDate] = useState(Date());
+  const [date, setDate] = useState(new Date());
 
   return (
     <BrowserRouter>
-      <div className='App'>
+      <div className="App">
         <Suspense fallback={<WelcomeView />}>
           <Switch>
-            <Route path='/home'>
-              <HomeView />
+            <Route path="/home">
+              <HomeView date={date} />
             </Route>
-            <Route path='/notes'>
+            <Route path="/notes">
               {/* TODO directly open popup for Notes */}
               {/* <NotesView /> */}
             </Route>
-            <Route path='/calendar'>
+            <Route path="/calendar">
               {/* TODO directly open popup for Calendar */}
               {/* <CalendarView /> */}
             </Route>
-            <Route path='/input'>
+            <Route path="/input">
               {/* TODO directly open popup for Input */}
               {/* <InputView /> */}
             </Route>
-            <Redirect from='*' to='/home' />
+            <Redirect from="*" to="/home" />
           </Switch>
         </Suspense>
       </div>
     </BrowserRouter>
   );
-}
+};
 
 export default App;
 
-serviceWorker.register();
+serviceWorker.register();

src/components/DateComponent.tsx

@@ -1,24 +1,45 @@
-import React from 'react';
-import PropType from 'prop-types';
+import React from "react";
+import PropType from "prop-types";
+import CSS from "csstype";
 
 type DateComponentProps = {
-    date: Date;
-    handleClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-}
+  date: Date;
+  handleClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
 
-const DateComponent: React.FC<DateComponentProps> = (props: DateComponentProps) => {
-    return (
-        <div onClick={props.handleClick}>
-            <div>{props.date.toLocaleString('default', { month: 'short' })}</div>
-            <div>{props.date.getDate()}</div>
-            <div>{props.date.getFullYear()}</div>
+const dateStyle: CSS.Properties = {
+  display: "grid",
+  margin: "auto",
+  fontSize: "5rem",
+  gridTemplateRows: "auto auto"
+};
+
+const dayMonthStyle: CSS.Properties = {
+  display: "grid",
+  margin: "auto",
+  gridTemplateColumns: "auto auto",
+  gridColumnGap: "5px"
+};
+
+const DateComponent: React.FC<DateComponentProps> = (
+  props: DateComponentProps
+) => {
+  return (
+    <div onClick={props.handleClick} style={dateStyle}>
+      <div style={dayMonthStyle}>
+        <div>{props.date.getDate()}</div>
+        <div style={{ color: "#DcAE1D" }}>
+          {props.date.toLocaleString("default", { month: "short" })}
         </div>
-    );
-}
+      </div>
+      <div style={{ color: "#507299" }}>{props.date.getFullYear()}</div>
+    </div>
+  );
+};
 
 DateComponent.propTypes = {
-    date: PropType.instanceOf(Date).isRequired,
-    // TODO add handleClick
-}
+  date: PropType.instanceOf(Date).isRequired
+  // TODO add handleClick
+};
 
-export default DateComponent;
+export default DateComponent;

src/views/HomeView.tsx

@@ -1,14 +1,22 @@
-import React from 'react';
-import PinWheelComponent from '../components/PinWheelComponent';
+import React from "react";
+import PinWheelComponent from "../components/PinWheelComponent";
+import DateComponent from "../components/DateComponent";
 
 type HomeViewProps = {
-
-}
+  date: Date;
+};
 
 const HomeView: React.FC<HomeViewProps> = (props: HomeViewProps) => {
-    return (
-        <PinWheelComponent handleClick={() => alert('clicked!')} colours={['#d0c9d6', '#000000', '#787878']}></PinWheelComponent>
-    );
-}
+  return (
+    <div>
+      <DateComponent date={props.date}></DateComponent>
+
+      <PinWheelComponent
+        handleClick={() => alert("clicked!")}
+        colours={["#d0c9d6", "#000000", "#787878"]}
+      ></PinWheelComponent>
+    </div>
+  );
+};
 
-export default HomeView;
+export default HomeView;