Rework the resolution screen (#47)

* Rework the resolution screen * Move text into its own seperate tab * Bump version * Update year of release * Disable nudge * Remove useless Segment
MaxwellBo · Apr 16, 2019 · a6a3257 · a6a3257
1 parent 2e7dbea
commit a6a3257
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 62 deletions.
diff --git a/src/components/Files.tsx b/src/components/Files.tsx
@@ -8,6 +8,7 @@ import { Form, Button, Progress, DropdownProps, Flag, Container, Tab, TextAreaPr
 import { parseFlagName } from './Member';
 import Loading from './Loading';
 import { MemberOption, COUNTRY_OPTIONS } from '../constants';
+import { ResolutionID } from './Resolution';
 
 const TEXT_ICON: SemanticICONS = 'align left';
 const FILE_ICON: SemanticICONS = 'file outline';
@@ -24,6 +25,7 @@ export type PostID = string;
 export interface Post {
   type: Type
   uploader: string;
+  forResolution?: ResolutionID
   timestamp?: number; // we're just going to have to cop the undefined here
 }
 
@@ -45,17 +47,17 @@ interface Text extends Post {
 
 export type PostData = Link | File | Text;
 
-interface FeedPostProps {
+interface EntryProps {
   committeeID: CommitteeID;
   post: PostData;
 }
 
-interface FeedPostState {
+interface EntryState {
   metadata?: any;
 }
 
-class FeedEntry extends React.Component<FeedPostProps, FeedPostState> {
-  constructor(props: FeedPostProps) {
+class Entry extends React.Component<EntryProps, EntryState> {
+  constructor(props: EntryProps) {
     super(props);
 
     this.state = {
@@ -132,7 +134,7 @@ class FeedEntry extends React.Component<FeedPostProps, FeedPostState> {
             <Feed.User><Flag name={parseFlagName(post.uploader)}/> {post.uploader}</Feed.User>
             <Feed.Date>{this.renderDate('Posted')}</Feed.Date>
           </Feed.Summary>
-          <Feed.Extra style={{'white-space': 'pre'}} text>{post.body}</Feed.Extra>
+          <Feed.Extra style={{'whiteSpace': 'pre'}} text>{post.body}</Feed.Extra>
         </Feed.Content>
       </Feed.Event>
     );
@@ -200,6 +202,7 @@ interface State {
 }
 
 interface Props extends RouteComponentProps<URLParameters> {
+  forResolution?: ResolutionID
 }
 
 export default class Files extends React.Component<Props, State> {
@@ -249,7 +252,8 @@ export default class Files extends React.Component<Props, State> {
       type: Type.File,
       timestamp: new Date().getTime(),
       filename: uploadTask.snapshot.ref.name,
-      uploader: uploader ? uploader.text : 'Unknown'
+      uploader: uploader ? uploader.text : 'Unknown',
+      forResolution: this.props.forResolution // may not exist
     };
 
     this.state.committeeFref.child('files').push().set(file);
@@ -305,7 +309,8 @@ export default class Files extends React.Component<Props, State> {
       timestamp: new Date().getTime(),
       name: body,
       url: link,
-      uploader: uploader ? uploader.text : 'Unknown'
+      uploader: uploader ? uploader.text : 'Unknown',
+      forResolution: this.props.forResolution // may not exist
     };
 
     this.state.committeeFref.child('files').push().set(linkData);
@@ -320,7 +325,8 @@ export default class Files extends React.Component<Props, State> {
       type: Type.Text,
       timestamp: new Date().getTime(),
       body: body,
-      uploader: uploader ? uploader.text : 'Unknown'
+      uploader: uploader ? uploader.text : 'Unknown',
+      forResolution: this.props.forResolution // may not exist
     };
 
     this.state.committeeFref.child('files').push().set(linkData);
@@ -473,7 +479,7 @@ export default class Files extends React.Component<Props, State> {
         <Form.TextArea
           value={body}
           onChange={this.setBody}
-          autoHeight
+          autoHeight={true}
           label="Body"
           rows={3}
         />
@@ -512,14 +518,26 @@ export default class Files extends React.Component<Props, State> {
     if (filtered.includes(post.uploader)) {
       return true;
     }
-
+    
     // For default country members
     return COUNTRY_OPTIONS
       .filter(x => filtered.includes(x.key))
       .map(x => x.text)
       .includes(post.uploader)
   }
 
+  isResolutionAssociated = (post: PostData) => {
+    if (!this.props.forResolution && post.forResolution) {
+      return false;
+    }
+
+    if (this.props.forResolution) {
+      return this.props.forResolution === post.forResolution;
+    }
+
+    return true;
+  }
+
   render() {
     const { committee } = this.state;
     const { committeeID } = this.props.match.params;
@@ -541,22 +559,34 @@ export default class Files extends React.Component<Props, State> {
       },
     ];
 
-    return (
-      <Container text style={{ padding: '1em 0em' }}>
-        <Tab panes={panes} />
+    const inner = (
+      <>
+        <Tab 
+          menu={{ attached: true, tabular: false }}
+          panes={panes} 
+        />
         {this.renderFilter()}
         <Feed size="large">
           {committee ? Object.keys(files).reverse()
             .filter(key => this.isFiltered(files[key]))
+            .filter(key => this.isResolutionAssociated(files[key]))
             .map(key =>
-            <FeedEntry 
+            <Entry 
               key={key} 
               committeeID={committeeID}
               post={files[key]}
             />
           ) : <Loading />}
         </Feed>
-      </Container>
-    );
+      </>
+    )
+
+    return this.props.forResolution
+      ? inner:
+      (
+        <Container text style={{ padding: '1em 0em' }}>
+          {inner}
+        </Container>
+      );
   }
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -8,7 +8,7 @@ interface State {
   timerId?: NodeJS.Timer;
 }
 
-export const CLIENT_VERSION = 'v2.17.0';
+export const CLIENT_VERSION = 'v2.18.0';
 
 export const CLIENT_VERSION_LINK = (
   <a href="https://github.com/MaxwellBo/Muncoordinated-2/releases">
@@ -59,7 +59,8 @@ export default class Footer extends React.PureComponent<Props, State> {
       </span>
     );
 
-    const willShowNudge = latestVersion && latestVersion !== CLIENT_VERSION;
+    // const willShowNudge = latestVersion && latestVersion !== CLIENT_VERSION;
+    const willShowNudge = false;
 
     return (
       <div style={{ position: 'fixed', bottom: 5, left: 5, background: '#FFFFFF' }}>

diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx
@@ -453,7 +453,7 @@ export default class Homepage extends React.Component<{}, {
                   <p>Made with 💖 by <a href="https://github.com/MaxwellBo">Max Bo</a>, 
                   with assistance from the <a href="https://www.facebook.com/UQUNSA/">UQ United Nations Student Association</a>
                   </p>
-                  <p>Copyright © 2018</p>
+                  <p>Copyright © 2019</p>
                 </Grid.Column>
               </Grid.Row>
             </Grid>

diff --git a/src/components/Resolution.tsx b/src/components/Resolution.tsx
@@ -21,6 +21,7 @@ import { voteOnResolution, deleteResolution } from '../actions/resolutionActions
 import { postCaucus } from '../actions/caucusActions';
 import { Stance } from './caucus/SpeakerFeed';
 import { NotFound } from './NotFound';
+import Files from './Files';
 
 export const IDENTITCAL_PROPOSER_SECONDER = (
   <Message
@@ -435,7 +436,6 @@ export default class Resolution extends React.Component<Props, State> {
       <Dropdown
         placeholder="Select majority type"
         search
-        inverted
         options={MAJORITY_OPTIONS}
         onChange={dropdownHandler<ResolutionData>(resolutionFref, 'requiredMajority')}
         value={requiredMajority || DEFAULT_RESOLUTION.requiredMajority}
@@ -530,19 +530,10 @@ export default class Resolution extends React.Component<Props, State> {
     );
   }
 
-  renderHeader = (resolution?: ResolutionData) => {
+  renderMeta = (resolution?: ResolutionData) => {
     const resolutionFref = this.recoverResolutionFref();
     const { handleProvisionResolution, amendmentsArePublic } = this;
 
-    const statusDropdown = (
-      <Dropdown
-        value={resolution ? resolution.status : ResolutionStatus.Introduced}
-        options={RESOLUTION_STATUS_OPTIONS}
-        onChange={dropdownHandler<ResolutionData>(resolutionFref, 'status')}
-        loading={!resolution}
-      />
-    );
-
     const memberOptions = recoverMemberOptions(this.state.committee);
 
     // TFW no null coalescing operator 
@@ -610,6 +601,56 @@ export default class Resolution extends React.Component<Props, State> {
     return (
       <React.Fragment>
         <Segment attached={amendmentsArePublic(resolution) ? 'top' : undefined}>
+          <Form error={hasError}>
+            {proposerTree}
+            {seconderTree}
+            {IDENTITCAL_PROPOSER_SECONDER}
+            {provisionTree}
+            <Form.Checkbox
+              label="Delegates can amend"
+              indeterminate={!resolution}
+              toggle
+              checked={amendmentsArePublic(resolution)}
+              onChange={checkboxHandler<ResolutionData>(resolutionFref, 'amendmentsArePublic')}
+            />
+          </Form>
+        </Segment>
+        {amendmentsArePublic(resolution) && DELEGATES_CAN_AMEND_NOTICE}
+      </React.Fragment>
+    );
+  }
+
+  renderText = (resolution?: ResolutionData) => {
+    const resolutionFref = this.recoverResolutionFref();
+
+    return (
+      <Form>
+        <TextArea
+          value={resolution ? resolution.link : ''}
+          autoHeight
+          onChange={textAreaHandler<ResolutionData>(resolutionFref, 'link')}
+          attatched="top"
+          rows={3}
+          placeholder="Resolution text"
+        />
+      </Form>
+    )
+  }
+
+  renderHeader = (resolution?: ResolutionData) => {
+    const resolutionFref = this.recoverResolutionFref();
+
+    const statusDropdown = (
+      <Dropdown
+        value={resolution ? resolution.status : ResolutionStatus.Introduced}
+        options={RESOLUTION_STATUS_OPTIONS}
+        onChange={dropdownHandler<ResolutionData>(resolutionFref, 'status')}
+        loading={!resolution}
+      />
+    );
+
+    return (
+        <Segment>
           <Input
             value={resolution ? resolution.name : ''}
             label={statusDropdown}
@@ -621,34 +662,7 @@ export default class Resolution extends React.Component<Props, State> {
             fluid
             placeholder="Set resolution name"
           />
-          <Form error={hasError}>
-            <Form.Group widths="equal">
-              {proposerTree}
-              {seconderTree}
-            </Form.Group>
-            {IDENTITCAL_PROPOSER_SECONDER}
-            <Form.Group>
-              {provisionTree}
-              <Form.Checkbox
-                label="Delegates can amend"
-                indeterminate={!resolution}
-                toggle
-                checked={amendmentsArePublic(resolution)}
-                onChange={checkboxHandler<ResolutionData>(resolutionFref, 'amendmentsArePublic')}
-              />
-            </Form.Group>
-            <TextArea
-              value={resolution ? resolution.link : ''}
-              autoHeight
-              onChange={textAreaHandler<ResolutionData>(resolutionFref, 'link')}
-              attatched="top"
-              rows={1}
-              placeholder="Resolution text or link to resolution text"
-            />
-          </Form>
         </Segment>
-        {amendmentsArePublic(resolution) && DELEGATES_CAN_AMEND_NOTICE}
-      </React.Fragment>
     );
   }
 
@@ -720,15 +734,26 @@ export default class Resolution extends React.Component<Props, State> {
     );
   }
 
+  renderFeed = () => {
+    const resolutionID: ResolutionID = this.props.match.params.resolutionID;
+
+    return <Files {...this.props} forResolution={resolutionID} />;
+  }
+
   renderResolution = (resolution?: ResolutionData) => {
-    const { renderHeader, renderAmendmentsGroup, renderVoting, renderDelete } = this;
+    const { renderAmendmentsGroup, renderVoting, renderDelete, renderFeed, renderText } = this;
 
     const panes = [
       {
         menuItem: 'Amendments',
         render: () => <Tab.Pane>{renderAmendmentsGroup(resolution)}</Tab.Pane>
-      },
-      {
+      }, {
+        menuItem: 'Text',
+        render: () => <Tab.Pane>{renderText(resolution)}</Tab.Pane>
+      }, {
+        menuItem: 'Feed',
+        render: () => <Tab.Pane>{renderFeed()}</Tab.Pane>
+      }, {
         menuItem: 'Voting',
         render: () => <Tab.Pane>{renderVoting(resolution)}</Tab.Pane>
       }, {
@@ -739,8 +764,21 @@ export default class Resolution extends React.Component<Props, State> {
 
     return (
       <Container>
-        {renderHeader(resolution)}
-        <Tab panes={panes} />
+        <Grid columns="equal" stackable>
+          <Grid.Row>
+            <Grid.Column>
+              {this.renderHeader(resolution)}
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row>
+            <Grid.Column width={11}>
+              <Tab panes={panes} />
+            </Grid.Column>
+            <Grid.Column width={5}>
+              {this.renderMeta(resolution)}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid >
       </Container>
     );
   }