Geese features form

src/frontend/App.js

@@ -6,7 +6,6 @@ import Cookies from 'js-cookie';
 import * as userSelectors from './state/user/selectors';
 import TopBar from './components/TopBar';
 import LandingPage from './pages/landing/LandingPage';
-import FeaturesPage from './pages/features/FeaturesPage';
 import SignInPage from './pages/sign-in/SignInPage';
 import NotFoundPage from './pages/NotFound';
 import PostingsRouter from './pages/postings/Postings.router';
@@ -15,6 +14,7 @@ import GeeseRouter from './pages/geese/Geese.router';
 import TeamDescriptionsRouter from './pages/team-descriptions/TeamDescriptions.router';
 import { addAuthTokenToRequests } from './api/server';
 import BlogsRouter from './pages/blogs/Blogs.Router';
+import FeaturesRouter from './pages/features/Feature.router';
 
 const App = () => {
   let token = useSelector(userSelectors.token) || Cookies.get('tokenId');
@@ -39,11 +39,11 @@ const App = () => {
             <GeeseRouter />
           </div>
         </Route>
-        <Route path="/features" exact>
+        <Route path="/features">
           <div>
             {!token && <Redirect to="/sign-in" />}
             <TopBar />
-            <FeaturesPage />
+            <FeaturesRouter />
           </div>
         </Route>
         <Route path="/postings">

src/frontend/api/geese-features.js

@@ -0,0 +1,17 @@
+const getGeeseFeatures = (server) => () => server.get('/api/geese-features');
+const getGeeseFeatureById = (server) => (id) =>
+  server.get(`/api/geese-features/${id}`);
+const addGeeseFeature = (server) => (featureInfo) =>
+  server.post(`/api/geese-features`, featureInfo);
+const updateGeeseFeature = (server) => (id, updatedFeatureInfo) =>
+  server.patch(`/api/geese-features/${id}`, updatedFeatureInfo);
+const deleteGeeseFeature = (server) => (id) =>
+  server.delete(`/api/geese-features/${id}`);
+
+export default (server) => ({
+  getGeeseFeatures: getGeeseFeatures(server),
+  getGeeseFeatureById: getGeeseFeatureById(server),
+  addGeeseFeature: addGeeseFeature(server),
+  updateGeeseFeature: updateGeeseFeature(server),
+  deleteGeeseFeature: deleteGeeseFeature(server),
+});

src/frontend/api/index.js

@@ -7,6 +7,7 @@ import openingsDescription from './openings-description';
 import sponsors from './sponsors';
 import geeseInfo from './geese-info';
 import blogs from './blogs';
+import geeseFeatures from './geese-features'
 
 export default {
   google: google(server),
@@ -16,5 +17,6 @@ export default {
   formUpload: formUpload(server),
   openingsDescription: openingsDescription(server),
   geeseInfo: geeseInfo(server),
-  blogs: blogs(server)
+  blogs: blogs(server),
+  geeseFeatures: geeseFeatures(server)
 };

src/frontend/pages/features/EditFeature.js

@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import ImagePreview from '../../components/ImagePreview/index';
+import FormContainer from '../../components/FormContainer/index';
+import Button from '../../components/Button/index';
+import TextInput from '../../components/TextInput/index';
+import useFeaturesForm from './hooks/geese-features-form';
+import styled from 'styled-components';
+
+const EditFeaturePage = styled.div`
+  padding: 64px 88px 65px 58px;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+`;
+
+const LastUpdated = styled.div`
+  font-family: IBM Plex Sans;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: right;
+  flex: auto;
+`;
+
+const EditFeatureBody = styled.div`
+  padding-left: 30px;
+`;
+
+const FeatureInfo = styled.div`
+  padding-left: 10px;
+`;
+
+const FeatureImages = styled.div`
+  margin-bottom: 60px;
+`;
+
+const ImagesText = styled.div`
+  font-family: IBM Plex Sans;
+  font-size: 18px;
+  color: #232535;
+  margin: 0;
+`;
+
+const ImageCard = styled.div`
+  margin-right: 18px;
+`;
+
+const ImageCards = styled.div`
+  padding-top: 20px;
+  display: flex;
+`;
+
+const FeatureButtons = styled.div`
+  padding-left: 10px;
+`;
+
+const EditFeature = ({ add }) => {
+  const {
+    featureName,
+    setFeatureName,
+    picture,
+    setPicture,
+    pictureUrl,
+    setPictureUrl,
+    description,
+    setDescription,
+    imageUpload,
+    imageDelete,
+    saveForm,
+    deleteForm,
+    showModal,
+    openModal,
+    closeModal,
+    closeForm
+  } = useFeaturesForm();
+
+
+  const displayImages = useMemo(() => {
+    if (pictureUrl){
+    return [
+      <ImageCard>
+      <ImagePreview
+        src={pictureUrl}
+        onDelete={() => {
+          imageDelete();
+        }}
+      />
+    </ImageCard>
+    ]};
+
+  }, [picture, pictureUrl]);
+
+  return (
+    <EditFeaturePage>
+      <TopRow>
+        <Button cancel onClick={closeForm}>
+          &#60; Back
+        </Button>
+        {/* <LastUpdated>{`Last updated: ${getLastUpdated()}`}</LastUpdated> */}
+      </TopRow>
+
+      <EditFeatureBody>
+        <FormContainer title="Name (required)">
+          <TextInput
+            value={featureName}
+            onChange={setFeatureName}
+            placeholder="Feature V"
+            className="feature-info"
+          />
+        </FormContainer>
+
+        <FormContainer title="Description (required)">
+          <FeatureInfo>
+            <TextInput
+              value={description}
+              onChange={setDescription}
+              placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
+              multiLine={true}
+            />
+          </FeatureInfo>
+        </FormContainer>
+
+        <FeatureImages>
+          <FormContainer title="Image">
+            <FeatureInfo>
+              <ImagesText>
+                If this Feature is not selected as the "current Feature", only
+                the leftmost image will be displayed.
+              </ImagesText>
+              <ImagesText>
+                The images can be rearranged by dragging them into the desired
+                order.
+              </ImagesText>
+              <ImageCards>
+                {displayImages}
+                <ImagePreview onNew={imageUpload} />
+              </ImageCards>
+            </FeatureInfo>
+          </FormContainer>
+        </FeatureImages>
+
+        <FeatureButtons>
+          <Button label="Save" onClick={saveForm} />
+          <Button label="Cancel" cancel onClick={closeForm} />
+        </FeatureButtons>
+      </EditFeatureBody>
+    </EditFeaturePage>
+  );
+};
+
+export default EditFeature;

src/frontend/pages/features/Feature.router.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import FeaturesPage from './FeaturesPage';
+import EditFeature from './EditFeature';
+
+const FeaturesRouter = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Switch>
+      <Route path={path} exact>
+        <FeaturesPage />
+      </Route>
+      <Route path={`${path}/add`}>
+        <EditFeature add/>
+      </Route>
+      <Route path={`${path}/:featureId`}>
+        <EditFeature />
+      </Route>
+    </Switch>
+  );
+};
+export default FeaturesRouter;

src/frontend/pages/features/FeaturesPage.js

@@ -1,26 +1,66 @@
-import React from 'react'
-import FeaturePreview from './components/FeaturePreview'
-import useFeatures from './hooks/features';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import FeaturePreview from './components/FeaturePreview';
+import useGeeseFeatures from './hooks/geese-features';
+import styled from 'styled-components';
 
 const FeaturesPage = () => {
-  const {
-    features,
-    // editFeature,
-    // deleteFeature,
-    // createFeature
-  } = useFeatures();
+  const Button = styled.button`
+    height: 32px;
+    width: 100px;
+
+    background-color: #FED138;
+    font-weight: 700;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      border: 1px solid black;
+    }
+  `;
+
+  const AddButton = styled(Button)`
+    background-color: #FED138;
+    position: absolute;
+    top: -40px;
+    right: 50px;
+    margin: 5px;
+  `;
+
+  const history = useHistory();
+  const { geeseFeatures, deleteFeature } = useGeeseFeatures();
 
   const handleEdit = (id) => () => {
-    console.log(`Edit the Feature with id ${id}`);
+    history.push(`features/${id}`);
+  };
+
+  const handleDelete = (id) => () => {
+    deleteFeature(id)
   };
 
-  const featureItems = features.map(
-    (feature) => <FeaturePreview key={feature.id} onEdit={handleEdit(feature.id)} {...feature} />);
+  const handleAdd = () => {
+    history.push(`features/add`)
+  }
+
+  const featureItems = geeseFeatures?.map((feature) => (
+    <FeaturePreview
+      key={feature.id}
+      onEdit={handleEdit(feature.id)}
+      onDelete={handleDelete(feature.id)}
+      {...feature}
+    />
+  ));
 
   return (
-    <div>
+    <>
+    <div style={{ position: 'relative' }}>
+      <AddButton onClick={handleAdd}>Add</AddButton>
       {featureItems}
     </div>
+    </>
   );
 };
 

src/frontend/pages/features/components/FeaturePreview.js

@@ -81,29 +81,30 @@ const ButtonContainer = styled.div`
 `;
 
 const FeaturePreview = ({
-  title,
-  body,
-  img,
+  name,
+  description,
+  picture,
   onEdit,
   onDelete,
-}) => (
+}) => {
+  return (
     <Container>
       <FlexContainer>
         <FeatImage
           className="FeatImage"
-          src={img}
+          src={picture}
           alt="Example alt text"
         />
         <Column>
-          <h3>{title}</h3>
-          <p>{body}</p>
+          <h3>{name}</h3>
+          <p>{description}</p>
         </Column>
       </FlexContainer>
       <ButtonContainer>
         <EditButton onClick={onEdit}>Edit</EditButton>
         <DeleteButton onClick={onDelete}>Delete</DeleteButton>
       </ButtonContainer>
     </Container>
-  );
+  )};
 
 export default FeaturePreview;