Update URL and projects list based on langauge query parameter

app/assets/javascripts/language_filter.js

@@ -3,17 +3,36 @@ window.setupLanguageFilter = function () {
       $id = $('#language_id'),
       $list = $('#project-list'),
       $message = $('#projects-message'),
-      defaultMessage = $message.text();
+      defaultMessage = $message.text(),
+      $refresh = $("#refresh");
+      var current = window.location.href;
 
   // Handle resetting the filter to all
   function reset() {
     $id.val('');
     change();
   }
 
+  // Handle refreshing issues list
+  function refresh() {
+      var languageId = $id.val();
+      if(languageId == ""){
+        // no language selected = do nothing
+      }else {
+        var url = '/languages/projects/' + languageId;
+        $.ajax({
+          type: 'GET',
+          url: url,
+          success: function (htmlData) {
+            $list.html(htmlData);
+          }
+        });
+      }
+    }
+
   // Handle the filter selection changing
   function change() {
-    var languageId = $id.val();
+    var languageId = $id.val()
     var url = '/languages/projects/' + languageId;
     $.ajax({
       type: 'GET',
@@ -25,19 +44,108 @@ window.setupLanguageFilter = function () {
     // Empty string means 'Select Language'
     if (languageId === "") {
       $reset.removeClass('active');
+      $refresh.removeClass('active');
       $message.text(defaultMessage);
+      // reset URL to remove original query when filter is removed
+      var removeQueryURL = current.split("?")[0];
+      history.pushState(null, " ", removeQueryURL);
     } else {
       $message.text('Displaying ' + $id.find("option:selected").text() + ' projects only');
       $reset.addClass('active');
+      $refresh.addClass('active');
+      var changed_url = $id.find("option:selected").text();
+      var new_lang_url = changed_url.toLowerCase();
+      history.pushState(null, " ", "?language=" + new_lang_url);
     }
   }
 
-  // Deal with browsers remembering last state of select
-  change();
-
   // Detect the select change event
   $id.change(change);
 
   // Detect the reset button being clicked
   $reset.click(reset);
-};
+
+  // Detect the refresh button being clicked
+  $refresh.click(refresh);
+
+//////////  LANGUAGE QUERY PARAM CODE BELOW //////////
+
+  // take URL turn into string, split after '?', convert any '%20" to whtiespace', trim/remove whitespace
+  var convertURL = current.toString().toLowerCase().split("?")[1].replace(/%20/g, " ").trim().replace(/\s/g, '');
+  var issues = document.getElementsByClassName("lang")[0];
+  // store converted URL query in variable
+  var query_param = convertURL;
+  var lang_select = document.getElementById("language_id");
+  var lang_option = document.querySelectorAll("option");
+  var textArr = [];
+  var final = [];
+  var count = 0;
+
+  // compare query_param to items in final text array
+  function languageURL() {
+      for(var i=0; i<final.length;i++){
+        //keep track of index of match
+        count++;
+        if(query_param == final[i]){
+          var indexNum = count - 1;
+          var selectedOption = indexNum;
+
+          // set language select option to query param
+          lang_select.value = selectedOption;
+
+          // scroll to language select section
+          issues.scrollIntoView();
+
+          //change URL based on lang query
+          var remove_query = current.split("?")[0];
+          var url = new URL(remove_query);
+          var query_string = url.search;
+          var search_params = new URLSearchParams(query_string);
+          search_params.set("language", final[i]);
+          url.search = search_params.toString();
+          new_url = url.toString();
+          history.pushState(null, " ", new_url);
+
+          change();
+        }else{
+          // if no match - do nothing
+        }
+        //end of else
+      }
+      //end of loop;
+  }
+  //end of languageURL function
+
+  function extractLang() {
+    if(convertURL.includes("language=") == true){
+      let extract = convertURL.slice(9);
+      query_param = extract;
+      languageURL();
+    }else{
+    // there is no 'language=' in the URL so there is no need to extract the query
+    // go straight to calling comparison function
+    languageURL();
+    }
+  }
+
+  function convertText() {
+    for(var k=1; k<textArr.length; k++){
+      // turn option items into lowercase
+      var lowercase_opt = textArr[k - 1].toLowerCase();
+      // remove any whitespace
+      var no_space = lowercase_opt.replace(/\s/g, '');
+      // final result to compare against query_param
+      final.push(no_space);
+    }
+    extractLang();
+  }
+
+  function storeOptionText() {
+    for(var j=0; j<lang_option.length; j++){
+      textArr.push(lang_option[j].text);
+    }
+    convertText();
+  }
+
+  storeOptionText();  // on page load call first function
+}

app/assets/stylesheets/homepage.scss

@@ -299,13 +299,30 @@ main.home {
         opacity: 0;
         pointer-events: none;
         margin: 0.5em 0 0;
+        margin-top: -33px;
+        margin-left: 50px;
         padding: 0.3em 1em;
 
         &.active {
           opacity: 1;
           pointer-events: initial;
         }
       }
+
+      #refresh {
+        opacity: 0;
+        pointer-events: none;
+        width: 40px;
+        margin: 0.5em 0 0;
+        padding: 0.3em 1em;
+        height: 33px;
+        font-size: 1.2em;
+
+        &.active {
+          opacity: 1;
+          pointer-events: initial;
+        }
+      }
     }
   }
 

app/views/pages/index.html.erb

@@ -37,7 +37,7 @@
       <span class="line-br-2">-</span>
     </div>
     <a name="projects"></a>
-    <h2 class="title is-2 is-spaced">Hacktoberfest projects</h2>
+    <h2 class="title is-2 is-spaced lang">Hacktoberfest projects</h2>
     <p class="p">
       You can contribute to any project on GitHub. Here are a few looking for some help:
     </p>
@@ -51,6 +51,7 @@
             </div>
           </div>
         </div>
+        <button id="refresh" class="button button-small" type="button" name="button">&#x21bb;</button>
         <button type="button" class="button button-small" id="reset-filter">Remove filter</button>
       </div>
     </div>

db/seeds.rb

@@ -3,3 +3,99 @@
 User.create!
 User.create!
 User.create!
+
+10.times do
+  FactoryBot.create(:issue)
+end
+Language.create(name: "Brainfuck")
+
+Language.create(name: "C")
+
+Language.create(name: "C#")
+
+Language.create(name: "C++")
+
+Language.create(name: "CSS")
+
+Language.create(name: "Clojure")
+
+Language.create(name: "CoffeeScript")
+
+Language.create(name: "ColdFusion")
+
+Language.create(name: "Coq")
+
+Language.create(name: "Coq")
+
+Language.create(name: "Dart")
+
+Language.create(name: "Dockerfile")
+
+Language.create(name: "F#")
+
+Language.create(name: "Go")
+
+Language.create(name: "HTML")
+
+Language.create(name: "Haskell")
+
+Language.create(name: "Java")
+
+Language.create(name: "JavaScript")
+
+Language.create(name: "Julia")
+
+Language.create(name: "Jupyter Notebook")
+
+Language.create(name: "Kotlin")
+
+Language.create(name: "Lua")
+
+Language.create(name: "MATLAB")
+
+Language.create(name: "Objective-C")
+
+Language.create(name: "PHP")
+
+Language.create(name: "PLSQL")
+
+Language.create(name: "Pascal")
+
+Language.create(name: "Perl")
+
+Language.create(name: "PowerShell")
+
+Language.create(name: "Processing")
+
+Language.create(name: "Python")
+
+Language.create(name: "QML")
+
+Language.create(name: "R")
+
+Language.create(name: "Rich Text Format")
+
+Language.create(name: "Ruby")
+
+Language.create(name: "Rust")
+
+Language.create(name: "Scala")
+
+Language.create(name: "Shell")
+
+Language.create(name: "Swift")
+
+Language.create(name: "TSQL")
+
+Language.create(name: "TeX")
+
+Language.create(name: "TypeScript")
+
+Language.create(name: "Vim script")
+
+Language.create(name: "Vue")
+
+Repository.all.each do |r|
+  r.language_id = Language.second.id
+  r.save
+end