Form new create

app/controllers/resources_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+class ResourcesController < ApplicationController
+  skip_before_action :if_not_signed_in
+
+  def new
+    @external_resource = ExternalResource.new
+  end
+
+  def create
+    @external_resource = ExternalResource.new external_resources_params
+    if @external_resource.save
+      redirect_to new_resource_path,
+                  notice: 'Your suggestion has been submitted!'
+    else
+      redirect_to new_resource_path,
+                  alert: @external_resource.errors.full_messages.join("', '")
+    end
+  end
+
+  private
+
+  def external_resources_params
+    params.require(:external_resource).permit(:name, :link, languages: [])
+  end
+end

app/helpers/external_resources_form_helper.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+module ExternalResourcesFormHelper
+  include FormHelper
+
+  def new_external_resource_props
+    new_form_props(external_resources_form_inputs, resources_path)
+  end
+
+  private
+
+  def external_resource_input_props(field, type, label, group = false)
+    { id: "external_resource_#{field}", type: type,
+      name: "external_resource[#{field}]#{group ? '[]' : ''}",
+      label: label }
+  end
+
+  def external_resources_form_inputs
+    [external_resource_name, external_resource_link, external_resource_languages]
+  end
+
+  def external_resource_text_input_props(field, type, label, required = false)
+    external_resource_input_props(field, type, label)
+      .merge(value: @external_resource[field] || nil, required: required, dark: false)
+  end
+
+  def external_resource_name
+    external_resource_text_input_props('name', 'text', 'name', true)
+  end
+
+  def external_resource_link
+    external_resource_text_input_props('link', 'text', 'link', true)
+  end
+
+  def external_resource_languages
+    {
+      id: 999,
+      name: 'external_resource[languages][]',
+      label: 'Choose a language',
+      type: 'select',
+      value: 'languages',
+      options: [
+        {
+          id: 1,
+          value: 'en',
+          label: 'English'
+        },
+        {
+          id: 2,
+          value: 'pt-BR',
+          label: 'Portuguese'
+        },
+        {
+          id: 3,
+          value: 'es',
+          label: 'Spanish'
+        },
+        {
+          id: 4,
+          value: 'fr',
+          label: 'French'
+        },
+        {
+          id: 5,
+          value: 'it',
+          label: 'Italian'
+        },
+        {
+          id: 6,
+          value: 'hi',
+          label: 'Hindi'
+        },
+        {
+          id: 7,
+          value: 'nb',
+          label: 'Norwegian'
+        },
+        {
+          id: 8,
+          value: 'nl',
+          label: 'Dutch'
+        },
+        {
+          id: 9,
+          value: 'sv',
+          label: 'Swedish'
+        },
+        {
+          id: 10,
+          value: 'vi',
+          label: 'Vietnamese'
+        }
+      ]
+    }
+  end
+end

app/views/pages/resources.html.erb

@@ -1,2 +1,3 @@
 <% title t('navigation.resources') %>
 <%= react_component('Resources', props: { resources: @resources, keywords: @keywords }) %>
+

app/views/resources/new.html.erb

@@ -0,0 +1,2 @@
+<%title 'New Resource View' %>
+<%= react_component('Form', props: new_external_resource_props) %>

client/app/widgets/Resources/index.jsx

@@ -44,6 +44,11 @@ const sortAlpha = (checkboxes: Checkbox[]): Checkbox[] =>
 
 const infoDescription = (
   <center className={css.marginBottom}>
+    <p>
+      <a href={`/resources/new`}>
+        {I18n.t('pages.resources.external_resource')}
+      </a>
+    </p>
     {I18n.t('pages.resources.description')}
     <p>
       <a
@@ -59,8 +64,10 @@ const createCheckboxes = (resources: ResourceProp[], keywords: string[]) => {
   const tagsList = [
     ...new Set(
       resources
-        .map((resource: ResourceProp) => resource.tags.concat(resource.languages))
-        .reduce((acc, val) => acc.concat(val), []),
+        .map((resource: ResourceProp) =>
+          resource.tags.concat(resource.languages)
+        )
+        .reduce((acc, val) => acc.concat(val), [])
     ),
   ];
   return sortAlpha(
@@ -70,23 +77,24 @@ const createCheckboxes = (resources: ResourceProp[], keywords: string[]) => {
       value: tag,
       label: tag,
       checked: keywords.some(
-        (keyword) => keyword.toLowerCase() === tag.toLowerCase(),
+        (keyword) => keyword.toLowerCase() === tag.toLowerCase()
       ),
-    })),
+    }))
   );
 };
 
 const filterList = (
   checkboxes: Checkbox[],
-  resources: ResourceProp[],
+  resources: ResourceProp[]
 ): ResourceProp[] => {
   const selectedCheckboxes: Checkbox[] = checkboxes.filter(
-    (checkbox: Checkbox) => !!checkbox.checked,
+    (checkbox: Checkbox) => !!checkbox.checked
   );
   return resources.filter((resource: ResourceProp) => {
     const tagCheck = selectedCheckboxes.map((checkbox: Checkbox) =>
       // eslint-disable-next-line implicit-arrow-linebreak
-      resource.tags.concat(resource.languages).includes(checkbox.id));
+      resource.tags.concat(resource.languages).includes(checkbox.id)
+    );
     return selectedCheckboxes.length > 0 ? tagCheck.includes(true) : true;
   });
 };
@@ -97,16 +105,16 @@ export const Resources = ({
   history = HistoryLib,
 }: Props) => {
   const [checkboxes, setCheckboxes] = useState<Checkbox[]>(
-    createCheckboxes(resources, keywords),
+    createCheckboxes(resources, keywords)
   );
   const [filteredResources, setFilteredResources] = useState<ResourceProp[]>(
-    filterList(checkboxes, resources),
+    filterList(checkboxes, resources)
   );
   const [resourcesDisplayed, setResourcesDisplayed] = useState<number>(
-    Math.min(RESOURCES_PER_PAGE, filteredResources.length),
+    Math.min(RESOURCES_PER_PAGE, filteredResources.length)
   );
   const [lastPage, setLastPage] = useState<boolean>(
-    filteredResources.length <= RESOURCES_PER_PAGE,
+    filteredResources.length <= RESOURCES_PER_PAGE
   );
 
   useEffect(() => {
@@ -128,28 +136,30 @@ export const Resources = ({
   useEffect(() => {
     setLastPage(filteredResources.length <= RESOURCES_PER_PAGE);
     setResourcesDisplayed(
-      Math.min(RESOURCES_PER_PAGE, filteredResources.length),
+      Math.min(RESOURCES_PER_PAGE, filteredResources.length)
     );
   }, [filteredResources]);
 
   const checkboxChange = (box: Checkbox) => {
     setCheckboxes(
-      checkboxes.filter((checkbox) => checkbox.id !== box.id).concat(box),
+      checkboxes.filter((checkbox) => checkbox.id !== box.id).concat(box)
     );
   };
 
   const updateTagFilter = (tagLabel: String) => {
     const updatedBoxes = checkboxes.map((box) =>
       // eslint-disable-next-line implicit-arrow-linebreak
-      (box.label === tagLabel ? { ...box, checked: true } : box));
+      box.label === tagLabel ? { ...box, checked: true } : box
+    );
     setCheckboxes(updatedBoxes);
   };
 
   const onClick = () => {
-    const updatedResourcesDisplayed = Math.min(
-      filteredResources.length - resourcesDisplayed,
-      RESOURCES_PER_PAGE,
-    ) + resourcesDisplayed;
+    const updatedResourcesDisplayed =
+      Math.min(
+        filteredResources.length - resourcesDisplayed,
+        RESOURCES_PER_PAGE
+      ) + resourcesDisplayed;
 
     setResourcesDisplayed(updatedResourcesDisplayed);
     setLastPage(filteredResources.length === updatedResourcesDisplayed);

config/locales/en.yml

@@ -632,11 +632,12 @@ en:
         %{jamie_king_media}.</em></p>
     resources:
       description: >-
-        This is our curated list of mental health resources, which includes
+        This is our ed list of mental health resources, which includes
         communities, educational tools, hotlines, and services.
       emergency: >-
         If you or someone you know is experiencing a mental health emergency,
         reach out for help as soon as possible.
+      external_resource: Suggest a resource
       crisis_prevention:
         title: How are you doing?
         description: You are loved no matter what

config/routes.rb

@@ -110,6 +110,8 @@
     end
   end
 
+  resources :resources, only: %i[new create]
+
   get 'pages/home'
   match 'about', to: 'pages#about', via: :get
   match 'admin_dashboard', to: 'pages#admin_dashboard', via: :get
@@ -121,6 +123,7 @@
   match 'resources', to: 'pages#resources', via: :get
   get 'home_data', to: 'pages#home_data', defaults: { format: 'json' }
 
+
   devise_for :users, controllers: { registrations: :registrations,
                                     omniauth_callbacks: 'omniauth_callbacks',
                                     invitations: 'users/invitations',